javascript - REPLACE命令如何阻止所有其他js库？

Question

这是我使用的代码:

 document.addEventListener
(
'DOMContentLoaded', function () 
  {
document.body.innerHTML = document.body.innerHTML.replace(/verbe/i, 'VERB');
return;
  }
);

它工作正常(字符串被替换)，但所有 javascript 库(当这些行未运行时工作)不再运行。控制台上没有错误，浏览器只是忽略它们。

感谢您的帮助:-)

Answer 1

如果您绝对必须浏览文档中的每个文本节点，您可以创建 NodeIterator它有一个函数可以让你循环遍历正文的每个文本节点:

const patternToReplace = /foo/ig;
const replacement = 'FOO';

const iterator = document.createNodeIterator(
  document.body,
  NodeFilter.SHOW_TEXT,
  (node) => {
    if (patternToReplace.test(node.nodeValue)) {
      return NodeFilter.FILTER_ACCEPT;
    }

    return NodeFilter.FILTER_REJECT;
  });

let node;

while ((node = iterator.nextNode()) != null) {
  node.nodeValue = node.nodeValue.replace(patternToReplace, replacement);
}

document.createNodeIterator 将要迭代其后代的元素作为第一个参数，然后将节点类型作为第二个参数(我们只对文本节点感兴趣)，最后是一个可选的“过滤器”，您可以使用它来跳过与模式不匹配的所有文本节点。

然后在返回的迭代器对象上调用 nextNode() 可以让您遍历所有匹配的文本节点并替换出现的模式(注意我使用的是 g 标志正则表达式以确保匹配同一文本节点中多次出现的模式)。

更新:

我有点偏离主题，关于为什么你的库停止工作我不完全确定。我很少使用 innerHTML，但我最好的猜测是，更改正文的整个 innerHTML 会取消注册库之前设置的所有事件。但使用 NodeIterator 就不会出现这种情况。