使用 documentFragment 解析 HTML 而不发送 HTTP 请求答案

【问题标题】：Using documentFragment to parse HTML without sending HTTP requests使用 documentFragment 解析 HTML 而不发送 HTTP 请求
【发布时间】：2012-09-26 16:11:33
【问题描述】：

我想解析一个字符串并从中生成 DOM 树。我决定使用documentFragment API，到目前为止我这样做了：

var htmlString ="Some really really complicated html string that only can be parsed by a real browser!";
var fragment = document.createDocumentFragment('div');
var tempDiv = document.createElement('div');
fragment.appendChild(tempDiv);
tempDiv.innerHTML = htmlString;
console.log(tempDiv);

但问题是这个脚本会导致我的浏览器（特别是 Chrome）发送实际的 HTTP 请求！我是什么意思？以此为例：

var htmlString ='<img src="somewhere/odd/on/the/internet" alt="alt?" />';
var fragment = document.createDocumentFragment('div');
var tempDiv = document.createElement('div');
fragment.appendChild(tempDiv);
tempDiv.innerHTML = htmlString;
console.log(tempDiv);

这会导致：

是否有任何解决方法？或任何其他更好的方法来解析 HTML-String？

【问题讨论】：

标签： javascript html dom html-parsing

【解决方案1】：

好吧，您将元素附加到页面，当然浏览器会获取内容。

您可以查看使用DOMParser

var htmlString ='<img src="somewhere/odd/on/the/internet" alt="alt?" />';
var parser = new DOMParser();
var doc = parser.parseFromString(htmlString , "text/html");

MDN Doc page 上有代码支持不原生支持它的浏览器。

【讨论】：

感谢您的回答。我不使用DOMParser 的原因是，它无法解析复杂的 HTML 字符串，如 Google 的主页源。不要相信我的话，自己尝试一下，看看它是如何解析失败的！

【解决方案2】：

我在 stackoverflow this answer 上找到了我的问题的答案。答案由一段代码组成，该代码使用本机浏览器功能解析 HTML，但在不发送 HTTP 请求的半沙盒环境中。希望对其他人也有帮助。

【讨论】：

只是一点警告。不要依赖该代码在所有情况下都有效。例如，如果 html 输入为<svg><image xlink:href='http://www.example.com/x.jpg' /></svg>，则将提取x.jpg 文件。

【解决方案3】：

我对已接受答案的链接答案采用了修改方法，因为我不喜欢创建 iframe、通过一组正则表达式处理字符串，然后将其放入 DOM 的想法。

我需要预处理一些来自 ajax 请求的 HTML（这个特定的 HTML 具有具有相对路径的图像，并且发出 ajax 请求的页面与 HTML 不在同一目录中）并使资源路径成为绝对路径路径。

我的代码如下所示：

var dataSrcStr = data.replace(/src=/g,'data-src=');
var myContainer = document.getElementById('mycontainer');
myContainer.innerHTML = dataSrcStr;
var imgs = myContainer.querySelectorAll('img');
for(i=0,ii=imgs.length;i<ii;i++){
  imgs[i].src = 'prepended/path/to/img/'+imgs[i].data-src;
  delete imgs[i]['data-src'];
}

显然，如果其中有一些带有 src= 的明文，您将替换它，但我的内容不会是这种情况，因为我也控制它。

这为我提供了比链接答案或使用 DOMParser 更快的解决方案，同时仍向 DOM 添加元素以便能够以编程方式访问元素。

【讨论】：

【解决方案4】：

试试这个。也适用于复杂的 html。您的浏览器可以显示的任何内容都可以解析。

var htmlString = "...";
var newDoc = document.implementation.createHTMLDocument('newDoc');      
newDoc.documentElement.innerHTML = htmlString;

【讨论】：