Escape user input for use in JS regex

Question

I am building a highlight feature for search results on my website and need to escape the user's input so that I could highlight the matching string within the original text.

The function

function sanitize_for_regex(s){
    var escaped = '';
    for(var i = 0; i < s.length; ++i){
        switch(s[i]){
            case '{':
            case '}':
            case '[':
            case ']':
            case '-':
            case '/':
            case '\\':
            case '(':
            case ')':
            case '*':
            case '+':
            case '?':
            case '.':
            case '^':
            case '$':
            case '|':
                escaped+= '\\';
            default:
                escaped+= s[i];
        }
    }
    return escaped;
}

How it's used

var input_from_user = 'Hey + wi$ll th<is \'" { tex|t / \\ mess w?>ith you?';

var highlighted_text = original_text.replace(new RegExp('('+sanitize_for_regex(input_from_user)+')', 'gi'), '<span style="background-color:#FBFB73;">$1</span>');

My test cases show that it's working quite well but I would like to get some feedback from other professionals.

Does this function look like it will escape all injection "attempts"? (I quoted attempts because the user is usually not aware of attempting to break anything)

Could the performance be improved?

Answer 1

I'm not a fan of "sanitizing" data. There isn't a clear definition of what "sanitizing" means, other than that it takes untrustworthy input and somehow makes it valid. It might entail discarding the invalid parts of the input — which is not what you are doing here. Escaping is a clearer term to describe what you are doing.

Repeated string concatenation is considered poor practice for performance. Since JavaScript strings are immutable, it would be better to devise a solution that constructs the string "all at once".

The documentation on developer.mozilla.org suggests the following solution for escaping a regular expression:

Escaping user input to be treated as a literal string within a regular expression can be accomplished by simple replacement:

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

I strongly recommend replacing your custom solution with the standard recipe (including a citation).

Answer 2

A couple options as far as escaping goes:

1. You can use a regular expression that matches any character that needs escaped and replaces it with "\\&$", which is "A backslash, followed by whatever character matched.":

   // The inside regexp just replaces every character with a leading backslash for readability.
   // It can be optimized out just fine.
   
   var pattern = RegExp("[" + "{}[]-/\\()*+?.%$|".replace(RegExp(".", "g"), "\\$&") + "]", "g");
   
   function sanitize_for_regex(val) {
       return val.replace(pattern, "\\$&");
   }
   

2. You can keep your current code somewhat as-is (but it's relatively inefficient), but checking a string rather than a bunch of case:

   function sanitize_for_regex(s) {
       var escaped;
       for(var i = 0; i < s.length; ++i){
           if("{}[]-/\\()*+?.%$|".indexOf(s[i]) !== -1) {
               escaped += "\\";
           }
           escaped += s[i];
       }
       return escaped;
   }
   

As for what needs to be escaped, you're probably matching far more than you need to -- many of those symbols only have meaning when paired with other symbols that you're already escaping, thus:

• It's not neccessary to escape - or ^, because you're already escaping [ and ] and thus -- unless you're using the input inside of that part of a pattern, they'll never be treated as special characters.
• It's technically not necessary to escape ], because the [ that would begin that part of the pattern is already escaped.
• If you're only using the output inside of a pattern (as opposed to inside of a replacement), I believe the only things that really need escaping are the backslash (\), wildcards and the start of character classes (. and [), quantifiers (?, +, * and {), parenthesis (( and )) and branching expressions (|).
• So, in short, the list of characters to escape are ()[.?+*{|.

This may vary a bit depending on your usage though.

Answer 3

This is not a big performance deal, yet you could use a "hashset" instead of going through the cases:

var dispatch = {
    '{':  true,
    '}':  true,
    '[':  true,
    ']':  true,
    '-':  true,
    '/':  true,
    '\\': true,
    '(':  true,
    ')':  true,
    '*':  true,
    '+':  true,
    '?':  true,
    '.':  true,
    '^':  true,
    '$':  true,
    '|':  true
};

function sanitize_for_regex2(val) {
    var escaped = "";

    for (var i = 0; i !== val.length; ++i) {
        if (dispatch[val[i]]) {
            escaped += "\\";
        }

        escaped += val[i];
    }

    return escaped;
}

alert(sanitize_for_regex2("{yeah}"));
alert(sanitize_for_regex("{yeah}"));