在不加载/执行脚本/图像的情况下将 HTML 字符串转换为 HTML DOM？
Posted
技术标签:
【中文标题】在不加载/执行脚本/图像的情况下将 HTML 字符串转换为 HTML DOM？【英文标题】：Convert HTML String to HTML DOM without scripts/images being loaded/executed? 【发布时间】：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。
【参考方案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));【讨论】：
以上是关于在不加载/执行脚本/图像的情况下将 HTML 字符串转换为 HTML DOM？的主要内容，如果未能解决你的问题，请参考以下文章
Android：如何在不加载完整位图的情况下将流式图像即时渲染到 ImageView？
有没有办法在不将完整文件加载到内存的情况下将 tiff 图像转换为 Base64
在不安装 Ghostscript 的情况下将 PDF 文档转换为 PHP 中的预览图像