shadesco shadesco - 4 months ago 25
Javascript Question

Android webview: highlight a specific word in a page using javascript?

i am using a webview inside my android application. I would like to know if it is possible to highlight or underline a specific word/sentence/paragraph in a loaded page using code done in javascript?

thanks

Answer

You should look at this page. Do a view source.

They use pure Javascript--not even jQuery--to highlight particular words on the webpage.

Basically they load all of the text they want to search through into a variable and continuously find the indexOf the search term they want to highlight. When they find the index of the term, they build a new string with everything before that index + a <span class="highlighted"> + the search term + </span>. Then they continue searching. Once they've searched and rebuilt all the text they replace the old text in the DOM with the new text.

They also have some CSS along the lines of .highlighted { background-color: yellow; }