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>

Answer 1

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.

Answer 2

You could put function in the replace parameter as

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

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>