javaScript Series [29]- RegExp

This article briefly introduces RegExp related knowledge points, including the creation of regular expressions, matching rules, and so on.

A brief introduction to RegExp

regular expression Regular Expression Is an object that describes the character pattern and provides a built-in ReegExp in the JavaScript language to handle regularization. Regular expressions can perform powerful pattern matching and text retrieval and replacement functions. There is often a lot of work in form data checking in front-end development. Using regular expressions can reduce the workload of data checking.

In JavaScript, in addition to RegExp's built-in constructor, there are many operations involving regularity in string manipulation, including the acceptance of regular expressions as parameters in string macth(), search(), split(), and replace(), which also provides more powerful functions for manipulating strings.

Creation of Regular Expressions

The creation of regular expressions supports two forms, one is the creation of direct literal quantities, the other is the creation of RegExp constructors, and the regular instances are equivalent.

1 Literal Quantity

Literal quantity creates regular grammar var reg = / pattern / flags; The pattern part can be any simple or complex regular expression, while the flags part supports three matching patterns.

g: global              Represents a global match
i: case-insensitive    Indicates ignoring case
m: multiline           Represents a multiline match,Influence^,$Matching results for

In the JavaScript language for creating regular grammars for literal quantities, the pattern part can either write specific string text directly or use regular metacharacters, which need to be noted because they have one or more special uses in regular expressions, so if you want to match the characters contained in the string, you must escape them.

  /*01-Literal creation*/
  var reg1 = /Vertex/g;                  /*Match Top Text, Global Match*/
  var reg2 = /[a-zA-Z0-9]\d{3}/g;       /*Match text starting with letters and numbers followed by three numbers, global match*/
  var reg3 = /^javaScript/g;            /*Match text that starts with JavaScript, match globally*/
  var reg4 = /^javaScript/gm;           /*Match text that starts with JavaScript or as the beginning of a line, global multiline match*/
  var reg5 = /[xm]xia/i;                /*Match xxia or mxia text, case insensitive*/

  /*.Is a metacharacter in a regular, representing all characters except line breaks*/
  var reg6 = /.com/gi;                  /*Matches all 4 characters ending in com, case insensitive*/
  var reg7 = /\.com/gi;                 /*Match all. com text, case-insensitive*/

  /*02-Regular Test*/
  console.log(reg1.test("Hello, Wending Ding!"));    //true
  console.log(reg2.test("a123"));           //true
  console.log(reg2.test("5123"));           //false
  console.log(reg2.test("-123"));           //false

  var str = "java\njavaScript";
  console.log(reg3.test(str));              //false
  console.log(str.match(reg3));             //null
  console.log(str.match(reg4));             //["javaScript"]
  console.log(reg5.test("xxiao"));          //true
  console.log(reg5.test("MxiAo"));          //true
  console.log(reg5.test("xiongXxiao"));     //true
  console.log(reg5.test("xiaoxiao"));       //false

  console.log(reg6.test("baiducom"));       //true
  console.log(reg7.test("baiducom"));       //false
  console.log(reg7.test("wendingding.com"));//true

(2) Constructors

The syntax var reg = new RegExp (pattern, flags) for creating regular instances with the RegExp constructor; The pattern part can be any simple or complex regular expression (simply write string rules), while the flags part supports three matching patterns as well as the literal quantities.

  /*01-Constructor to create regular expressions*/
  var reg1 = new RegExp("Vertex","g");            /*Match Top Text, Global Match*/
  var reg2 = new RegExp("[a-zA-Z0-9]\\d{3}","g") /*Match text that starts with letters and numbers followed by three numbers globally*/
  var reg3 = new RegExp("^javaScript","g");  /*Match text that starts with JavaScript, match globally*/
  var reg4 = new RegExp("^javaScript","gm"); /*Match text that starts with JavaScript or as the beginning of a line global multiline match*/
  var reg5 = new RegExp("[xm]xia","i");      /*Match xxia or mxia text, case insensitive*/

  /*.Is a metacharacter in a regular, representing all characters except line breaks*/
  var reg6 = new RegExp(".com","gi");        /*Matches all 4 characters ending in com, case insensitive*/
  var reg7 = new RegExp("\\.com","gi");      /*Match all. com text, case-insensitive*/


  /*02-Regular Test*/
  console.log(reg1.test("hello,Top of the text!"));  //true
  console.log(reg2.test("a123"));           //true
  console.log(reg2.test("5123"));           //false
  console.log(reg2.test("-123"));           //false

  var str = "java\njavaScript";
  console.log(reg3.test(str));              //false
  console.log(str.match(reg3));             //null
  console.log(str.match(reg4));             //["javaScript"]
  console.log(reg5.test("xxiao"));          //true
  console.log(reg5.test("MxiAo"));          //true
  console.log(reg5.test("xiongXxiao"));     //true
  console.log(reg5.test("xiaoxiao"));       //false

  console.log(reg6.test("baiducom"));       //true
  console.log(reg7.test("baiducom"));       //false
  console.log(reg7.test("wendingding.com"));//true

