36-JavaScript advanced ④ (regular expression)

Posted by aalmos on Sun, 06 Mar 2022 15:11:19 +0100

1. Regular expression overview

1.1 what is a regular expression

Regular Expression is a pattern used to match character combinations in a string. In JavaScript, regular expressions are also objects.

The text boxes that match the regular name and number in the search form (for example, the text boxes that match the regular name and number in the search form) can only be used to verify that they match the English name and number in the form. In addition, regular expressions are often used to filter out some sensitive words in the page content (replacement), or get the specific part we want from the string (extraction), etc.

1.2 characteristics of regular expressions

  1. Flexibility, logic and functionality are very strong.
  2. It can quickly achieve the complex control of string in a very simple way.
  3. For people who have just come into contact, it is more obscure and difficult to understand. For example: ^ \ w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
  4. The actual development is generally to directly copy the written regular expression However, it is required to use regular expressions and modify them according to the actual situation For example, user name: / ^ [a-z0-9#-]{3,16}$/

2. Use of regular expressions in js

2.1 creation of regular expressions

  • Method 1: create by calling the constructor of RegExp object: var variable name = new RegExp(/ expression /);
  • Method 2: create regular expression with literal value: var variable name = / expression /;

Regular expression test 2

regexObj. The test (STR) regular object method is used to detect whether the string conforms to the rule. The object will return true or false, and its parameter is the test string.

3. Special characters in regular expressions

3.1 composition of regular expressions

A regular expression can consist of simple characters, such as / abc /, or a combination of simple and special characters, such as / ab*c /. Among them, special characters are also called metacharacters, which are special symbols with special significance in regular expressions, such as ^, $, + and so on.

There are many special characters. You can refer to: MDN

3.2 boundary character

The boundary character (position character) in regular expression is used to indicate the position of the character. There are mainly two characters

Boundary characterexplain
^Represents the text that matches the beginning of the line (starting with who)
$Represents the text that matches the end of the line (with whom)

^Together with $, it means that it must be an exact match (exact match)

3.3 character class

Character class means that there are a series of characters to choose from, as long as you match one of them. All optional characters are placed in square brackets.

3.3.1 [] square brackets

[] indicates that there are a series of characters to choose from. Just match one of them ([^] is reversed)

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('baby'));//true
console.log(rg.test('color'));//true
console.log(rg.test('red'));//false
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'));//true
----------------------------------------------------------------------------------
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('A'));//false
-----------------------------------------------------------------------------------
//Character combination
var reg1 = /^[a-zA-Z0-9]$/; // 26 English letters (both uppercase and lowercase) any letter returns true  
------------------------------------------------------------------------------------
//The addition of ^ inside the inverted square brackets indicates negation. As long as the characters in the square brackets are included, false is returned.
var reg2 = /^[^a-zA-Z0-9]$/;
console.log(reg2.test('a'));//false
console.log(reg2.test('B'));//false
console.log(reg2.test(8));//false
console.log(reg2.test('!'));//true

3.3.2 quantifier

Quantifier is used to set the number of times a pattern appears.

classifierexplain
*Repeat 0 or more times, > = 0
+Repeat 1 or more times, > = 1
?Repeat 0 or 1 times
{n}Repeat n times, = n
{n,}Repeat n or more times, > = n
{n,m}Repeat n to m times, > = n, < = m

3.3.3 bracketed summary

  1. {} brace quantifier It indicates the number of repetitions
  2. [] bracket character set. Matches any character in parentheses
  3. () parentheses indicate priority

Regular expression online test

3.4 predefined classes

Predefined classes are shorthand for some common patterns

Reservation classexplain
\d[0-9]
\D[^0-9]
\w[A-Za-z0-9_]
\W[^A-Za-z0-9_]
\s[\t\r\n\v\f]
\S[^\t\r\n\v\f]

4. Substitution in regular expressions

4.1 replace

stringObject. Replace (regexp / substr, replacement) the replace () method can implement the operation of replacing strings. The parameters used to replace can be a string or a regular expression.

4.2 regular expression parameters

/Expression / [switch]
switch (also known as modifier) matches according to what pattern. There are three values:

  • g: Global pip
  • i: Ignore case
  • gi: global match + ignore case

Topics: Javascript css3