Using Javascript, I'm trying to wrap span tags around certain text on the page, but I don't want to wrap tags around text already inside a set of span tags.

Currently I'm using:

html = $('#container').html();
var regex = /([\s| ]*)(apple)([\s| ]*)/g;
html = html.replace(regex, '$1<span class="highlight">$2</span>$3');

It works but if it's used on the same string twice or if the string appears in another string later, for example 'a bunch of apples' then later 'apples', I end up with this:

<span class="highlight">a bunch of <span class="highlight">apples</span></span>

I don't want it to replace 'apples' the second time because it's already inside span tags.

It should match 'apples' here:

Red apples are my <span class="highlight">favourite fruit.</span>

But not here:

<span class="highlight">Red apples are my favourite fruit.</span>

I've tried using this but it doesn't work:

([\s|&nbsp;]*)(apples).*(?!</span)

Any help would be appreciated. Thank you.

Using Javascript, I'm trying to wrap span tags around certain text on the page, but I don't want to wrap tags around text already inside a set of span tags.

Currently I'm using:

html = $('#container').html();
var regex = /([\s| ]*)(apple)([\s| ]*)/g;
html = html.replace(regex, '$1<span class="highlight">$2</span>$3');

It works but if it's used on the same string twice or if the string appears in another string later, for example 'a bunch of apples' then later 'apples', I end up with this:

<span class="highlight">a bunch of <span class="highlight">apples</span></span>

I don't want it to replace 'apples' the second time because it's already inside span tags.

It should match 'apples' here:

Red apples are my <span class="highlight">favourite fruit.</span>

But not here:

<span class="highlight">Red apples are my favourite fruit.</span>

I've tried using this but it doesn't work:

([\s|&nbsp;]*)(apples).*(?!</span)

Any help would be appreciated. Thank you.

• javascript
• html
• regex

Share Improve this question Follow asked Jun 22, 2014 at 22:02 amba88amba88 78933 gold badges1111 silver badges2828 bronze badges 1

• blog.codinghorror./parsing-html-the-cthulhu-way – Bill Commented Jun 22, 2014 at 22:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

First off, you should know that parsing html with regex is generally considered to be a bad idea—a Dom parser is usually remended. With this disclaimer, I will show you a simple regex solution.

This problem is a classic case of the technique explained in this question to "regex-match a pattern, excluding..."

We can solve it with a beautifully-simple regex:

<span.*?<\/span>|(\bapples\b)

The left side of the alternation | matches plete <span... /span> tags. We will ignore these matches. The right side matches and captures apples to Group 1, and we know they are the right ones because they were not matched by the expression on the left.

This program shows how to use the regex (see the results in the right pane of the online demo). Please note that in the demo I replaced with [span] instead of <span> so that the result would show in the browser (which interprets the html):

var subject = 'Red apples are my <span class="highlight">favourite apples.</span>';
var regex = /<span.*?<\/span>|(\bapples\b)/g;
replaced = subject.replace(regex, function(m, group1) {
    if (group1 == "" ) return m;
    else return "<span class=\"highlight\">" + group1 + "</span>";
});
document.write("<br>*** Replacements ***<br>");
document.write(replaced);

Reference

• How to match (or replace) a pattern except in situations s1, s2, s3...
• Article about matching a pattern unless...