CODEWITHSUNDEEP
javascriptregex
Saeed Neamati
Saeed Neamati

Reputation: 35822

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('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());

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.

Upvotes: 2

Views: 105

Answers (2)

Rob W
Rob W

Reputation: 348992

\\ 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 &quot;) 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 '\.'.

Upvotes: 1

Andy E
Andy E

Reputation: 344567

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/

Upvotes: 2

Related Questions