Why str.replace() behave strangely when replacement string has regex in it?

Question

let a =  `<script crossOrigin="anonymous" src="//example.com/index.js"></script>`

let regex = new RegExp(
            `<script(.*?) src="` + '//example.com/index.js' + `"></script>`, 'g')
let replacementString = 'document.cookie=e.replace(/[^+#$&^`|]/g,encodeURIComponent).replace("(","%28").replace(")","%29")+"="+t.replace(/[^+#$&\/:<-\[\]-}]/g,encodeURIComponent)+(r.domain?";domain="+r.domain:"")+(r.path?";path="+r.path:"")+(r.secure?";secure":"")+(r.httponly?";HttpOnly":"")'
b = a.replace(regex, replacementString)

The b result is:

document.cookie=e.replace(/[^+#<script crossOrigin="anonymous" src="//example.com/index.js"></script>^`|]/g,encodeURIComponent).replace("(","%28").replace(")","%29")+"="+t.replace(/[^+#<script crossOrigin="anonymous" src="//example.com/index.js"></script>/:<-[]-}]/g,encodeURIComponent)+(r.domain?";domain="+r.domain:"")+(r.path?";path="+r.path:"")+(r.secure?";secure":"")+(r.httponly?";HttpOnly":"")

while the expected result is the replacementString value as is.

Why is the result different?

You need to escape the `replacementString` before passing it into the `a.replace()` You may find this post useful https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex — Tunji Oyeniran, Sep 05 '19 at 07:49

Wiktor Stribiżew · Accepted Answer · 2019-09-05T08:04:28.143

There are two issues:

$& is a backreference to the whole match value in JS replacement pattern, use $$& instead of $& (see Replace string containing $& in JavaScript regex)
. in index.js is not escaped. Use '//example.com/index\\.js' instead of '//example.com/index.js' (see Regular Expression to match a dot and Why do regex constructors need to be double escaped?)

JS fixed snippet:

let a = '<script crossOrigin="anonymous" src="//example.com/index.js"></scrpit>';

let regex = new RegExp(
            '<script(.*?) src="' + '//example.com/index.js' + '"></scrpit>', 'g');
let replacementString = 'document.cookie=e.replace(/[^+#$$&^`|]/g,encodeURIComponent).replace("(","%28").replace(")","%29")+"="+t.replace(/[^+#$$&\/:<-\[\]-}]/g,encodeURIComponent)+(r.domain?";domain="+r.domain:"")+(r.path?";path="+r.path:"")+(r.secure?";secure":"")+(r.httponly?";HttpOnly":"")';
let b = a.replace(regex, replacementString);
document.body.innerHTML = "<pre>" + b + "</pre>";

Why str.replace() behave strangely when replacement string has regex in it?

1 Answers1