Js replace and Regex exclude a word

Question

I have this issue with regex, it doesn't really have friendly syntax for me :(.

Basically I need to match some text and wrap the matched word/letter with a .

html = html.replace(new RegExp('(' + word + ')', 'ig'), function ($1, match) {
                                return '<strong>' + match + '</strong>';

Now everything works fine except that in some occasion, the previously added  get matched to messing up the html.

So I basically need the html.replace function to ignore any  word during the matching.

I have tried to change new RegExp('(' + word + ')' with new RegExp('(?!\<strong\>)(' + word + ')' but I still have issue.

Ex.

'<strong>Alpinestars</strong> SMX Plus Gore-Tex Boots'.replace(new RegExp('(o)(?!</strong>)', 'ig'), function ($1, match) {
                            return '<strong>' + match + '</strong>';});

returns

"<str<strong>o</strong>ng>Alpinestars</str<strong>o</strong>ng> SMX Plus G<strong>o</strong>re-Tex B<strong>o</strong><strong>o</strong>ts"

ok just tried, unfortunately it is not working as expected. still the is matched if the word value is O for ex. ( while o is not matching it ) — WonderLand
– WonderLand, Commented Nov 18, 2015 at 7:41
I think you just need RegExp( word + '(?![^<]*)'). You do not have to escape a / inside a regexp constructor. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Nov 18, 2015 at 7:43
@stribizhev looks better but still the closing tag is matched  — WonderLand
– WonderLand, Commented Nov 18, 2015 at 7:46
Please post the input string and other pertinent code to repro. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Nov 18, 2015 at 7:53

Wiktor Stribiżew · Accepted Answer · 2015-11-18 08:58:45Z

2

You can check if you are not inside an element node with (?![^>]*>) look-ahead:

function escapeRegExp(string){
  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

var key = 'o';
var s = '<strong>Alpinestars</strong> SMX Plus Gore-Tex Boots';
var res = s.replace(RegExp(escapeRegExp(key) + '(?![^>]*>)', 'ig'), function (m) {
                            return '<strong>' + m + '</strong>';});
document.getElementById("t").innerHTML = res.replace(/>/g, "&gt;").replace(/</g, "&lt;");

<div id="t"/>

You also do not need any capturing groups (unless you are using alternations like boots|caps|hats) and do not have to use new with RegExp. I also added an escapeRegExp function from MDN to escape special characters in key if any.

edited Nov 18, 2015 at 8:58

answered Nov 18, 2015 at 8:07

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

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

3 Comments

WonderLand Over a year ago

I updated your answer with what worked for me. ( consider $key can be also a full word ... with your solution nothing was matched in that scenario )

trincot Over a year ago

@Wonderland, your update was rejected, as it changes the answer completely. If you want to share your solution, please post it as a new answer.

Wiktor Stribiżew Over a year ago

@WonderLand: If you need to perform a case-insensitive search, yes, add the i modifier. I added it to the code.

xdhmoore · Accepted Answer · 2015-11-18 08:10:38Z

2

You were close. You just had the order wrong. According to the following mdn page, the x(?!y) means: Matches x only if x is not followed by y.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

So, this seems to work for me:

var word = 'and';
'dogs <strong>and</strong> cats <strong>and</strong>'.replace(
    new RegExp('(' + word + ')(?!</strong>)', 'ig'), 
    function ($1, match) {
        return '<strong>' + match + '</strong>';
    }
);

edited Nov 18, 2015 at 8:10

answered Nov 18, 2015 at 7:53

xdhmoore

10.2k12 gold badges57 silver badges103 bronze badges

1 Comment

WonderLand Over a year ago

check my update on the question ( there are still some issues )

Collectives™ on Stack Overflow

Js replace and Regex exclude a word

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related