4

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

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？

4

4 回答 4

3

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

您可以研究使用DOMParser

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

MDN 文档页面上有代码来支持不支持它的浏览器。

于 2012-10-05T13:52:30.147 回答
1

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

于 2012-10-05T14:48:29.007 回答
0

我对已接受答案的链接答案采取了一种修改方法，因为我不喜欢创建 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 添加元素以便能够以编程方式访问元素。

于 2013-05-31T18:06:58.717 回答
0

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

var htmlString = "...";
var newDoc = document.implementation.createHTMLDocument('newDoc');      
newDoc.documentElement.innerHTML = htmlString;
于 2017-04-14T18:52:11.793 回答