当使用.html()方法时，jQuery是否会从字符串中删除一些HTML元素？

Question

18

我有一个包含完整HTML页面的变量，包括head、html、body等。当我将该字符串传递给.html()函数时，jQuery会删除所有这些元素，如body、html、head等，但我不想这样做。

我的数据变量包含：

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

然后我的jQuery代码是：

// data is a full html document string
data = $('<div/>').html(data);
// jQuery stips my document string!
alert(data.find('head').html());

我需要操作一个完整的HTML页面字符串，以便返回位于 <body> 元素中的内容。我想使用jQuery来实现这一点，但似乎所有的方法（如append()，prepend()和html()）都会尝试将字符串转换为DOM元素，并删除完整HTML页面的其他部分。

是否有其他方法可以做到这一点？我愿意使用其他方法。我的最终目标是在字符串中查找特定元素，因此我认为使用jQuery是最好的选择，因为我已经习惯了它。但是，如果它要修剪和删除我的字符串的某些部分，我就必须寻找另一种方法。

有什么建议吗？

- Nic Hubbard

4个回答

4

以下是一个解决方案，其中包括body、head和其他属性： mydoc = document.getElementById('NAME_OF_PREVIEW_FRAME').contentWindow.document; mydoc.write(HTML_CODE); mydoc.close();

请注意，这段代码可以帮助您在预览框架中显示HTML代码。只需将HTML代码替换为您想要显示的内容即可。

- ılǝ

2

不，jQuery的html函数只是将字符串传递给元素的innerHTML属性，这是浏览器的一个函数，它告诉浏览器将HTML解析为DOM元素并将其添加到页面中。

您的浏览器不会将页面作为HTML数据处理，而是将其作为DOM导入/导出HTML。

JavaScript具有非常好的正则表达式支持。根据您的任务复杂性，您可能会发现这是处理数据的最佳方法。

- Tobias Cohen

0

不需要容器 div。

你试过这个吗？

var foo = $(data);  // data is your full html document string

然后你可以像这样在其中搜索：

$('.someClass', foo); // foo is the document you created earlier

更新：

正如另一个回答所提到的，这将取决于浏览器的操作方式。

我稍微查看了一下jQuery文档，并找到了以下内容：

当HTML比单个没有属性的标记更复杂时，就像上面的例子一样，元素的实际创建是由浏览器的 innerHTML 机制处理的。具体来说，jQuery创建了一个新的 <div> 元素，并将该元素的 innerHTML 属性设置为传递进来的HTML片段。

因此，当您使用整个HTML文档作为字符串时，与使用 createElement 创建的 div 并设置其 innerHTML 属性没有什么区别。

- TM.

$('<html><head></head></html>') 在 Chrome 中会引发至少十几个 JS 错误。 - Max Shawabkeh

似乎不起作用。我尝试了 alert($('head', data).html())，但只返回 null。 - Nic Hubbard

@Max，对我来说它没有产生任何错误，但我在Chrome中只得到一个空对象。这很奇怪，我已经测试过$('<html>')，它完全正常运行。 - TM.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jitter · Accepted Answer

经过几次快速测试，我认为这种行为不是由jQuery引起的，而是由浏览器引起的。

正如您可以轻松验证的那样（演示 http://jsbin.com/ocupa3）

var data = "<html><head><title>Untitled Document</title></head><body><p>test</p></body></html>";
data = $('<div/>').html(data);
alert(data.html());

在不同浏览器中会产生不同的结果。 Opera 10.10

<HEAD><TITLE>Untitled Document</TITLE></HEAD><P>test</P>

FF 3.6

<title>Untitled Document</title><p>test</p>

IE6

<P>test</P>

所以这与jQuery无关，是浏览器在将整个HTML字符串插入div时剥离了一些标签。但要确定这一点，您需要逐步查看整个jQuery代码中的html()。而且，由于有几种不同的方法，jQuery尝试执行工作，您需要针对所有浏览器都执行此操作。

针对解决方案，我建议您调查使用iframe（可能是隐藏的），并将该iframe内容设置为您拥有的HTML字符串。但请注意，与iframe搭配并在程序上更改其内容并非易事。还涉及到不同的与浏览器相关的怪癖和时间问题。