RegExp Basic Usage

String Method

str.search()
    Returns the index value for the first match,Return if not matched-1
str.match()
    - Default match string, returns an array
        + 0:Matched Characters
        + index:Matches the index where the first character is located
        + input:A reference to a string
    - Global Matching(g),Returns an array matching all strings
    - Return if not matched null
str.replace()  Replace strings with regular matching
str.split()    Use regular matching to cut strings
  /*01-replace Basic use of methods*/
  /*01-1 Empty N spaces before and after a string (implements string trim method functionality)*/
  //var reg1   = /^\s+|\s+$/g;
  var reg1     = new RegExp("^\\s+|\\s+$","g")
  var result   = " trim test   ".replace(reg1,"");
  console.log(result);                            //trim test

  /*01-2 Handling sensitive words in strings*/
  var  world = "Huawei Glory";
  var  reg2  = new RegExp(world,"g");
  var  str   = "Today, Huawei announced that its mobile phone was officially launched with Glory and Price. Huawei sold only 998";
  console.log(str.replace(reg2, "****"));
  /*Today, Huawei announced that its mobile phone **** is officially on the market, **** It only sells 998 at an attractive price*/

  /*02-match Basic use of methods*/
  /*02-1 Default Match*/
  console.log(str.match(/Huawei Glory/));
  //["Huawei Glory", index: 13, input: ""Huawei Company today announced that its mobile phone is officially listed as Glory, Huawei Glory Price touching sales only 998"
  //groups: undefined]

  /*02-2 Global Matching*/
  console.log(str.match(/Huawei Glory/g));  /*[""Glory for glory", "Glory for glory"]*/

  /*02-3 Matching Failed*/
  console.log(str.match(/Apple/));      /*null*/

  /*03-search Basic use of methods*/
  console.log(str.search(/Huawei Glory/));  /*13*/
  console.log(str.search(/Apple/));     /*-1*/

  /*04-split Basic use of methods*/
  var str1 = "2019-05-20";
  var str2 = "Bear Big  ,Bear 2, strong bald head, fur, Jiji>Kate";
  console.log(str1.split("-"));        //["2019", "05", "20"]
  console.log(str2.split(","));        //['Bear Big','Bear Two, Baldy Head, Fur, Gigi>Kate']
  console.log(str2.split(/\s*[,,>]\s*/g));//['Bear Big','Bear Two','Light Head','Hair','Gigi','Kate']

Core members of RegExp

regExp.test() Testing the use of regular expressions test Method,Return Boolean
    - Format: Regular expression.test(Character string)
    - use<regular expression>test<Character string>Match or not,Return true/false
regExp.exec() Testing regular expressions exec Method
    - Format:/xx/.exec(Character string)
global        Whether to apply g
ignoreCase    Ignore case mode
multiline     Whether to apply multiline matching mode
source        A string containing the text of a regular expression
lastIndex     Integer, if the regular applies g Global match, then save the next location to start retrieving, in exec and test Method will be used
  var reg = /little frog/gi;
  console.log(reg.global);      //true
  console.log(reg.ignoreCase);  //true
  console.log(reg.lastIndex);   //0
  console.log(reg.multiline);   //false
  console.log(reg.source);      //little frog

RegExp Matching Rule

001 All letters and numbers are matched literally,Matching a string is equivalent to/good/gi
002 Character class (lower case only)
    - `. ` : Characters other than line breaks
    - \w : Represents numbers or letters or underscores
    - \W : Non-numeric letters and underscore characters
    - \d : number
    - \D : Non-numeric
    - \s : Represents a space
    - \S : Characters other than spaces
    Note: All of the above character classes match "one" character only
    
003 Boundary handling
    - \b : Match a word boundary, that is, the position between the word and the space
    - \B : Match non-word boundaries.

004 Special Symbols
    >^  $  .  *  +  ?  =  !  :  |  \  /  ()  []  {}
    - []: Represents any "single character" ,The content inside represents the relationship of "or"
        + -: Scope of Representation
        + ^: Represents not

    - (): Represents grouping ( n Arrange in the order of the leftmost parentheses)
        + $1: Represents the first grouping
        + $n: Represents the n Groupings (not in regular expressions)
        + \n: Used after regular grouping to denote n References to groups of(Be sure to write in regular expressions)
        Recommendation: The fewer regular groupings you write, the better

    - |:  Indicate or

    - Anchor point positioning
        + ^: What does it start with
        + $: What does it end with

    - Represents quantity, counting the previous character,
        + *: Represents 0 or more  {0,}
        + +: Represents one or more  {1,}
        + ?: Represents 0 or 1     {0,1}
        + {}:
            \d{5}: Match Five Numbers
            \d{5,10}: Match 5 to 10 numbers
            \d{5,}: Match 5 or more numbers
        Explain:
            1)Quantifiers*,+,{5,},Match as many results as possible (greedy)
            2)Add one after?Represents as few matches as possible (non-greedy)
                google,goooogle ==> /go+/

Added by chrille112 on Tue, 04 Jan 2022 22:53:32 +0200