В настоящее время я пытаюсь кодировать расширение Javascript Chrome, чтобы выделить некоторые слова и добавить их определения во всплывающую подсказку.Кажется, все работает, за исключением того, что некоторые определения, которые я хочу добавить, также содержат слова, которые должны быть выделены на исходной странице.В результате получается некий цикл: некоторые слова внутри всплывающей подсказки подсвечиваются, и поверх первой создается новая всплывающая подсказка и т. Д.
Я попытался выяснить, как пропустить узлы с помощью подсказки ''имя класса, но не попало ни на что, что работает правильноЭто действительно расстраивает.
Я искал подобные проблемы, но не мог найти ничего полезного.Я уверен, что упустил что-то действительно простое, но я не могу понять, что.
Вот моя функция, отвечающая за замену нужных узлов.Кто-нибудь может определить, почему он входит в описанный цикл?
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>