如何使用 jQuery 从 html 字符串中提取多个部分？答案

【问题标题】：How to extract multiple parts from a html string with jQuery?如何使用 jQuery 从 html 字符串中提取多个部分？
【发布时间】：2010-11-13 01:30:57
【问题描述】：

这是my other question 的一个更具体的问题。

我需要从这个表格行中提取部分..

<tr><td colspan="7"><a href="http://link/index.php?view=page&id=2961" target="_blank" title="title">atext1 atext2</a> - stuff 2 - <img src="img/icon_1.gif" class="icon" title="icon1" />12 - <img src="img/icon_2.gif" class="icon" title="icon2" />4 - <span title="long title"><img src="img/icon_3.gif" class="icon" /> stuff 5 </span></td></tr>

..所以我最终得到了一个这样的数组（或对象）：

var data = [
 'id' = 2961,
 'text' = 'stuff 2',
 'link' = '<a href="http://link/index.php?view=page&id=2961" target="_blank" title="title">atext1</a>',
 'icon1' = '<img src="img/icon_1.gif" class="icon" title="icon1" />12',
 'icon2' = '<img src="img/icon_2.gif" class="icon" title="icon2" />4',
 'icon3' = '<img src="img/icon_3.gif" class="icon" title="stuff 5: long title" />'
];

到目前为止，我只能获得 id。我尝试将 td.html() 值与var tdspilt = $('td', tr).html().split(' - '); 分开，但这会产生 2 个问题。 1) tdsplit array 上的 jquery 函数丢失，以及 2) .html() 将 &amp; 替换为 &amp;

var tr = 'above tr row';
var data = [];
data['id'] = $('td', tr).eq(0).find('a').attr('href').match(/view=page&id=([0-9]+)/)[1];

我怎样才能得到想要的结果？

【问题讨论】：

嗯，你可以控制 HTML 吗？如果是这样，我建议将每条信息放在它自己的而不是 colspan="7" 中，我们可以轻松解析它
我愿意，但删除 colspan 会破坏演示文稿，因此不是一个选择。
我可以帮助解析您最终得到的任何格式，但是您的数据实际上是作为松散文本浮动的吗？你能把文本内容 2 包围在一个范围内吗？
在 span 中放置“stuff 2”不会影响外观，所以可以。整个 td 内容以' - '作为分隔符分隔成块。如果与 .split 等效，但会保留 jQuery 功能，那么这将解决我的问题。然而，在我的研究中，所有文章都引用了 javascript 的原生字符串函数，即使在使用 jQuery 时，在处理字符串操作时也是如此:(

jQuery.fn.outerHTML = function(s) { return (s) ? this.before(s).remove() : jQuery("<p>").append(this.eq(0).clone()).html(); } function escapeRegExpStr(str){ return str.replace(/[\[\]\\{}()+*?.$^|]/g, function(m){return '\\'+m;}); } data['id'] = $('td', tr).eq(0).find('a').attr('href').match(/view=page&id=([0-9]+)/)[1]; data['link'] = $('a', tr).eq(0).outerHTML(); data['text'] = $('td', tr).eq(0).html().match(new RegExp(escapeRegExpStr(data['link'])+" - (.*?) - ", ''))[1]; data['link'] = data['link'].replace(escapeRegExpStr($('a', tr).eq(0).html()), $('a', tr).eq(0).html().match(/(.*?) /)[1]); data['icon1'] = $('img', tr).eq(0).outerHTML(); data['icon1'] += $('td', tr).eq(0).html().match(new RegExp(escapeRegExpStr(data['icon1'])+"(.*?) - ", ''))[1]; data['icon2'] = $('img', tr).eq(1).outerHTML(); data['icon2'] += $('td', tr).eq(0).html().match(new RegExp(escapeRegExpStr(data['icon2'])+"(.*?) - ", ''))[1]; data['icon3'] = $('img', tr).eq(2).outerHTML(); icon3title = $.trim($('td', tr).eq(0).html().match(new RegExp(escapeRegExpStr(data['icon3'])+"(.*?)\s*<\/span>", ''))[1]) + ": " + $('span:last', tr).attr("title"); data['icon3'] = data['icon3'].replace(/>/, ' title="' + icon3title + '">');