How to replace a string if not part of a tag?

Question

After someone searches for something on my site, i highlight the searched term in the list of results.

For example, if you search for "Lorem", you'll get an article with the title "Lorem ipsum dolor sit amet" as one of the results, where "Lorem" will be highlighted because that's your searched words and the other words will be in normal font.

My function is currently this:

function highlightSearchedTerm(term) {
      var regex = new RegExp('('+term+')', 'gi');
      $('.markable').each(function(){
         var content = $(this).html();
         var replaced = content.replace(regex, "<span class=\"highlight\">$1</span>");
         $(this).html(replaced);
      });
   }

Problem is in the text of the article there can be some HTML code, like links, images etc, so if someone searches for "click", then an onclick attribute of a link will be replaced and i get a span inside the link.

Like

<a href="http://www.example.com" onclick="window.open(this.href);return false;">link</a>

will get replaced and i'll get

<a href="http://www.example.com" on<span class="highlight">click</span>="window.open(this.href);return false;">link</a>

which is bad.

How do i avoid that?

@Bergi regex is fine here since the OP really doesn't want to touch the markup-y bits at all. 3Nex: because of this question: http://stackoverflow.com/q/1732348/139010 — Matt Ball, Mar 25 '13 at 20:10
@MattBall: But there's no good regex to avoid touching it… — Bergi, Mar 25 '13 at 20:11

score 4 · Answer 1 · edited May 23 '17 at 12:11

4

Instead of using .html(), iterate (and replace text in) text nodes.

edited May 23 '17 at 12:11

Community

1
1

answered Mar 25 '13 at 20:08

Matt Ball

354,903
100
647
710

Oh good point, thank you – 3Nex Mar 25 '13 at 20:10

How to replace a string if not part of a tag?

1 Answers1