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.

ie 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>

Answer 3

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