如何让TreeWalker跳过Lexical文本编辑器内的用户输入元素？

Lexical是一款不使用标准输入标签的JavaScript文本编辑器。我开发了一款Chrome扩展，通过node.textContent实现文字查找替换功能，但希望忽略Lexical编辑器内用户输入的文本。当前使用的代码如下：

function replaceBadWords(node, searchedWord, replacement) {
  const treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
  while (treeWalker.nextNode()) {
    const node = treeWalker.currentNode;
    node.textContent = node.textContent.replace(searchedWord, replacement);
  }
}
replaceBaddWords(document.body,`badWord`, `goodWord`);

解决方案 #

Lexical编辑器的DOM容器通常带有特定类标识（比如lexical-editor），我们可以通过TreeWalker的过滤规则，跳过属于Lexical编辑器的文本节点：

function replaceBadWords(node, searchedWord, replacement) {
  const treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, {
    acceptNode: (textNode) => {
      // 向上遍历父节点，判断是否属于Lexical编辑器
      let parent = textNode.parentNode;
      while (parent) {
        if (parent.classList?.contains('lexical-editor')) {
          return NodeFilter.FILTER_REJECT;
        }
        parent = parent.parentNode;
      }
      return NodeFilter.FILTER_ACCEPT;
    }
  });

  while (treeWalker.nextNode()) {
    const currentNode = treeWalker.currentNode;
    currentNode.textContent = currentNode.textContent.replace(searchedWord, replacement);
  }
}
// 修正原代码的函数名拼写错误
replaceBadWords(document.body, `badWord`, `goodWord`);

说明 #

1. 通过acceptNode回调函数，检查每个文本节点的所有父元素，若父元素包含Lexical编辑器的标志性类名（可根据实际项目调整类名），则拒绝处理该文本节点。
2. 修正了原代码中函数名的拼写错误：replaceBaddWords改为replaceBadWords。

内容的提问来源于stack exchange，提问作者Grasper