Overview of regular expressions

Regular expressions can be used in both verification and compatibility methods

What is a regular expression

Regular Expression: An Expression used to match Regular rules.
A regular expression is a logical formula used to manipulate strings. It uses predefined characters and the combination of these characters to form a “regular string”. The “regular string” is used to filter strings.

Function of regular expressions

Whether a given string conforms to the regular expression’s filtering logic (match)
We can use regular expressions to get the specific part of the string we want (extract)
Strong string substitution capability (substitution)

Regular expression testing

Online test re: c.runoob.com/front-end/8…

Regular expression syntax

In JS, regular expressions are also objects, which are an index type.
Using a regular expression literal is the easiest way. The two slashes are delimiters of regular expressions.
You can create a regular expression in the following two ways
- Use a regular expression literal (recommended)
```
var reg = /a*/;
Copy the code
```
- Call the constructor of the RegExp object
```
var reg = new RegExp("abc");
Copy the code
```

Correlation regularization method

String methods

split()

Cut the parent string according to the matching string
Demo code

// String methods
var str = "ab kjsfb adah**lkslks d";
// Returns a new string after cutting
// Now the number of Spaces to be cut is determined by your input
// var str1 = str.split(" ");
// Regular expressions can be used for fuzzy matching segmentation
var str1 = str.split(/\s+/);
console.log(str1);
Copy the code

match()

Function: Returns an array of matching results (including the subscript values that were first matched) using a regular expression compared to a string.
Notice (append g)
- Append g(global) to the end of the // delimiter of the regular expression to search globally for the parent string and return all matching strings.
Demo code

/ / the match method
var str = "ab kjsfb aadah**lksalaaaaaadahks d";
// Exact match
// var str1 = str.match("adah");
// Fuzzy match: returns only the first matching string in the parent string
// add g to indicate global query. All matching results will be stored in array
// + indicates that 0~ multiple a can be the same
var str1 = str.match(/a+/g);
console.log(str1);
Copy the code

search()

Function: Searches a regular expression or a specified string and returns the subscript of the first occurrence of a match. No match returns -1.
The difference: It is similar to Indexof except that indexof cannot use regular expressions.
Demo code

/ / search method
var str = "ab kjsfb aadah**lksalaaaaaadahks d";
var str1 = str.search(/a+/); / / 0
var str2 = str.search(/m+/);  // -1
console.log(str1);
Copy the code

replace()

Function: Compares a string with a regular expression, and then replaces the matched string with a new one.
Notice (append g)
- Append g(global) to the end of the // delimiter of the regular expression to search for the parent string globally and return all matching strings for replacement.
Demo code

/ / the replace method
var str = "Happy new Year";
// Exact substitution, only the first search will be replaced
var str1 = str.replace("new"."Yeah"); // Happy Yeah Year
// Fuzzy matching
var str2 = str.replace(/a/g."Y"); // HYppy new YeYr 
console.log(str2);
Copy the code

Regular expression method

exec()

Function: Performs a regular match in the target string.
Demo code

// exec method: Returns an array-like object containing the subscript of the first matching string found
// Global modifier or no global modifier will stop only after the first one is found
var reg = /abc/;
var result = reg.exec("hfbvaaaaabckkaskabc");
console.log(result);

// The match was not successful
var reg = /mmm/;
var result = reg.exec("hfbvaaaaabckkaskabc");
console.log(result); // null
Copy the code

test()

Function: Tests whether the current re matches the target string (returns true or false).
Demo code

// test Method: Checks whether the string meets the matching rules of the regular expression
var reg = /abc/;
console.log(reg.test("aaaddddddsfabcklsdn")); // true
Copy the code

Composition of a regular expression

