Question

我目前正在尝试编写JavaScript Chrome扩展程序，以突出显示一些单词并将其定义添加到工具提示中。除了我要添加的某些定义还包含应该在原始页面上突出显示的单词以外，其他所有内容似乎都可以正常工作。结果是一种循环：突出显示工具提示中的某些单词，并在第一个工具提示之上创建一个新的工具提示，依此类推。

我试图弄清楚如何跳过带有“ tooltip”类名的节点，但是没有碰到任何可以正常工作的节点。这真令人沮丧。

我一直在寻找类似的问题，但找不到任何有用的东西。我确定我错过了一些非常简单的事情，但是我不知道是什么。

这是我的职能部门，负责更换所需的节点。谁能确定它为什么进入所描述的循环？

    function replaceNode(node){
  if(node.nodeName !== '#text' || node.parentNode.nodeName === 'SCRIPT' || node.parentNode.nodeName === 'STYLE' || node.parentNode.className == 'tooltip'
     || node.parentNode.className == 'tooltipcontent'){
    console.log('error node type');
    return;
  }

 let content = node.textContent;
 console.log('current content:'+content);

for(let [word, def] of glossary){
  let regex = rgx.get(word);
  content = content.replace(regex, def);
  }

if(content !== node.textContent){
  let newSpan = document.createElement('span');
  newSpan.innerHTML = content;
  node.parentNode.replaceChild(newSpan, node);
  console.log('node replaced');
  }
}

还有树行者：

function walkDoc(target){
      let treeWalker = document.createTreeWalker(target, NodeFilter.SHOW_TEXT, {acceptNode : function(node){
                          if(node.textContent.length === 0){
                            return NodeFilter.FILTER_SKIP;
                          }
                          return NodeFilter.FILTER_ACCEPT;
      }
    }, false);
    console.log('treewalker created');

    nodeList = [];
    console.log('nodelist created');

     while(treeWalker.nextNode()){
       nodeList.push(treeWalker.currentNode);
     }
     console.log(nodeList);
     i = 1;

     nodeList.forEach(function(n){
       console.log('node '+i);
       replaceNode(n);
       i++;
     });
    }

这是用来代替原始单词的单词格式：

<span class='tooltip'>the<span class='tooltipcontent'>This is a test to check if this extension works and shows this content as a tooltip.</span></span>

Javascript chrome扩展，用定义替换单词会导致无限循环

0 个答案: