Learning Objectives:

  • Say what regular expressions do
  • Write simple regular expressions
  • Use regular expressions to validate forms
  • Replace content with regular expressions

1. Overview of regular expressions

Regular expressions are patterns used to match combinations of strings. In JavaScript, regular expressions are also objects.

1.1 Main Functions:

Regex are usually used to retrieve, replace, match, replace, and extract text that combines patterns (rules).

1.2 Features of regular expressions

It is flexible, logical, and functional enough to quickly achieve complex strings control in a very simple manner. For the uninitiated, actual development can be a bit tricky, as it usually involves copying regular expressions written directly, but requires that you know how to use regular expressions and modify them to suit your needs.

2. Use regular expressions in JS

Var RegExp = new RegExp(/123/); console.log(regexp); Var rg = /123/; Console. log(rg.test(123)); // 3. console.log(rg.test('abc')); </script> // Print result: 26- regular expression HTML: 15/123/26 - regular expression HTML :19 true 26- Regular expression HTML :20 falseCopy the code

3. Special characters in the regular expression

3.1 Composition of regular expressions

A regular expression can consist of simple characters or a combination of simple and special characters. Special characters are also called metacharacters. Special characters, such as ^,$, and +, are special characters with special meanings in regular expressions

3.2 the boundary character

A boundary character (position character) in a regular expression is used to indicate the position of a character. It consists of two characters.

Boundary operator instructions
^ The text that matches the beginning of the line (with whom to start)
$ The text that matches the end of the line (where it ends)

If ^ and $are together, it must be an exact match

<script> // boundary var rg = /^ ABC /; // The text content must start with ABC console.log(rg.test(' ABC ')); // true console.log(rg.test('abcd')); // true console.log(rg.test('ab')); // false console.log(rg.test('aabc')); // false var reg = /cd$/; // The text must end with CD console.log(reg.test('abcd')); // true console.log(reg.test('asdacd')); // true console.log(reg.test('dasdcf')); Var reg1=/^ ABC $//Copy the code

3.3 character classes

Square brackets indicate that you have a list of characters to choose from, and you only need to match one of them.

1. /[ABC]/ (choose one)

Return true for any containing a or b or c

2. /^[a-z]$/

Returns true for any of the 26 letters

3. /^[a-za-z0-9]$/

The above method limits lowercase letters. This method can match both uppercase and lowercase letters and digits successfully

4. /^[^ a-za-z0-9]$/

This method is the reverse of the third method, not the characters that match successfully.

3.4 quantifier operator

quantifiers instructions
* Repeat zero or more times
+ Repeat once or more
? Repeat zero times or once
{n} Repeated n times
{n,} Repeat n times or more
{n,m} Repeat n or m times 
Var reg=/^a*$/ a; var reg=/^a*$/ a; $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$Copy the code

3.5 The main functions of quantifiers

Sets the number of occurrences of a pattern

Var reg =/^[a-za-z0-9_ -]$/ var reg =/^[a-za-z0-9_ -]$/ var reg1 =/^[a-za-z0-9_ -]{6,16}$/ {6,16} with no Spaces in betweenCopy the code

Example: User name authentication

3.6 Predefined Classes

Predefined classes are shorthand for some common patterns.

Predefined classes instructions
\d Matches any number between 0 and 9
\D Matches characters other than 0 to 9
\w Matches any letters, digits, and underscores
\W Characters other than \w
\s Matching Spaces include newlines, tabs, Spaces, etc. Equivalent to [\t\r\n\v\f]
\S Matches characters that are not Spaces

4. Substitutions in regular expressions

The replace() method replaces a string with either a string or a regular expression

HTML part

</textarea> <div class='geshi'>Copy the code

JS part

var text = document.querySelector('textarea'); var btn =document.querySelector('button') var div=document.querySelector('div') btn.onclick=function(){ Div. InnerHTML = text. The value. The replace (/ passion/g, "* *"); }Copy the code