Previously when I've needed to manipulate the contents of some html in a string I would do something like this
以前，我需要在字符串中操作一些html的内容时，我会这样做。
$('<div>').html(someHtmlString).find('#name').text("George").end().html()
this works great for an html fragment but in this particular case I'm getting the contents of an iframe as a string - so it's a string representing a full html document which I need to manipulate in the same way. This trick, or even just wrapping the string in jQuery no longer works.
这对于html片段很有用，但是在这个特殊的例子中，我将iframe的内容作为字符串来获取——所以它是一个表示完整html文档的字符串，我需要用同样的方法来操作。这个技巧，或者仅仅是在jQuery中结束字符串不再有效。
Here is a jsbin demonstrating the issue
这里有一个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()
How do I parse and manipulate a full html document?
如何解析和操作完整的html文档?
Note that the head might contain style elements and the body might have attributes that I do not want to lose. I'm also seeing odd serialization when the document contains an svg.
注意，head可能包含样式元素，而body可能具有我不想丢失的属性。当文档包含svg时，我也看到了奇怪的序列化。
I'm not hellbent on jQuery if there's another library that would make more sense to bring in here
如果有另一个更有意义的库，我不会对jQuery不感兴趣。
1 个解决方案
#1
2
The most sane approach may be just to create a document with your string ( see How to create Document objects with JavaScript), manipulate it (whether jQuery can manipulate it or not, I'm not sure, but I think so) and then grab whatever contents you need from it. You would have to assume that the html is proper, or at least parses into (as identical as possible) DOM trees. I notice in your example, the head tag has a style tag with an invalid end tag, so I don't know how that'd work in all browsers under consideration.
最明智的方法可能就是用你的字符串创建一个文档(看看如何用JavaScript创建文档对象)，操作它(不管jQuery是否可以操作它，我不确定，但我认为是这样的)，然后从它获取任何你需要的内容。您必须假定html是正确的，或者至少将其解析为(尽可能相同的)DOM树。我注意到在您的示例中，head标签有一个带有无效结束标记的样式标记，因此我不知道在考虑的所有浏览器中该如何工作。
(Sorry, no working example yet. I'm kinda busy this morning, but I just wanted to put that thought out there).
(抱歉，没有工作示例。我今天早上有点忙，但我只是想把这个想法放在那里。
#1
2
The most sane approach may be just to create a document with your string ( see How to create Document objects with JavaScript), manipulate it (whether jQuery can manipulate it or not, I'm not sure, but I think so) and then grab whatever contents you need from it. You would have to assume that the html is proper, or at least parses into (as identical as possible) DOM trees. I notice in your example, the head tag has a style tag with an invalid end tag, so I don't know how that'd work in all browsers under consideration.
最明智的方法可能就是用你的字符串创建一个文档(看看如何用JavaScript创建文档对象)，操作它(不管jQuery是否可以操作它，我不确定，但我认为是这样的)，然后从它获取任何你需要的内容。您必须假定html是正确的，或者至少将其解析为(尽可能相同的)DOM树。我注意到在您的示例中，head标签有一个带有无效结束标记的样式标记，因此我不知道在考虑的所有浏览器中该如何工作。
(Sorry, no working example yet. I'm kinda busy this morning, but I just wanted to put that thought out there).
(抱歉，没有工作示例。我今天早上有点忙，但我只是想把这个想法放在那里。