Замена (replace) текста в определенном элементе?

Question

[Дмитрий Зорин]

Есть страница в на которую выводится куча таблиц с данными
Есть скрипт, который на странице с этими таблицами находит определенные слова, и заменяет (добавляет) им тэг div

<script type="text/javascript">
var htmlText = document.body.innerHTML;
var newHtmlText = htmlText.replace(/Барнаул/g, '<div class="user-yellow">Барнаул</div>').replace(/Уссурийск/g, '<div class="user-red">Уссурийск</div>');
document.body.innerHTML = newHtmlText;
</script>

Одна проблема, на данной странице есть поиск, и если в поиске написать "Барнаул", то в результате поиска всё съезжает (т.к. в поисковой строке идёт также замена на Барнаул)

Подскажите, как сделать чтобы этот скрипт менял значения только в самих таблица

Answer 1

[zkrvndm]

Вместо
document.body.innerHTML;
Укажите
document.querySelector('.class').innerHTML;
Где вместо class надо указать класс элемента внутри которого надо замену сделать.

Comments

[Дмитрий Зорин]

У самой ячейки в которой слово "Барнаул" нет класса
Есть только у table
Но если я вставляю

document.querySelector('.класс таблицы').innerHTML;

То всё съезжает а само слово не выделяется

[zkrvndm]

Дмитрий Зорин, если таблица на странице одна, то:
document.querySelector('table').innerHTML;

[Дмитрий Зорин]

Надим Закиров, нет, таблиц несколько
я попробовал

document.querySelector('table').innerHTML;

почти всё содержимое кроме таблицы пропадает, хотя для слова "барнаул" класс добавляется
Но собственно весь документ при этом исчезает

У моей таблицы есть уникальный ID, может к нему можно привязать?

[zkrvndm]

Дмитрий Зорин, конечно пропадает, ведь замену надо делать в 2-ух местах:

<script type="text/javascript">
var htmlText = document.querySelector('table#id').innerHTML;
var newHtmlText = htmlText.replace(/Барнаул/g, '<div class="user-yellow">Барнаул</div>').replace(/Уссурийск/g, '<div class="user-red">Уссурийск</div>');
document.querySelector('table#id').innerHTML = newHtmlText;
</script>

Где id нужно заменить на уникальный id вашей таблицы.

[Дмитрий Зорин]

Надим Закиров, большое спасибо!

Answer 2

[Павел]

Не body, a ваша таблица в эту строчку
var htmlText = document.body.innerHTML;
Ну, и соответственно тут тоже замена на таблицу, вместо body
document.body.innerHTML = newHtmlText;

Comments

[Дмитрий Зорин]

<script type="text/javascript">
var htmlText = document.table.innerHTML;
var newHtmlText = htmlText.replace(/Барнаул/g, '<div class="user-yellow">Барнаул</div>');
document.table.innerHTML = newHtmlText;
</script>

не работает, перестает подменять слова тэгами