javascript - 在不发送 HTTP 请求的情况下使用 documentFragment 解析 HTML

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 字符串的想法？

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 上有代码以支持 native 不支持它的浏览器。