Applying str.search on content of document.getElementById

Question

I am just beginning to learn Javascript, so my terminology might be off, apologies.

I am writing a Tampermonkey script. This should search a page for a keyword ("beer") and, when found, have the keyword highlighted in red. Right now, I am only concerned about HOW to search the applicable part of the HTML file and trigger the highlighting action:

1) Can I search the string in the below

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

by doing this?

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

2) and then build a condition for the highlighter based on whether

name != -1

?

Thanks!

Possible duplicate of [How can get the text of a div tag using only javascript (no jQuery)](https://stackoverflow.com/questions/10370204/how-can-get-the-text-of-a-div-tag-using-only-javascript-no-jquery) — Heretic Monkey, Nov 09 '18 at 17:06

score 1 · Answer 1 · answered Nov 09 '18 at 17:33

If I am understanding correctly, you want to access string inside div appLongDescription. First you need to access element appLongDescription. You can do this via following code: document.getElementById("appLongDescription"); After this you need to call innerHTML like this: document.getElementById("appLongDescription").innerHTML Please see innerHTML docs. After this you could check whether string ofappLongDescription div contains some substring via calling indexOf function. Please see docs. full javascript code would look like this:

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

beerIndex will contain the index of string beer inside appLongDescription inner string. if beerIndex is -1, this mins means that string beer was not found.

And @MKKirk , if this answer also works better for you, please [mark it so](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work/5235#5235). — Brock Adams, Jun 22 '19 at 16:33

T.J. Crowder · Answer 2 · 2018-11-09T17:39:56.920

HTML element instances have no str property. They have innerHTML, and textContent (and innerText) which they inherit from Node. Those all return strings containing the contents of the HTML element (as markup, or as text), so you could call search on them, yes.

However, if you want to highlight the text, you'll need to know its position within the text node that it's in, so you can split the node there and wrap the text in a span or similar. You don't want to just assign back to innerHTML, because doing that destroys the elements and then replaces them with newly-created elements from the string, which loses even handlers. Instead, you have to recursively loop through the child and descendant odes of that element, and for the text nodes, look for the text within that node. My answer here shows how to do that.

@MKKirk - I've added a second paragraph aboev with more information on how to do this. — T.J. Crowder, Nov 09 '18 at 17:40

Applying str.search on content of document.getElementById

2 Answers2