javascript - 如何访问 innerHTML 但忽略 <script> 标签

Question

我有一个插件可以查看 HTML 并替换文本。但是，在我当前的实现中，脚本标签中的文本也会被搜索到。这会导致受影响页面上的脚本损坏。

var pageText = document.body.innerHTML;
document.body.innerHTML = pageText.replace(regextgoeshere);

我尽力通过我的正则表达式模式将其过滤掉，但我需要弄清楚如何跳过所有标签。

有没有办法在获取innerHTML时跳过所有标签？

Answer 1

也许您最好的选择是使用 querySelectorAll并否定不需要的元素。然后替换 textContent 而不是 innerHTML。通过使用 innerHTML，您可能会破坏文档标签。

这是一个跨浏览器的解决方案。

var matches = document.querySelectorAll("*:not(html):not(head):not(script):not(meta):not(link)");
console.log(matches);
[].forEach.call(matches, function(elem) {
  var text = ('innerText' in elem) ? 'innerText' : 'textContent';
  elem[text] = elem[text].replace("this", "works");
});

http://jsfiddle.net/m6qhuesv/

注意 1:HTML、HEAD、META 和 LINK 标签不允许修改 textContext。

注意 2:innerText 是 IE 专有的东西(也适用于 chrome)。 W3C 定义 textContent作为官方属性(property)。