为什么正则表达式在表单输入上不正确。 Javascript

Question

In my contactform, I added event listeners that are looking for url strings in the input fields. I'm using the regex (http:|https:|www|\/\/|\\\\)+ to do the job. All strings in the regex are working fine, except \\\\ will give a hit on 1 backslash.

Why is the regex ok on https://regexr.com and why is it not working in Javascript?

jsFiddle https://jsfiddle.net/j3hsvapm/1/

What am I doing wrong?

SOLVED because Opera does not support the String.raw I used 8 backslashes as recommended by @user120242, and now it is working fine.

 var formElms = document.querySelectorAll('.testme'); Object.keys(formElms).forEach(function(key) { formElms[key].addEventListener('input', function () { var result = 'OK'; var reg = new RegExp("(http:|https:|www|\/\/|\\\\\\\\)+", "gi"); value = formElms[key].value; // console.log(key, ': ', value); if (reg.test(value)) result = 'Not allowed'; document.querySelector('#result').innerHTML = result; }); });

 div, input, textarea { width: 200px; font: 400 16px/1.5 sans-serif; }

 <div id="result">OK</div> <br><input class="testme" type="text"> <br><br><textarea class="testme" rows="4"></textarea>

Answer 1

Due to string escaping:
"\\\\" turns into the string \\ and then regex escapes again so it becomes \

A few solutions:

• new RegExp("(http:|https:|www|\\/\\/|\\\\\\\\)+","gi") (8 backslashes)
• /(http:|https:|www|\/\/|\\\\)+/gi (regex literal)
• (template literal and String.raw)
  new RegExp(String.raw`(http:|https:|www|\/\/|\\\\)+`,'gi')

The last one is probably the most elegant solution, and will fit your need to use variable substitution. eg:

myvar = "somestring"
console.log(new RegExp(String.raw`^http://${myvar}$`,'gi').test('HTTP://SOMEstring'))

Note: OP has pointed out that Opera lacks String.raw support
For those who want to be able to use String.raw, and are using babeljs , there is a plugin for String.raw support:babel-plugin-transform-string-raw
Sample transpilation online demo

Using regex literal syntax instead:

 var formElms = document.querySelectorAll('.testme'); Object.keys(formElms).forEach(function(key) { // console.log(key, formElms[key], formElms[key].value); formElms[key].addEventListener('input', function () { var result = 'OK'; var reg = /(http:|https:|www|\/\/|\\\\)+/gi; value = formElms[key].value; console.log(key, ': ', value); if (reg.test(value)) result = 'Not allowed'; document.querySelector('#result').innerHTML = result; }); });

 div, input, textarea { width: 200px; font: 400 16px/1.5 sans-serif; }

 <div id="result">OK</div> <br><input class="testme" type="text"> <br><br><textarea class="testme" rows="4"></textarea>

Demo that shows what is happening with the string escaping. Note: In regex \\ matches on the escaped \ character
And showing how you can use String.raw template tag and template literals to avoid string escaping:

 str = "(http:|https:|www|\/\/|\\\\)+" console.log("str: ",str) // notice that you get \\ re = new RegExp(str,"gi") console.log(re) console.log(re.source) // using template string syntax and the "raw" template tag str = String.raw`(http:|https:|www|\/\/|\\\\)+` console.log("raw str: ",str) re = new RegExp(str,"gi") console.log(re) console.log(re.source)