为什么此JavaScript RegExp会导致双重答案？

Question

看看这个简单的超文本标记语言input标记：

<input type='text' id='phoneNumber' name='phoneNumber' class='inputBig textLeft'
data-validation='required regex' 
data-validation-regex-pattern='^\\+\\d{2}\\.\\d{10}$'
value='+98.2188665544' />

<p id='log'></p>

现在假设我们想要验证这个字段，使用这个函数：

var log = $('#log');
function validateRegex(field) {
    var pattern = field.attr('data-validation-regex-pattern');
    log.append(pattern + '<br />');
    if (pattern && pattern != '') {
        var isValid = new RegExp(pattern).test(field.val().trim());
        if (!isValid) {
            log.append('not valid<br />');
        }
        else {
            log.text('valid<br />');
        }
    }
}
validateRegex($('#phoneNumber'));
var isValid = new RegExp('^\\+\\d{2}\\.\\d{10}$').test($('#phoneNumber').val());
log.append(isValid.toString());

现在，如果您查看日志，您会看到此行返回false：

var isValid = new RegExp(pattern).test(field.val().trim());

但是，下面这行代码返回true：

new RegExp('^\\+\\d{2}\\.\\d{10}$').test($('#phoneNumber').val().trim());

换句话说，当RegExp对象的模式作为字符串变量传递给它时，它就不起作用了。但是当你传递一个字符串字面量时，它是有效的。

为什么？这是怎么回事？

要查看它的实际效果，请查看此fiddle。

Answer 1

\\是在JavaScript字符串中写入\的方法。用JS编写的HTML data-attribute应该是\\\\，而不是\\。

例如：<a data-x="\\">(超文本标记语言)等同于'<a data-x="\\\\">' (JS)。

要使您的代码正常工作，请将HTML中的双斜杠(\\)替换为单斜杠。

小提琴：

额外信息：

在超文本标记语言中，超文本标记语言实体(如")用于显示特殊的

• ，转义(如\n，\x20，\u0009，..)。用于显示特殊的characters.
• In a RegExp，特殊的RE字符必须用斜杠(/\./)转义。当使用字符串构造RegExp时，必须对斜杠进行转义，以便斜杠也出现在RegExp处。"\." equals '.'，而"\\." equals '\.'.