Применение str.search к содержимому document.getElementById

Question

Я только начинаю изучать Javascript, поэтому моя терминология может быть отключена, извинения.

Я пишу скрипт Tampermonkey. Это должно выполнить поиск на странице по ключевому слову («пиво») и, если оно найдено, ключевое слово будет выделено красным цветом. В настоящее время меня беспокоит только КАК искать соответствующую часть файла HTML и запускать действие выделения:

1) Могу ли я найти строку ниже

<div id="appLongDescription"
style="white-space: normal; word-wrap: break-word;">
This sentence contains beer.
</div>

этим занимаешься?

var name = document.getElementById("appLongDescription").str.search("bier");

2), а затем создайте условие для маркера на основе того, является ли

name != -1 

Спасибо!

Answer 1

Если я правильно понимаю, вы хотите получить доступ к строке внутри div appLongDescription. Сначала вам нужно получить доступ к элементу appLongDescription. Вы можете сделать это с помощью следующего кода: document.getElementById("appLongDescription"); После этого вам нужно позвонить innerHTML следующим образом: document.getElementById("appLongDescription").innerHTML Пожалуйста, посмотрите innerHTML документы. После этого вы можете проверить, содержит ли строка appLongDescription div некоторую подстроку, вызвав функцию indexOf . Пожалуйста, смотрите документы. полный код JavaScript будет выглядеть следующим образом:

var appLongDescriptionStr = document.getElementById("appLongDescription").innerHTML; 
var beerIndex = appLongDescriptionStr.indexOf("beer");

beerIndex будет содержать индекс строки beer внутри appLongDescription внутренней строки. если beerIndex равно -1, это означает, что строка beer не была найдена.

Answer 2

Экземпляры HTML-элемента не имеют свойства str. У них есть innerHTML и textContent (и innerText), которые они наследуют от Node. Все они возвращают строки, содержащие содержимое элемента HTML (в виде разметки или текста), поэтому вы можете вызвать search для них, да.

Однако , если вы хотите выделить текст, вам нужно знать его положение в текстовом узле , в котором он находится, так что вы можете разбить узел там и обернуть текст в span или аналогичный. Вы не хотите просто присвоить обратно innerHTML, потому что это уничтожает элементы, а затем заменяет их вновь созданными элементами из строки, что приводит к потере даже обработчиков. Вместо этого вы должны рекурсивно перебирать дочерние и дочерние оды этого элемента, а для текстовых узлов искать текст в этом узле. Мой ответ здесь показывает, как это сделать.