NaveenMaverick
NaveenMaverick

Reputation: 21

How to search a particular text within an HTML Text and highlight the search string with a color

We have requirement to search through a HTML text and highlight the text with a particular color.

Ex: The html string is

<p class="Pa0" style="margin: 0in 0in 0pt;"><span class="A1"><span style="font-size: 10pt;">Giving this flyer to your class customers</span></span></p>

In the above text I am searching for the word "Class". It should highlight the text class within the text "Giving this flyer to your class customers" But whereas it is trying to highlight the css element "class" and as a result the original html text is corrupted and not displayed properly.

Can anyone help me in resolving this issue on how to search a content within an HTML text and highlight the search without changing the original HTML.

Upvotes: 1

Views: 1436

Answers (2)

nicael
nicael

Reputation: 19005

It is possible with javascript:

var str = document.getElementByClassName("Pa0")[0].children[0].children[0];
str.innerHTML = str.innerHTML.replace(' class ', ' <span style="color:red">class</span> ')

Upvotes: 1

vks
vks

Reputation: 67978

(class)(?=(?:[^><]*<[^<>]*>)*[^><]*$)

Try this.Replace by <span style='color: red;'>$1<span>.See demo.

http://regex101.com/r/bB8jY7/3

Upvotes: 1

Related Questions