将 HTML 字符串转换为 HTML DOM 而 scripts/images 不是 loaded/executed？

Question

我有一个 HTML 文档，我通过 Ajax 调用从服务器接收到该文档，显然我收到了该 HTML 字符串形式的文档：

var serverResponse = "<html><head>.......";

我现在想更改此 HTML 文档的部分内容，然后将其作为 HTML 字符串发送回服务器。

更改包括 adding/editing 属性及其值（例如 style="", src="", href="") 以及更改一些内部 HTML 等。

有两种方法可以实现：

第一：我可以遍历整个字符串并每次都应用一些精心设计的正则表达式，以便找到我想要的值并更改它或添加新值等。

No.2：我可以寻求最简单的解决方案，即将该字符串转换为 jQuery 对象，然后轻松遍历并更改它。

我相信第二个选项在实际加载文件（如图像或 evens 脚本）方面具有不良副作用，至少在某些浏览器（如 IE？）上是这样。如果我错了，请纠正我，如果没有什么可担心的，那么我会选择第二个选项。

示例：

我知道我可以做到以下几点：

var $html = $(serverResponse);

（我知道 jQuery.parseHTML() 和上面的一样..）

然后通过以下方式执行我的更改：

$html.find('.some-div').eq(2).css('background', 'url(http://some-new/img.jpg)');

完成更改后，我需要将更新的 HTML 转换回字符串，然后 post 将其返回服务器。

你有什么建议吗？

Answer 1

正如 Dan Field 所说，最好说出你的最终目标。可能有人知道更好的解决方案来实现您的目标。但是，我认为您想在创建 DOM 对象后删除图像 。为此，您可以这样做：

var $html = $(htmlAsString); $html.find("img").removeAttr("src");

或者，如果你不想丢失图片源，你可以这样做：

$html.find("img").each(function(){ var src = $(this).attr("src"); $(this).removeAttr("src"); $(this).attr("data-src", src); });

Answer 2

默认情况下 jQuery 将处理文档对象，它将解析 HTML 并将节点附加到文档。为您的 HTML.

创建单独的 DOM 文档

var context = (new DOMParser()).parseFromString(serverResponse , 'text/html');
jQuery('.some-div', context)
  .eq(2)
  .css('background', 'url(http://some-new/img.jpg)');

Answer 3

对于支持 <template> 的浏览器，您可以使用它轻松存档：

var template = document.createElement('template');
template.innerHTML = '<img src="1.jpg" /><script>alert(42)<\/script>';
console.log([...template.content.children].map(i => i.outerHTML));

将 HTML 字符串转换为 HTML DOM 而 scripts/images 不是 loaded/executed？

Convert HTML String to HTML DOM without scripts/images being loaded/executed?

jquery

html

xml

parsing

dom