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>
replace in JavaScript. To use RegEx, the first argument of replace will be replaced with regex syntax, for example /regex/ . This syntax serves as a pattern where any parts of the string that match it will be replaced with the new substring. The string 3foobar4 matches the regex /\d.
Regular expressions are used with the RegExp methods test() and exec() and with the String methods match() , replace() , search() , and split() . Executes a search for a match in a string. It returns an array of information or null on a mismatch.
JavaScript's regular expression flavor is part of the ECMA-262 standard for the language. This means your regular expressions should work exactly the same in all implementations of JavaScript. In the past there were many serious browser-specific issues.
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
.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With