Escape String For Use in JavaScript Regex

Is there a RegExp.escape function in JavaScript?

The function linked in another answer is insufficient. It fails to escape ^ or $ (start and end of string), or -, which in a character group is used for ranges.

Use this function:

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

While it may seem unnecessary at first glance, escaping - (as well as ^) makes the function suitable for escaping characters to be inserted into a character class as well as the body of the regex.

Escaping / makes the function suitable for escaping characters to be used in a JavaScript regex literal for later evaluation.

As there is no downside to escaping either of them, it makes sense to escape to cover wider use cases.

And yes, it is a disappointing failing that this is not part of standard JavaScript.

Not able to escape ? but \ works fine in javascript regex

Passing the literal notation instead of the string notation to the constructor your regexp works:

var reg = new RegExp(/aa\?b/, 'g');

var msgg = "aa?b"

console.log(msgg.match(reg))

JavaScript Regex, where to use escape characters?

You can use the regular expression syntax:

var programProductRegex = /[\s\/\)\(\w&-]/;

You use forward slashes to delimit the regex pattern.

If you use the RegExp object constructor you need to pass in a string. Because backslashes are special escape characters inside JavaScript strings and they're also escape characters in regular expressions, you need to use two backslashes to do a regex escape inside a string. The equivalent code using a string would then be:

var programProductRegex  = new RegExp("[\\s\\/\\)\\(\\w&-]");

All the backslashes that were in the original regular expression need to be escaped in the string to be correctly interpreted as backslashes.

Of course the first option is better. The constructor is helpful when you obtain a string from somewhere and want to make a regular expression out of it.

var programProductRegex  = new RegExp(userInput);

Does regex syntax provide a way of escaping a whole string, rather than escaping characters one by one?

It appears that regex does not offer such a syntax, at least for Javascript. It is possible, however, to proceed as follows:

1. use a string and automatically escape all the special characters in it,
   as indicated here: Javascript regular expression - string to RegEx object
2. concatenate that string with strings representing the rest of the expression you want to create
3. transform the string into a regex expression as indicated in Escape string for use in Javascript regex .

How can I escape special characters in regex and Javascript

On this line:

if (userInput.toLowerCase().replace(/[.,\/#!$%\^&\*;:{}=\-_`~ ()]/g,"").match(new RegExp('(^|\\s)'+key.toLowerCase()+'(\\s|$)')))  {{

you remove spaces (there is a space in the character class in /[.,\/#!$%\^&\*;:{}=\-_`~ ()]/g). That is why your regex (that you build with new RegExp('(^|\\s)'+key.toLowerCase()+'(\\s|$)')) matches only when the string is equal to key, it expects the key in between whitespaces or start/end of string.

You need to remove the space from replacement and apply this operation both on the input and key:

if (userInput.replace(/[.,\/#!$%^&*;:{}=\-_`~()\\]/g,"").match(new RegExp('(^|\\s)'+key.replace(/[.,\/#!$%^&*;:{}=\-_`~()\\]/g,"")+'(\\s|$)', 'i')))  {{

Note ^ and ; need no escaping. I also added a backslash to the special char character class.

Note there is no need to turn the case to lower, you can simply pass the i case insensitive flag to regex.

Escape regex special characters in javascript but still retain string integrity for matching keywords

You need to escape each non-whitespace chunk you want to search for and highlight. Also, there is no need to use a callback inside replace to replace with a whole match, you may use a $& backreference.

See the updated JS:

vm = new Vue({
    el: "#app",
    data() {
        return {
            search: null,
            message: 'Search this text for matches (check the bracketed area too)'
        };
    },
    computed: {},
    methods: {
        highlight (str) {
          var replacedStr = (this.search || '').trim().split(/\s+/).map(x => x.replace(/[-[\]{}()*+!<=:?.\\^$|#\s,]/g, '\\$&')).join("|");
          return str.replace(new RegExp(replacedStr, 'gi'), 
            '<span class="teal--text text--darken-1 font-weight-bold">$&</span>');
        }
    }
});

Here:

• .trim().split(/\s+/).map(x => x.replace(/[-[\]{}()*+!<=:?.\\^$|#\s,]/g, '\\$&')).join("|") - trims the input string with trim(), then splits out all non-whitespace chunks with .split(/\s+/), then these chunks are escaped with .map(x => x.replace(/[-[\]{}()*+!<=:?.\\^$|#\s,]/g, '\\$&')), and then .join("|") creates a regex pattern with a list of alternatives.
• In the '<span class="teal--text text--darken-1 font-weight-bold">$&</span>' string replacement pattern, the $& parts stands for the whole match value.

What does `escape a string` mean in Regex? (Javascript)

Many characters in regular expressions have special meanings. For instance, the dot character '.' means "any one character". There are a great deal of these specially-defined characters, and sometimes, you want to search for one, not use its special meaning.

See this example to search for any filename that contains a '.':

/^[^.]+\..+/

In the example, there are 3 dots, but our description says that we're only looking for one. Let's break it down by the dots:

• Dot #1 is used inside a "character class" (the characters inside the square brackets), which tells the regex engine to search for "any one character" that is not a '.', and the "+" says to keep going until there are no more characters or the next character is the '.' that we're looking for.
• Dot #2 is preceded by a backslash, which says that we're looking for a literal '.' in the string (without the backslash, it would be using its special meaning, which is looking for "any one character"). This dot is said to be "escaped", because it's special meaning is not being used in this context - the backslash immediately before it made that happen.
• Dot #3 is simply looking for "any one character" again, and the '+' following it says to keep doing that until it runs out of characters.

So, the backslash is used to "escape" the character immediately following it; as such, it's called the "escape character". That just means that the character's special meaning is taken away in that one place.

Now, escaping a string (in regex terms) means finding all of the characters with special meaning and putting a backslash in front of them, including in front of other backslash characters. When you've done this one time on the string, you have officially "escaped the string".

---

Related Topics