Question

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

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

这适用于html片段，但在这种特殊情况下，我将iframe的内容作为字符串 - 所以它是一个字符串，表示我需要操作的完整html 文档一样的方法。这个技巧，甚至只是在jQuery中包装字符串都不再有效。

Here is a jsbin demonstrating the issue

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文档？

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

如果有另一个更有意义的库可以带到这里，我不会对jQuery持怀疑态度

Answer 1

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

（对不起，还没有工作的例子。今天早上我有点忙，但我只是想把那个想法放在那里）。

将正确的html doc作为字符串操作并转换回字符串

1 个答案: