Highlighting variable word in a string using regular expression

Question

var stringToHighlight = [userinput] // may be any string like "foo", "bar" or "."
var stringToBeHighlighted = [any text] // Lorem Ipsum ...

So far I have

var regex = new RegExp(stringToHighlight, "g")                  
var highlightedString = stringToBeHighlighted.replace(regex, "<span class='highlight'>$&</span>")

This doesn't work for the character "." for example, because it is being interpreted as the regular expression metacharacter . but not the actual character "." resulting in all the text being highlighted. How do I exclude those special metacharacters?

possible duplicate of generic regexp using jquery variable to replace dot, colon or any other character — Qtax
– Qtax, Commented Jun 12, 2012 at 16:48

Community · Accepted Answer · 2017-05-23 11:55:47Z

1

JS doesn't have any built in function to escape meta characters in regex, but you could use this function (from this answer):

function quotemeta(str){
    return str.replace(/[.+*?|\\^$(){}\[\]-]/g, '\\$&');
}

Which would be used like so:

var regex = new RegExp(quotemeta(stringToHighlight), "g");

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Jun 12, 2012 at 16:46

Qtax

34k9 gold badges92 silver badges127 bronze badges

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

Comments

solidau · Accepted Answer · 2012-06-12 16:48:44Z

0

You either need to type in an actual regular expression (escape the "." by placing "\" before it) or you can use a function such as http://phpjs.org/functions/strstr:551 to look for a string literal

answered Jun 12, 2012 at 16:48

solidau

4,0814 gold badges27 silver badges47 bronze badges

Collectives™ on Stack Overflow

Highlighting variable word in a string using regular expression

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related