Search code examples
htmlangularinnerhtmlhighlightinnertext

search the text and replace the text in the html to highlight the searched word in angular

When I try to search for a text and update the text I am facing an issue.

<span class="container">this is a container</span>

i used document.getElementByClassname to get the element and when i replace the container with <mark>container</mark>

<span class="<mark>container</mark>">this is a <mark>container</mark></span>

replacement happens even inside the element class name but I need this only to happen at

<span class="container">this is a <mark>container</mark></span>

I used regex to find the searched values but it also found inside the tag element

I tried updating the innerText but that corrupts the HTML document

Does anyone know how this can be achieved?

Solution

  • After a long search and understanding the regex I found out the solution via regex

    (?<!<[^>])container(?<![^>]<)

    this is a container

    the above regex matches only the container outside the HTML tags can be testes using the regex tester online http://regexstorm.net/