jquery - Javascript: replace() all but only outside html tags

Question

I have an autocomplete form and when showing the results matching the user's search string, I want to highlight the search string itself. I plan to do this by wrapping any occurrence of the search string within a tag such as , or a with a given class. Now, the problem is that when using regEx I have problems if the pattern occurs within a html tag. For instance

var searchPattern = 'pa';
var originalString = 'The pattern to <span class="something">be replaced is pa but only outside the html tag</span>';

var regEx = new RegExp(searchPattern, "gi")

var output = originalString.replace(regEx, "<strong>" + searchPattern + "</strong>");

alert(output);

(Demo: http://jsfiddle.net/cumufLm3/7/ )

This is going to replace also the occurrence of "pa" within the tag

 <span class="something">

breaking the code. I'm not sure how to deal with this. I've been checking various similar questions, and I've understood that in general I shouldn't use regular expressions to parse html. But I'm not sure if there is any quick way to parse smoothly the html string, alter the text of each node, and "rebuild" the string with the text altered?

Of course I suppose I could use $.parseHTML(), iterate over each node, and somehow rewrite the string, but this seems to me to be too complex and prone to errors. Is there a smart way to parse the html string somehow to tell "do this only outside of html tags"?

Please notice that the content of the tag itself must be handled. So, in my example above, the replace() should act also on the part "be replaced is pa but only outside the html tag".

Any idea of either a regular expression solid enough to deal with this, or (better, I suppose) to elegantly handle the text parts within the html string?

Answer 1

Your code should look like this:

var searchWord = 'pa';
var originalString = 'The pattern to <span class="something">be replaced is pa but only outside the html tag</span>';

var regEx = new RegExp("(" + searchWord + ")(?!([^<]+)?>)", "gi");

var output = originalString.replace(regEx, "<strong>$1</strong>");

alert(output);

Source: http://pureform.wordpress.com/2008/01/04/matching-a-word-characters-outside-of-html-tags/