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

Question

我想解析一个字符串并从中创建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的想法？

Answer 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上有代码支持那些本机不支持的浏览器。

Answer 2

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

Answer 3

我对已接受答案的链接答案采取了修改后的方法，因为我不喜欢创建iframe的想法，通过正则表达式的BUNCH处理字符串，然后将其放入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添加元素以便能够以编程方式访问元素。

Answer 4

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

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