在不加载/执行脚本/图像的情况下将 HTML 字符串转换为 HTML DOM？答案

【问题标题】：Convert HTML String to HTML DOM without scripts/images being loaded/executed?在不加载/执行脚本/图像的情况下将 HTML 字符串转换为 HTML DOM？
【发布时间】：2015-05-16 08:24:50
【问题描述】：

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

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

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

更改包括添加/编辑属性及其值（例如 style=""、src=""、href=""）以及更改一些 innerHTML 等。

有两种方法可以实现：

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

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

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

示例：

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

var $html = $(serverResponse);

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

然后通过执行以下操作来执行我的更改：

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

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

你有什么建议吗？

【问题讨论】：

AFAIK 我认为您无法阻止它，但也许可以运行一个将src= 更改为data-src= 的正则表达式。然后当你准备好加载它们时，进行倒置操作。
如果您指定更广泛的目标，可能会提供一种替代解决方案，该解决方案比尝试转义 html 字符串更容易。例如，您是否尝试模板化？网络爬虫？还有什么？
我不认为分离的 dom 节点中的脚本被执行，据我所知，标准指定 that they should be executed on insertion
你是对的，也许值得更清楚地说明我想要实现的目标。请参阅我更新的 OP。

标签： jquery html xml parsing dom

【解决方案1】：

默认情况下，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)');

【讨论】：

是不是意味着这样脚本不会被执行，文件也不会被加载？
浏览器不呈现文档对象，因此它会为其获取资源。浏览器不会渲染一个单独的 DOM Document 实例（它只是另一个变量）。
浏览器支持什么？恐怕我在网上找不到任何信息..

【解决方案2】：

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

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

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

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

【讨论】：

你是对的，也许值得更清楚地说明我想要实现的目标。请参阅我更新的 OP。

【解决方案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));

【讨论】：