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

我想解析一个字符串并用它生成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);

var htmlString=''；
var fragment=document.createDocumentFragment（'div'）；
var tempDiv=document.createElement（'div'）；
片段.appendChild（tempDiv）；
tempDiv.innerHTML=htmlString；
console.log（tempDiv）；

这导致：

---

有什么解决办法吗？或者其他更好的解析HTML字符串的方法？

如果您将元素附加到页面，当然浏览器将获取内容

你可以考虑使用

var htmlString=''；
var parser=新的DOMParser（）；
var doc=parser.parseFromString（htmlString，“text/html”）；

---

上有一些代码支持本机不支持的浏览器。

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

我对已接受答案的链接答案采取了一种改进的方法，因为我不喜欢创建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'];
}

var-dataSrcStr=data.replace（/src=/g，'data-src='）；
var myContainer=document.getElementById（'myContainer'）；
myContainer.innerHTML=dataSrcStr；
var imgs=myContainer.querySelectorAll（'img'）；
对于（i=0，ii=imgs.length；i试试这个。它也适用于复杂的html。浏览器可以显示的任何内容都可以解析

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

谢谢你的回答。我没有使用
DOMParser
的原因是，它无法解析复杂的HTML字符串，比如Google的主页源代码。不要相信我的话，自己试试看，看看它是如何解析失败的！只是一个小小的警告。不要在所有情况下都依赖该代码。例如，如果HTML输入是
，将获取
x.jpg
文件。
var htmlString = "...";
var newDoc = document.implementation.createHTMLDocument('newDoc');      
newDoc.documentElement.innerHTML = htmlString;