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.
- 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 ..
“This is a <span class=’widget’>foo bar</span> sentence”
“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.