How to wrap a group of words with tags, JavaScript Replace Regular Expressions

Question

I am trying to wrap some words with HTML tags, for that I am using regular expressions. I am almost there:

This is my regexp

/((apple|banana|cherry|orange)\b\s?)+/gi

and this is my replacement:

<em>$&</em>

which works perfectly for my example text:

Apple Banana apple cherry, Cherry orange and Oranges Apple, Banana

the result being:

<em>Apple Banana apple cherry</em>, <em>Cherry orange </em>and Oranges <em>Apple</em>, <em>Banana</em>

I could be pragmatic and live with this but I would reaaaaaally like to have it perfect and not include the space after the final match.

i.e. my perfect result would be (see the tag shifted left after "Cherry orange"):

<em>Apple Banana apple cherry</em>, <em>Cherry orange</em> and Oranges <em>Apple</em>, <em>Banana</em>

@BipedalShark: that's correct, I only want full and specific words. @nalply: my bad, of course , I just corrected it — ploink
– ploink, Commented Nov 29, 2009 at 13:49

Kobi · Accepted Answer · 2009-11-29 07:59:04Z

4

JavaScript doesn't support lookbehind. This is a shame, as we could have done:

// doesn't work in JavaScript:
/((apple|banana|cherry|orange)\b\s?)+(?<!\s)/gi

What we can do, however, is to move the white-space to the beginning, and add a negative lookahead (so the catch must not start with a white-space):

/(?!\s)(\s?\b(apple|banana|cherry|orange)\b)+/gi

A slight difference from your code is that I also added \b to the beginning of the pattern, so it wouldn't catch apple from Snapple.

edited Nov 29, 2009 at 7:59

answered Nov 29, 2009 at 7:39

Kobi

139k41 gold badges259 silver badges302 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bart Kiers Over a year ago

JavaScript does not have issues with lookbehind, it doesn't support it. Perhaps this is what you meant, but "has issues" suggests (to me) that it does support it, but the implementation contains bugs.

Kobi Over a year ago

I know, that is what I meant. That's a big issue. I agree, Bart, I'll change it to avoid confusion.

ploink Over a year ago

the \b didn't seem to be necessary in my original example. Awesome thanks!! This was my first question on StackOverflow. I am absolutely amazed I got a perfect answer this quick!

Kobi Over a year ago

No problem, Thanks! Welcome to StackOverflow. BTW, it's a very good question, and well formatted. Probably the reason it was up voted that much.

YOU · Accepted Answer · 2009-11-29 04:28:20Z

2

You could put function in the replace parameter as

function(x){return ""+x.replace(/\s+$/,"")+"";} instead of $&

and you could put striping space inside that function.

"Apple Banana apple cherry, Cherry orange and Oranges Apple, Banana".replace(
/((?:apple|banana|cherry|orange)\b\s?)+/gi,
function(x){
   return "<em>"+x.replace(/\s+$/,"")+"<em>";
})

<em>Apple Banana apple cherry<em>, <em>Cherry orange<em>and Oranges <em>Apple<em>, <em>Banana<em>

answered Nov 29, 2009 at 4:28

YOU

124k34 gold badges192 silver badges222 bronze badges

2 Comments

LiraNuna Over a year ago

Could you please elaborate how come the second argument for replace is a function? I can't find any documentation about this behavior.

nalply Over a year ago

developer.mozilla.org/en/Core_JavaScript_1.5_Reference/… - but attention, it is not supported by all browsers (IE5, for example)

FireFly · Accepted Answer · 2012-06-13 13:28:05Z

0

You could also solve this with a lookahead at the end of the pattern to make sure that any match is followed by space, a comma or end-of-string (this naturally means a match won't match if the result is followed by a letter, which would be the case in the problematic example).

Altered matching pattern:

/((apple|banana|cherry|orange)\b\s?)+(?=\s|,|$)/gi

answered Jun 13, 2012 at 13:28

FireFly

3944 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to wrap a group of words with tags, JavaScript Replace Regular Expressions

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related