Why this JavaScript RegExp results in dual answer?

Look at this simple HTML input tag:

<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>

Now imagine that we want to validate this field, using this function:

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('n开发者_StackOverflow中文版ot valid<br />');
        }
        else {
            log.text('valid<br />');
        }
    }
}
validateRegex($('#phoneNumber'));
var isValid = new RegExp('^\\+\\d{2}\\.\\d{10}$').test($('#phoneNumber').val());
log.append(isValid.toString());

Now, if you look at the log, you see that this line returns false:

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

However, this line of code returns true:

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

In other words, when the pattern of the RegExp object is passed to it as a string variable, it doesn't work. But when you pass a string literal, it works.

Why? What's wrong here?

To see it in action, look at this fiddle.

---

Escaping backslashes applies only to JavaScript, it isn't necessary for HTML. Therefore, the following attribute string:

data-validation-regex-pattern='^\+\d{2}\.\d{10}$'

Will work just fine:

Updated fiddle: http://jsfiddle.net/AndyE/GRL2m/6/

---

\\ is the method to write \ in a JavaScript String. The HTML data-attribute, written in JS would be \\\\, instead of \\.

Eg: <a data-x="\\">(HTML) is equivalent to '<a data-x="\\\\">' (JS).

To get your code work, replace double slashes (\\) in your HTML by a single slash.
Fiddle: http://jsfiddle.net/GRL2m/5/

Extra information:

• In HTML, HTML entities (eg ") are used to display special characters.
• In JavaScript, escapes (eg \n, \x20, \u0009, ..) are used to display special characters.
• In a RegExp, special RE characters have to be escaped by a slash (/\./). When the RegExp is constructed using a string, the slash has to be escaped, so that the slash also appear at the RegExp. "\." equals '.', while "\\." equals '\.'.