0

我想使用 jQuery 解析家庭 HTML，如下所示。当我使用文档时，它正在工作。但是在使用字符串时不起作用。

输出： 空

var str = "<html><title>This is Title</title><body><p>This is a content</p><p class='test'>Test content</p></body></html>";
$str = $(document); // working
$str = $(str);      // not working
alert($str.find(".test").html());

另一种方法（也失败）：

输出： 空

var str = "<html><title>This is Title</title><body><p>This is a content</p><p class='test'>Test content</p></body></html>";
alert($('.test',str).html());

我得到的字符串也不能被解析为 XML，因为它不是有效的 XHTML。

4

6 回答 6

7

jQuery 可以将 HTML 片段转换为 DOM 元素树，但它只对内容元素执行此操作，而不是html, title,head等。只有你要放入的内容 body。所以这可能会导致一些麻烦开始。

该find函数查找与给定选择器匹配的后代元素。因此，即使 jQuery 实例中的任何顶级元素与选择器匹配，它们也不会被find. 例如：

$('<p class="foo">foo</p>').find('.foo').length; // 0 -- none found

...因为匹配元素不是后代。要在顶层查找匹配的元素，请使用filter：

var str = "<p>This is a content</p><p class='test'>Test content</p>";
$(str).find('.test').length; // 0 -- no *descendants* found that match
$(str).filter('.test').length; // 1 -- there was one top-level element that matched

另一种方法是在使用之前将所有元素放入容器中，例如 div find：

var str = "<div><p>This is a content</p><p class='test'>Test content</p></div>";
$(str).find('.test').length; // 1 -- it was found
于 2012-10-22T12:56:52.860 回答
1

尝试这个：

var str = "<html><title>This is Title</title><body><p>This is a content</p><p class='test'>Test content</p></body></html>";
console.log($($.parseXML(str)).find('.test'));

因此，您首先将字符串解析为 XML。

UPD。正如 TJCrowder 在评论中指出的那样，您必须确保您的 HMTL 字符串是有效的 XHTML。

并使用普通 JS 的力量，它可能是：

var parser, xml,
    str = "<html><title>This is Title</title><body><p>This is a content</p><p class='test'>Test content</p></body></html>";

if (window.DOMParser) {
    parser = new DOMParser();
    xml = parser.parseFromString(str, "text/xml");
}
else { // IE
    xml = new ActiveXObject("Microsoft.XMLDOM");
    xml.async = "false";
    xml.loadXML(str);
}

console.log( $(xml).find('.test') );
于 2012-10-22T12:57:04.780 回答
1

问题是您的字符串包含完整的 HTML 文档。

这会起作用：

var str = "<div><p>This is a content</p><p class='test'>Test content</p></div>";
alert($(str).find('.test').html());​​​
于 2012-10-22T12:57:09.100 回答
0

你这么近！:) 该$(document)行返回一个 jQuery 集；您无需对其进行任何额外的转换。

$str = $(document); // working
alert($str.find(".test").html());​
于 2012-10-22T12:56:45.450 回答
0

试试下面的代码：

$(str).find(".test").html();

直接使用 str 变量...不要在变量中分配..

于 2012-10-22T12:58:00.350 回答
0

好的，因为它不是有效的 XHTML，我无法解析为 XML。但是我仍然得到了一个简单而愚蠢的解决方案来实现我想要的。

var str = "<html><title>This is Title</title><body><p>This is a content</p><p class='test'>Test content</p></body></html>";

//-- replace with document or whatever which will not conflict ---------
str = str.replace(/html>/gi,'document>');

alert($(str).find('.test').html());

输出： Test content.

可能不是正确的方法。但它仍然很好用！

谢谢@TJ克劳德。我从 jQuery 只能解析 HTML 片段的概念中得到了这个想法。所以，我们可以通过伪造来实现这一点！

于 2012-10-22T14:38:58.067 回答