1

以前，当我需要在字符串中操作某些 html 的内容时，我会做这样的事情

$('<div>').html(someHtmlString).find('#name').text("George").end().html()

这对 html 片段很有用，但在这种特殊情况下，我将 iframe 的内容作为字符串获取 - 所以它是一个代表完整 html文档的字符串，我需要以相同的方式操作它。这个技巧，甚至只是在 jQuery 中包装字符串不再有效。

这是一个演示问题的 jsbin

html = """
<html>
<head>
  <style>* { box-sizing: border-box; }</style
</head>
<body style="max-height: 750px">
  <style> body { background-color: 'lavender'; }</style>
  <div>
    <p>Hi</p>
    <p id="name">Your Name</p>
  </div>
</body>
</html>
"""

$html = $(html)
$html.find('#name').text("George")

console.log $html.html()

如何解析和操作完整的 html 文档？

请注意，头部可能包含样式元素，而主体可能具有我不想丢失的属性。当文档包含 svg 时，我也看到奇怪的序列化。

如果有另一个库可以更有意义地引入这里，我并不热衷于 jQuery

4

1 回答 1

2

最理智的方法可能只是用您的字符串创建一个文档（请参阅如何使用 JavaScript 创建文档对象），操作它（jQuery 是否可以操作它，我不确定，但我认为可以）然后抓取您需要的任何内容。您必须假设 html 是正确的，或者至少解析为（尽可能相同）DOM 树。我注意到在您的示例中，head 标签有一个带有无效结束标签的样式标签，所以我不知道它在所有正在考虑的浏览器中是如何工作的。

（抱歉，还没有工作示例。我今天早上有点忙，但我只是想把这个想法放在那里）。

于 2013-01-24T15:48:05.333 回答