It consists of ordinary characters and special characters called metacharacters.
- Ordinary characters include uppercase letters and numbers.
- Metacharacters have special meanings.
Special characters: special characters have a () is commonly used in javascript [] {} \ ^ $|? * +.
- To match such characters, you must use the transfer symbol \ as :(,^,\
Predefined special Characters
- \t /\t/ 制表符 eg: console.log(/\t/.test(‘ ‘))
- \n/ \n return eg: console.log(/\n/.test(‘ aaa ‘)
bbb`));
- \f/ \f/ page feed character
- \ \ b/b Spaces

Special note: Spaces, tabs, and newlines can also be detected?

/ / space
var reg = /\s/;
console.log(reg.test("jh c")); // true

/ / a newline character
var reg = /\n/;
// If double quotation marks are used to press newlines, the console will report an error
// Therefore, we change to backquotes
console.log(reg.test(`a
c`)); // true
console.log(reg.test("a
c")); / / an error

/ / tabs
var reg = /\t/;
// the output is: false
console.log(reg.test("bbbjh c")); // false
// Then replace test with a space and print true
var reg = /\s/;
console.log(reg.test("bbbjh c")); // true
Copy the code

Regular terminology

Character set

The set of possible characters represented by [], in which multiple possible matching strings can be arranged. The entire character set needs to match only one character of the string.
[] -> select one of the characters in the string.

Simple classes: Multiple characters of a re correspond to one character, which can be enclosed by [] so that the whole [] corresponds to one character [ABC].

Demo code

// 1. Simple class: multiple possible matching characters are written together consecutively, as long as one of them satisfies
console.log(/[abc]/.test("obmmmmm")); // true
console.log(/[abc]/.test("omm")); // false
Copy the code

Range class: sometimes there are too many matching things, and the same type, all input is too troublesome, can add a line in the middle [0-9], [a-z].

Demo code

// 2. Scope class
// [a-z]: indicates any letter from a to Z
console.log(/[a-z]/.test("6o468mm13")); // true
Copy the code

Negative class: [] is preceded by a metacharacter, indicating that the match cannot be the character inside the parenthesis. [^ a], [^ 0-9]

Demo code

// 3
// [^a-z]: indicates that only one value in the string is not between a and z
console.log(/[^a-z]/.test("123m")); // true
console.log(/ [^ 0-9].test("omm")); // true
Copy the code

Composite classes: Allow brackets to match different types of single characters [0-9a-b].

Demo code

// 4
console.log(/[0-9a-z]/.test("o9zm")); // true
console.log(/[^0-9a-z]/.test("onm")); // false
console.log(/[^0-9a-z]/.test("onAm")); // true
Copy the code

Modifiers (written outside of //)

G modifier (for global lookup)

Used to perform global matches (find all matches instead of stopping after the first match is found)
Demo code

console.log('12a34b56c78d90e'.match(/\d+/g));
Copy the code

I modifier (case insensitive)

Used to perform case-insensitive matching.
Demo code

// I modifier
  console.log('aabAAcAa'.match(/aa/gi)); //["aa", "AA", "Aa"]
Copy the code

Note: the I and g modifiers can be used together

The border

^ at the beginning

Note: do not immediately follow the left middle bracket
Demo code

// ^ Indicates the beginning of the restriction. The result of the following re content match must appear at the beginning of the string
var str = "Hello javaScript";
console.log(/^Hello/.test(str)); // true
Copy the code

$end

Demo code

// $indicates the limit end. The result of the preceding re content match must appear at the end of the string
console.log(/Script$/.test(str)); // true
Copy the code

Predefined classes

.

Equivalent to: [^\n\r]
Function: Any character except line feed and carriage return
Demo code

Any character except newline and carriage return
console.log(/ ^. + $/.test("aa$$$$###")); // true
console.log(/ ^. + $/.test(`aa$$
$$##`)); // false
// When writing, be sure to write + or *,
// otherwise express one character match one character
console.log(/ /..test(`
`)); // true
Copy the code

\d

Equivalent to [0-9]
Function: Numeric characters
Demo code

// \d means [0-9]
console.log(/^\d+$/.test("8726825")); // true
console.log(/\d+/.test("872mnl6825")); // true
Copy the code

\D

Equivalent to [^ 0-9]
Non-numeric character
Demo code

// \D = [^0-9]
console.log(/\D+/.test("mnfbs")); // true
console.log(/\D+/.test("m64nfbs")); // true
Copy the code

\s

Equivalent to [\t\n\x0B\f\r]
Function: Whitespace characters
Demo code

// \s whitespace character
console.log(/^\s+$/.test(` `)); // true
Copy the code

\S

Equivalent to [^ \t\n\x0B\f\r]
Function: Non-whitespace characters
Demo code

// \S non-whitespace characters
console.log(/^\S+$/.test("sgjf;"));  // true
Copy the code

\w

Equivalent to [a zA – Z_0-9]
Function: Word characters (all letters/numbers/underscores)
Demo code

// \w word letters (all letters, numbers, underscores)
console.log(/^\w+$/.test("alkfh_aj73438")); // true
Copy the code

\W

Equivalent to [^ a – zA – Z_0-9]
Function: non-word characters
Demo code

// \W non-word letters
console.log(/^\W+$/.test(# # $$$) "()")); // true
Copy the code

quantifiers

{n} hard quantifier

Zero or n
Demo code

console.log(/^\d{5}$/.test("12345")); // true
Copy the code

{n,m} soft quantifier

At least n occurrences but no more than m occurrences (no Spaces in between)
Demo code

var reg = / ^ \ d {3, 8} $/;
console.log(reg.test("465")); // true
console.log(reg.test("97583")); // true
console.log(reg.test("0927372835")); // false
Copy the code

{n,} soft quantifier

Appear at least n times (upgraded version of +)
Demo code

var reg = /^\d{3,}$/;
console.log(reg.test("092739843598572835")); // true
Copy the code

? Soft quantifiers

Zero or one occurrence
Demo code

/ /? Zero or one occurrence
var reg = /^\d? $/;
console.log(reg.test("")); // true
console.log(reg.test("1")); // true
Copy the code

* Soft quantifiers

Zero or more occurrences (any occurrence)
Demo code

// * Occurs 0 or more times
var reg = /^\d*$/;
console.log(reg.test("")); // true
console.log(reg.test("194857")); // true
Copy the code

+ soft quantifier

One or more occurrences (at least one)
Demo code

// + occurs 1 or more times
var reg = /^\d+$/;
console.log(reg.test("")); // false
console.log(reg.test("194857")); // true
Copy the code

grouping

Quantifiers, though, help us deal with a row of closely connected characters of the same type.
But this is not enough, use brackets to indicate range selection, and braces to indicate number of repetitions. If you want to get repeated characters, you need braces to group them.
Demo code

console.log(/(bye){2}/.test("byebye")); // true
Copy the code

Or operator

Can use a vertical bar (|) character representation or relationship.
Demo code

// Matches a or BCD characters
console.log(/a|bcd/.test("a")); // true
// Match ab or CD that occurs once or more
console.log(/(ab)+|(cd)+/.test("absldfh")); // true
Copy the code

The practical application

// If you want to select only one of the two rules in a re,
// Can't include any other beginning or end, you need to put the or into the group
var reg = /^(ab|cd)$/;
console.log(reg.test("abcd")); // false
console.log(reg.test("ab"));  // true
console.log(reg.test("cd"));  // true
Copy the code

Function: In a small range, when only one of them can be matched, you need to add parentheses to limit the range to the entire expression.

Group back references

The backreference identifier numbers the substrings captured by the matching group in the regular expression.
Reference by “\ number (in the expression)”, “$number (outside the expression)”. Count from 1.
Demo code

//1. \ number (in expression)
console.log(/(bye)\1/.test("byebye")); //true
console.log(/(bye)\1/.test("bye")); //false
// 2. $number
console.log('123 * 456'.replace(/(\d{3})\*(\d{3})/.'$2 * $1')); / / 456 * 123
console.log('123 * 456'.replace(/(\d{3})\*(\d{3})/.function(match,$1, $2){
    return $2 + The '*' + $1;
})); / / 456 * 123
Copy the code

Chinese characters

[u4e00-\u9fa5]
Demo code

[u4e00-U9fa5] [u4e00-U9fa5]
console.log(/^[\u4e00-\u9fa5]+$/.test("Hello Chinese")); // true
Copy the code

Regular expressions for JavaScript web programming

Overview of regular expressions

What is a regular expression

Function of regular expressions

Regular expression testing

Regular expression syntax

Correlation regularization method

String methods

split()

match()

search()

replace()

Regular expression method

exec()

test()

Composition of a regular expression

Special note: Spaces, tabs, and newlines can also be detected?

Regular terminology

Character set

Simple classes: Multiple characters of a re correspond to one character, which can be enclosed by [] so that the whole [] corresponds to one character [ABC].

Range class: sometimes there are too many matching things, and the same type, all input is too troublesome, can add a line in the middle [0-9], [a-z].

Negative class: [] is preceded by a metacharacter, indicating that the match cannot be the character inside the parenthesis. [^ a], [^ 0-9]

Composite classes: Allow brackets to match different types of single characters [0-9a-b].

Modifiers (written outside of //)

G modifier (for global lookup)

I modifier (case insensitive)

Note: the I and g modifiers can be used together

The border

^ at the beginning

$end

Predefined classes

.

\d

\D

\s

\S

\w

\W

quantifiers

{n} hard quantifier

{n,m} soft quantifier

{n,} soft quantifier

? Soft quantifiers

* Soft quantifiers

+ soft quantifier

grouping

Or operator

Group back references

Chinese characters

Related Posts

CSS Containment for rendering optimization

Memory retracted for the V8 engine

Flutter MouseRegion links highlight style only you can think of nothing you can’t do