Pass variable to regular expression pattern string in jquery

Question

Is that possible to pass variable into regular expression pattern string in jquery ( or javascript)? For example, I want to validate a zip code input field every time while user type in a character by passing variable i to the regular expression pattern. How to do it right?

 $('#zip').keyup( function(){ 
 var  i=$('#zip').val().length
 for ( i; i<=5; i++){   
            var pattern=/^[0-9]{i}$/;  
     if ( !pattern.test(   $('#zip').val()   )    )
                {$('#zip_error').css('display','inline');}   
     else
         {$('#zip_error').css('display','none');}
   }
 })

Christian C. Salvadó · Accepted Answer · 2010-06-12 07:46:43Z

10

Yes, you can, using the RegExp constructor:

var pattern = new RegExp("^[0-9]{"+i+"}$");

But... looking at your code seems that you want to ensure that the textbox contains only numbers, for that you can use a simple regex like this:

var pattern = /^[0-9]+$/;

The above pattern will only match a string composed by numbers, it will look for:

Beginning of a line ^
Match a single digit character [0-9]
- Between one and unlimited times +
End of line $

edited Jun 12, 2010 at 7:46

answered Jun 12, 2010 at 7:41

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Philip007 Over a year ago

yeah, the '+' sign is what i need

Guffa · Accepted Answer · 2010-06-12 07:51:51Z

5

To answer your question, you use the Regexp constructor so that you can use a string for the pattern:

var pattern = new Regexp("^[0-9]{" + i + "}$");

However, the code doesn't really make sense. As you change the style in each iteration in the loop, only the result of the last iteration will show up.

If you want to check that the value only contains digits and is at least five characters, you can just specify that in the pattern:

$('#zip').keyup(function(){
  $('#zip_error').css(
    'display',
    /^\d{5,}$/.test($('#zip').val()) ? 'none' : 'inline'
  );
})

Regular expression content:

^ = start of string
\d = same as [0-9]
{5,} = repeat five or more times
$ = end of string

edited Jun 12, 2010 at 7:51

answered Jun 12, 2010 at 7:43

Guffa

703k111 gold badges760 silver badges1k bronze badges

4 Comments

Philip007 Over a year ago

Could you explain what's the meaning of the two '+'?

Philip007 Over a year ago

I want to validate the zip input on every keyup event, not after all characters are entered.

Philip007 Over a year ago

Very neat script with /^\d{5,}$/.test($('#zip').val()) ? 'none' : 'inline'. Bravo

Guffa Over a year ago

@phil: The two pluses is just string concatenation. It concatenates "^[0-9]{", the content of i and "}$". If i contains 1, the result is "^[0-9]{1}$".

Amr Badawy · Accepted Answer · 2010-06-12 08:19:33Z

0

$('#zip').keyup( function(){ 
     var zip= $('#zip').val();
     var pattern = /^[0-9]+$/;
     if (zip.length >0 && zip.match(pattern)) {
                // write your code
                return true;
            }
          else {
                // write your code
                return false;
            }
     });

answered Jun 12, 2010 at 8:19

Amr Badawy

7,70312 gold badges53 silver badges86 bronze badges

Comments

Eric · Accepted Answer · 2010-06-12 08:40:57Z

0

Your for loop looks rather suspicious:

var i = $('#zip').val().length; for (i; i<=5; i++) {

}

Why do you start after the end of the string?

Don't you just want this?:

$('#zip').keyup(function() {  
    var pattern = /^[0-9]*$/;  
    if(!pattern.test($('#zip').val()))
        $('#zip_error').css('display','inline'); 
    else
        $('#zip_error').css('display','none');
})

answered Jun 12, 2010 at 8:40

Eric

98.1k54 gold badges257 silver badges389 bronze badges

Collectives™ on Stack Overflow

Pass variable to regular expression pattern string in jquery

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related