使用 jQuery 解析 HTML答案

【问题标题】：Parsing HTML using jQuery使用 jQuery 解析 HTML
【发布时间】：2011-11-15 11:18:37
【问题描述】：

我是学习 Jquery 的新手。我想解析 HTML 字符串：

<tr>
    <td class="first"><b><a href="/q?s=TOM">TOM</a></b></td>
    <td class="second name">Tom is a good boy</td>
    <td class="last_trade"><b><span id="yfs_l10_TOM">5.45</span></b> <nobr><span id="yfs_t10_TOM">Sep 9</span></nobr></td>
    <td><span id="yfs_c10_TOM"><width="10" height="14" border="0" src="abcdefgh" alt="Down"> <b style="color:#cc0000;">14.49</b></span> <span id="yfs_p20_TOM"><b style="color:#cc0000;"> (72.67%)</b></span></td>
    <td><span id="yfs_v00_TOM">4,100</span></td>
    <td class="last"><a href="/q/bc?s=TOM">Chart</a>, <a href="/q?s=TOM">More</a></td>
</tr>

上面的字符串在 HTML 中以不同的值重复 10 次我想获取值：TOM, 5.45, 14.49, 72.67% , 4,100 用于 HTML 中类似字符串的所有 10 次重复。

【问题讨论】：

如果string.split() 不足以满足您的需求，您可能需要使用正则表达式和string.match()。（这些是纯 JavaScript 方法，而不是 jQuery。）
建议使用正则表达式的每个人都会获得指向RegEx match open tags except XHTML self-contained tags 的链接。 Shilpi Gautam，如果你想通过解析 HTML 来学习 jQuery，我建议尝试另一种方式，jQuery 并不是真正要解析 HTML，学习它也不是一个好的练习。

标签： jquery html-parsing

【解决方案1】：

Here is a working sample，我创建它是为了帮助您使用所需的 jQuery 选择器。 jQuery 代码循环每个 tr:

var results = [];

$("table tr").each(function(i) {
    results[i] = {
        firstName: $("td.first", this).text(),
        lastTrade: $("td.last_trade span:first", this).text(),
        down: $("td.last_trade", this).next("td").find("span:first").text(),
        downPercentage: $("td.last_trade", this).next("td").find("span:last").text(),
        someOtherNumber: $("td.last", this).prev("td").text() 
    };
});

您必须根据需要更改属性名称并使用results。

【讨论】：

非常简洁，比我的方法更简洁，对我来说是一个很好的教训;-)

【解决方案2】：

使用 javascript 正则表达式 (AKA Regexp)：

var data = "TOMTom is a good boy5.45 Sep 9 14.49 (72.67%)4,100Chart, More";
var regex = /^(.+)Tom is a good boy([0-9\.]+) [^\s]+ [0-9]+ ([0-9\.]+) \(([0-9,]+)%\)([0-9\.]+)/
var extracted_data = data.match(regex);
alert(extracted_data[0]);
alert(extracted_data[1]);
alert(extracted_data[2]);
alert(extracted_data[3]);

【讨论】：

嗯，问题变了，因此我的回答不是正确的。如果您需要解析字符串而不是 DOM，这是一个解决方案。

【解决方案3】：

您可以使用each 循环遍历表行并按类获取值。

$("#table1 tr").each(function() 
{
    $this = $(this);
    var firstName = $this.find(".first").text();
    var secondName = $this.find(".second").text(); 
    // ...
});

【讨论】：

【解决方案4】：

基于更新的问题...

我个人会创建一个对象来存储每一行中的数据：

    pupil = function () {
        this.name;
        this.score;
        this.dob;
        //..etc
    }

然后在页面加载后填充一个数组，例如：

    $(function () {
        var pupils = [];
        $('table').find('tr').each(function (x, d) {
            temp = new pupil();
            temp.name = $(d).find('.first').find('a').html();
            //...etc...
        });
    });

【讨论】：

使用 ErickPetru 的答案要好得多，它只是教会了我一个更好的方法；-)
还要注意他使用文本而不是 html ...好多了 ;-)