Применение 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 Docs. После этого вы можете проверить, является ли строка 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 потому что выполнение этого уничтожает элементы, а затем заменяет их вновь созданными элементами из строки, что приводит к потере даже обработчиков. Вместо этого вы должны рекурсивно перебирать дочерние и дочерние оды этого элемента, а для текстовых узлов искать текст в этом узле. Мой ответ здесь показывает, как это сделать.