Question

我试图创建脚本，将用户提交的HTML复制到jQuery对象中，对其进行操作，然后以纯文本形式将其返回给用户。我有一个<textarea>，用户将其HTML粘贴到然后提交。此时我抓取<textarea>的值并创建jQuery对象，以便我可以使用jQuery来修改它。

但是，我刚刚才注意到，<!doctype html>，<html>标记和<body>标记等内容似乎并未出现在对象中。这些东西可以在jQuery对象中不存在吗？我通过将<body>标记放入jQuery对象然后使用.find（）来测试它。我没有得到任何结果。

此外，当我使用How do you convert a jQuery object into a string?

中的代码时

$('<div>').append($('#item-of-interest').clone()).html();

缺少<body>标记。虽然，我不确定这是否仅仅因为我使用输出jQuery对象的字符串的方法。

Answer 1

如果你在jQuery对象构造函数内部遵循jQuery代码，一旦确定你已经传入HTML字符串，那么它就会在该字符串上调用jQuery.parseHTML()。如果您遵循parseHTML()方法，如果HTML不仅仅是单个标记，那么它会在同一个HTML字符串上调用buildFragment()，如果您遵循它，您会发现它丢弃了{ {1}}标记。我不知道为什么会这样做，但这就是编码行为的方式。

所以，有这种类型的代码流：

<body>

我无法弄清楚为什么jQuery object constructor determine if argument is an HTML string call jQuery.parseHTML() on the HTML string if string is not a single tag by itself, then call jQuery.buildFragment() on the string jQuery.buildFragment() seems to ignore the outer tag container会忽略外部buildFragment()，但确实如此。

在对<body>other content here</body>的进一步研究中，它正确地将外部标记解析为buildFragment()，但只要该标记不是标记类型，需要一些特殊处理（例如只能存在于表内的东西），它完全忽略外部标签的类型并强制它成为<body>。当从jQuery对象检索内容时，稍后将忽略该外部容器。再说一次，我不确定为什么会这样做，但这就是它的作用。

至于你的特殊问题，我认为结论是你不能使用jQuery的构造函数来处理整个HTML文档。它不是为了做到这一点而建立的。

您可以搜索提供给您的HTML文档并仅提取<div>和<body>之间的部分，将其提供给jQuery对象构造函数，对其进行操作，然后进行操作HTML返回到原始</body>和<body>标记之间的原始整个HTML文档，从而保留了您在{{1}内部使用jQuery时不想操作的所有内容} tag。

您可能也应该对</body>标记中的<body>元素保持警惕，因为它们可能也未完全保留。

Answer 2

由于这将用于内部应用程序，下面的函数可能很有用，even if it doesn't use jQuery（你总是可以在返回的元素上调用jQuery）

它需要一个字符串，并将其放在HTML元素中，让浏览器处理标记汤。它将返回一个始终具有头部和正文的html元素。

这并不完美，但它做了很多工作。通过我所做的少量测试，它可以在Chrome 36，Firefox 31，Opera 21和Internet Explorer 11中获得相同的结果。

它剥离了doctype标签和html标签。如果你在html-tag上有属性，它们就会丢失。但是你得到一个总是有头部和身体的html元素，即使输入没有。当我测试脚本标签时没有执行。我没有尝试过音频/视频标签，svg等...

使用一些额外的代码，您应该能够获取html元素的属性，并将doctype放在字符串中。

function mkDom(text) {
  var html;
  html=document.createElement('html');
  html.innerHTML = text;
  return html;
}

使用完整文档进行测试：

console.log(mkDom("<!doctype html><html lang='en'><head><title>Test</title><script src='test.js'></script></head><body><p>test</p><script>alert(1);</script></body></html>").outerHTML);

<html><head><title>Test</title><script src="test.js"></script></head><body><p>test</p><script>alert(1);</script></body></html>

头部和身体测试：

console.log(mkDom("<head><title>Test</title><script src='test.js'></script></head><body><p>test</p><script>alert(1);</script></body>").outerHTML);

<html><head><title>Test</title><script src="test.js"></script></head><body><p>test</p><script>alert(1);</script></body></html>

用身体测试：

console.log(mkDom("<body><p>test</p><script>alert(1);</script></body>").outerHTML);

<html><head></head><body><p>test</p><script>alert(1);</script></body></html>

使用部分身体进行测试：

console.log(mkDom("<p>test</p><script>alert(1);</script>").outerHTML);

<html><head></head><body><p>test</p><script>alert(1);</script></body></html>

body标签是否可以存在于jQuery对象中？

2 个答案: