Question

这就是事情，

我有一个充满HTML代码的textarea（带有ID＆＃34; input_container＆＃34;），简单的例子是：

<!doctype html>
<html>
    <head></head>
    <body>
        <a href="www.example.com">the other place</a>
    </body>
</html>

我使用jQuery解析它，这是我的代码：

我将所有这些HTML字符串都放入名为domString的变量中，如下所示：

domString = $('#input_container').val();

要获取变量 domString 中所有内容的解析HTML，我必须用另一个标记包装它，所以我做了：

dom = "<allhtml>" + domString + "</allhtml>";

将所有内容都放在要解析的jQuery选择器中：

dDom = $(dom);

之后我检查了dDom中的内容，所以我做了

alert(dDom.html());

那应该在标签内部给我任何东西，对吧？

但不幸的是，我得到的只是：

<a href="www.example.com">the other place</a>

所有其他标签都神秘地消失了。谁能解释这种现象并告诉我如何真正解析所有DOM？

谢谢

Answer 1

From the jQuery documentation：

传递复杂的HTML时，某些浏览器可能无法生成DOM 它完全复制了提供的HTML源代码。如上所述，我们使用浏览器的.innerHTML属性，用于解析传递的HTML和插入它进入当前的文件。在此过程中，某些浏览器过滤掉某些元素，例如<html>，<title>或<head> 元素。结果，插入的元素可能不具有代表性传递的原始字符串。

这应该起作用：

$('<html />').append($('<head />')).append($('<body />').append($('<a href="www.example.com">the other place</a>')));

这是一种奇怪的事情，但是你可能想要考虑其他方法去做你想要完成的事情，我担心你可能会受到XY Problem的痛苦。

Answer 2

我怀疑你正在使用jQuery load或AJAX调用。

这将尝试将文档加载到您当前的DOM中。它将通过innerHtml获取HEAD和BODY标签的内容，但不会自动获取标签本身（包括HTML标签）。

From the jQuery Load documentation

jQuery使用浏览器的.innerHTML属性来解析检索到的记录并将其插入当前文档。在此过程中，浏览器通常会过滤文档中的元素，例如<html>， <title>或<head>个元素。结果，检索到的元素 .load（）可能与检索文档时不完全相同直接通过浏览器。

编辑：如果您尝试获取页面的完整HTML，则同样适用。它将使用浏览器的innerHtml函数，其行为如上所述。一旦加载了DOM，HTML就不存在，所以朝相反的方向发展不一定是100％正确。

当您将该HTML加载到DOM中时，它会忽略这些标记，因为它们实际上根本没有加载。然后当你正在检索时，剩下的就是链接（以及你在HEAD中拥有的任何东西，但你没有任何东西......）。

jQuery HTML解析器正在删除一些没有警告的标签，为什么以及如何防止它？

2 个答案: