Блог

Редактировать: Изменен querySelectorAll на getElementsByTagName по предложению Робга.

Вы можете использовать функцию getElementsByTagName, чтобы захватить все теги на странице. Оттуда вы можете проверить их дочерние элементы и посмотреть, есть ли у них какие-либо текстовые узлы в качестве дочерних. Если они это сделают, вы бы посмотрели на их текст и посмотрели, соответствует ли он тому, что вам нужно. Вот пример, который распечатает текст каждого текстового узла в вашем документе с помощью объекта console:

 var elms = document.getElementsByTagName("*"),
    len = elms.length;
for(var ii = 0; ii < len; ii  ) {
    var myChildred = elms[ii].childNodes;
    len2 = myChildred.length;
    for (var jj = 0; jj < len2; jj  ) {
        if(myChildred[jj].nodeType === 3) {
            console.log(myChildred[jj].nodeValue);

            // example on update a text node's value
            myChildred[jj].nodeValue = myChildred[jj].nodeValue.replace(/test/,"123");
        }
    }
}
  

Чтобы обновить текст элемента DOM, просто обновите свойство nodeValue текстового узла.

Не используйте innerHTML с регулярным выражением, это почти наверняка приведет к сбою для нетривиального содержимого. Кроме того, все еще существуют различия в том, как браузеры генерируют его из live DOM. Замена innerHTML также приведет к удалению любых прослушивателей событий, добавленных в качестве свойств элемента (т. Е. подобных element.onclick = fn ).

Лучше всего, если вы можете поместить строку, заключенную в элемент с атрибутом или свойством, по которому вы можете выполнять поиск (id, class и т.д.), Но в противном случае поиск по текстовым узлам является наилучшим подходом.

Редактировать

Попытка использовать функцию выбора текста общего назначения для HTML-документа может привести к очень сложному алгоритму, поскольку строка может быть частью сложной структуры, например:

 <h1>Some <span class="foo"><em>s</em>pecial</span> heading</h1>
  

Поиск строки «специальный заголовок» является сложной задачей, поскольку она разделена на 2 элемента. Обернуть его другим элементом (скажем, для выделения) также нетривиально, поскольку результирующая структура DOM должна быть допустимой. Например, текст, соответствующий «some special» в приведенном выше примере, может быть заключен в span, но не в div.

Любая такая функция должна сопровождаться документацией с указанием ее ограничений и наиболее подходящего использования.

Забудьте о регулярных выражениях.

Выполните итерацию по каждому текстовому узлу (и выполнение этого рекурсивно будет наиболее элегантным) и измените текстовые узлы, если текст найден. Если вы просто ищете строку, вы можете использовать indexOf() .

 x.replace(/regular-expression/,"text");
  

вернет значение, поэтому

 var y = x.replace(/regular-expression/,"text");
  

теперь вы можете присвоить новое значение.

 document.body.innerHTML = y;
  

Но вы хотите подумать об этом, вы же не хотите получать все тело только для изменения одного небольшого фрагмента кода, почему бы не получить содержимое div или любого элемента и так далее

пример:

 <p id='paragraph'>
    ... some text here ...
</p>
  

теперь вы можете использовать javascript

 var para = document.getElementById('paragraph').innerHTML;
var newPara = para.replace(/regex/,'new content');

para.innerHTML = newPara;
  

Это должен быть самый простой способ.