Using regular expressions in js

  When we design web pages, we always deal with forms, and most of the verification of forms is verified by regular expressions. On the homepage, let's learn what regular expressions are:

(the figure above comes from Baidu Encyclopedia) regular expression_ Baidu Encyclopedia

  Next, let's learn about the use of regular expressions:

  1. We first create a new regular expression by literal (the format of the regular expression is / * / * which is the content of the regular expression. The content in the regular expression does not need to be quoted, whether it is numeric or string)

  

var rg =/123/;

    2. Next, we use the test method of regular expression to detect whether the string meets the specification required by regular expression (the return value of regular expression is boolean type)

  

console.log(rg.test(123));
console.log(rg.test('abc'));

  The following figure shows the results printed in the console

    

  3. Next, we introduce the boundary operators in regular expressions

  The following figure shows the regular expression without boundary and the results printed in the console

var rg = /abc/;
console.log(rg.test('abc'));
console.log(rg.test('abcd'));
console.log(rg.test('aabcd'));

The following figure shows the regular expression with only the start boundary character and the result printed in the console (the symbol bit of the start boundary character ^)

var reg = /^abc/;
 console.log(reg.test('abc'));
 console.log(reg.test('abcd'));
 console.log(reg.test('aabcd'));

  The following figure shows the regular expression with start boundary symbol and end boundary symbol and the result printed in the console (the symbol of end boundary symbol is $)

var reg1 =/^abc$/;
console.log(reg1.test('abc')); 
console.log(reg1.test('abcd')); 
console.log(reg1.test('aabcd'));
console.log(reg1.test('abcabc'));

  4. Next, we introduce the character set in regular expressions

  [] indicates that there are a series of characters to choose from. Just match one of them

   var rg = /[abc]/; // It returns true as long as it contains a, b or c
   console.log(rg.test('andy')); //true
   console.log(rg.test('bady')); //true
   console.log(rg.test('color')); //true
   console.log(rg.test('red')); //false

Boundary characters need to be written outside the character set

var rg1 =/^[abc]$/;//Choose one from three. Only the letters a, b or c return true
        console.log(rg1.test('aa')); //false
        console.log(rg1.test('a')); //true
        console.log(rg1.test('b')); //true
        console.log(rg1.test('c')); //true
        console.log(rg1.test('abc')); //false

        var reg = /^[a-z]$/; //26 English letters. Any letter returns true - indicating the range from a to z
        console.log(reg.test('a')); //true
        console.log(reg.test('z')); //true
        console.log(reg.test('1')); //false
        console.log(reg.test('A')); //false

Character combinations are described below

 var reg1 =/^[a-zA-Z0-9_-]$/; //26 English letters (both uppercase and lowercase) any letter returns true
        //Any number from 0 to 9 returns true - indicating the range of a-z and the range of 0-9
        console.log(reg1.test('a'));
        console.log(reg1.test('B'));
        console.log(reg1.test(9));
        console.log(reg1.test('_'));
        console.log(reg1.test('-'));
        console.log(reg1.test('!'));

 ^ When a symbol is written into a character set, it means reverse, which means that all symbols except uppercase and lowercase letters, numbers from 0 to 9 and underlined lines return true

        var reg2 = /^[^a-zA-Z0-9_-]$/;
        console.log(reg2.test('a'));
        console.log(reg2.test('B'));
        console.log(reg2.test(9));
        console.log(reg2.test('_'));
        console.log(reg2.test('-'));
        console.log(reg2.test('!'));

  5. The next two introduce quantifiers in regular expressions

 //Quantifier: used to set the number of occurrences of a pattern
        //Simple understanding: how many times does the following character a repeat
        var reg =/^a$/;

        // *Equivalent to > = 0, it can occur 0 or many times
         var reg =/^a*$/;
         console.log(reg.test('a')); //true
         console.log(reg.test('')); //true
         console.log(reg.test('aaaa')); //true

        // +Equivalent to > = 1, it can occur once or many times
         var reg =/^a+$/;
         console.log(reg.test('a')); //true
         console.log(reg.test('')); //false
         console.log(reg.test('aaaa')); //true

        // ?  Equivalent to 1 | 0 can only occur once or 0 times
         var reg =/^a?$/;
         console.log(reg.test('a')); //true
         console.log(reg.test('')); //true
         console.log(reg.test('aaaa')); //false

        // {3} Just repeat it three times
         var reg =/^a{3}$/;
         console.log(reg.test('a')); //false
         console.log(reg.test('')); //false
         console.log(reg.test('aaaa')); //false
         console.log(reg.test('aaa'));//true

        // {3,} is greater than or equal to 3
         var reg=/^a{3,}$/;
         console.log(reg.test('a')); //false
         console.log(reg.test('')); //false
         console.log(reg.test('aaaa')); //true
         console.log(reg.test('aaa'));//true

        // {3,16} greater than or equal to 3 and less than or equal to 16
        var reg =/^a{3,6}$/;
        console.log(reg.test('a')); //false
        console.log(reg.test('')); //false
        console.log(reg.test('aaaa')); //true
        console.log(reg.test('aaa'));//true
        console.log(reg.test('aaaaaaa'));//false

  The above is a brief introduction to regular expressions  

Tags: Javascript Front-end regex

Posted on Tue, 30 Nov 2021 16:53:31 -0500 by eddjc