Find DOM element containing string matching regular expression [closed]

Question

I need to find on HTML page all text fragments matching specific regular expression (that is, I need to ignore tags so that '< span>First name: < /span>< br/>< b>John< /b>' will match 'First name: John'), and than highlight these found fragments (by decorating with new elements and applying custom css styles) and be able to locate these fragments, e.g. be able to scroll these into view. Functionality is similar to what Skype browser plugin is doing with phone numbers found on page.

Answer 1

You can either recursively walk down the DOM looking at the textContent or innerText property (as appropriate) of elements, or you can use loop over the collection returned by getElementsByTagName. Either way, once you have identified the text and the parent element, you need to work out how to replace it.

What are your requirements for document structure in the replacement if the string is split over one or more othere elements?

Answer 2

You could use jQuery selectors to get the <b> tags containing John that come after a <span> tag that contains First name:, and then for instance apply a style:

$("span:contains('First name:') ~ b:contains('John')").css('color','red');

Here is a running example: http://jsfiddle.net/XzwNj/