JavaScript : Find (and Replace) text that is NOT in a specific HTML element?

TL;DR; Summary

How do I inject a <span> around a specific word or phrase found in the HTML of the current page BUT ignore any text which is ALREADY contained within the same span I am trying to inject.

Due to the large number of values being processed, this must be high performance!


Searching for “foo”

Should find a match:

<p>This sentence contains a foo bar value</p>

Should NOT find a match:

<p>This sentence contains a <span class=’widget’>foo bar</span> value</p>

Background – i.e. Why?

I am looking into a specific problem of having to inject a <span class=’widget’> element around specific text found on a page dynamically. The text I am looking for is in a large array.

  • Array of text strings to look for is in the thousands
  • Text values can contain phrases or words
  • phrases must take precedence over words

This last one is a killer.
For example:

  • I have two values “foo bar” and “foo”
  • I want to process the sentence: “This is a foo bar sentence”

After I have finished processing then ..

Desired Output

“This is a <span class=’widget’>foo bar</span> sentence”

NOT Desired

“This is a <span class=’widget’>foo <span class=’widget’>bar</span></span> sentence”

Now .. the first step in achieving this is to sort my array by length (process the longest ones first). But the problem is that after processing my find-replace logic is still finding the smaller “word” inside the (already processed) phrase.

Source: regex

Leave a Reply