Найдите слово на веб-странице и добавьте к нему пробел

Question

Я пытался найти слово и добавить к нему промежуток, чтобы придать ему стиль и функциональность, и я нашел способ сделать это это, но это не очень эффективно.

У меня есть сценарий содержимого, который ищет слово searching, а затем я заменяю innerHTML дополнительным интервалом для ключевого слова.

Это мой JS файл:

function getText(){ 
return document.body.innerText 
} 
if(getText().indexOf("searching") > -1) { 
    document.body.innerHTML = document.body.innerHTML.replace(new RegExp("searching", "g"),"<span class='spanDetected' id='spanDetected'>"+ 
    'searching'+"</span>"); 
    console.log("true"); 
} 

И это то, что результат:

Так что, кажется, работает на каком-то уровне, но тогда возникает проблема, что он также изменяет URLS и текстовые ящики, например:

Что такое лучший способ стилизации и добавления функциональности к слову?

Answer 1

Использование регулярных выражений для синтаксического анализа [X] HTML - это terrible idea. Представьте себе следующий HTML:

<div id="searching">A searching inspection</div> 

Ваша программа заменит оба экземпляра фразы 'searching', которая не то, что вы хотите. Вам нужно проанализировать страницу и разумно заменить узлы. Возможно, игнорировать гиперссылки или использовать наложение DIV для гиперссылки узлов

У вас есть два варианта:

1. траверс через все узлы рекурсивно.

2. Используйте XPath, чтобы выбрать узлы, которые содержат определенный текст.

Нечто подобное может предоставить вам все узлы, содержащие фразу 'searching'.

//text()[contains(., 'searching')] 

Затем вы можете пройти через все узлы и заменить тот, который вы хотите. Поскольку вы разрабатываете расширение Chrome вы можете использовать $x, чтобы получить массив узлов, удовлетворяющих условиям XPath:

$x("//text()[contains(., 'searching')]") 

Читайте this answer, чтобы узнать, как вы можете цикл по элементам массива.