Reputation: 21
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
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
Reputation: 67978
(class)(?=(?:[^><]*<[^<>]*>)*[^><]*$)
Try this.Replace by <span style='color: red;'>$1<span>
.See demo.
http://regex101.com/r/bB8jY7/3
Upvotes: 1