Getting started with regular expressions in JS

What is a regular expression?
Many programming languages support regular expressions. This article only discusses Regular Expressions in JavaScript.

Create a regular expression
Method 1:

Var reg =/pattern/; Method 2:

Var reg = new RegExp ('pattern'); exec Method for Regular Expressions
Syntax:

Reg.exe c (str); where str is the target string for executing the regular expression.

For example:

<Script type = "text/javascript">
Var reg =/test /;
Var str = 'teststring ';
Var result = reg.exe c (str );
Alert (result );
</Script> the test is output, because the regular expression reg matches the 'test' substring in str ('teststring') and returns it.

We use the following function to perform regular expression matching exercises:

Function execReg (reg, str ){
Var result = reg.exe c (str );
Alert (result );
} The function accepts a regular expression parameter reg and a target string parameter str. After execution, alert returns the matching result between the regular expression and the string.

The above example is tested using this function:

<Script type = "text/javascript">
Function execReg (reg, str ){
Var result = reg.exe c (str );
Alert (result );
}
Var reg =/test /;
Var str = 'teststring ';
ExecReg (reg, str );
</Script> the above example uses the test in the regular expression to match the test in the string, which is boring. The same task can be completed using the indexOf method. With regular expressions, more powerful functions are required:

One tablet, two tablets, three or four slices.
The above subtitles are translated into regular {1}, {2}, {3, 4}, {1 ,}.

C {n}
{1} indicates a meaning.

/C {1}/only one c can be matched.

/C {2}/matches two consecutive c.

And so on,

/C {n}/matches n consecutive c.

See the following example:

Reg =/c {1 }/;
Str = 'cainiao ';
ExecReg (reg, str); Return Result c

Reg =/c {2 }/;
Str = 'cainiao ';
ExecReg (reg, str); returns null, indicating that no matching is successful.

Reg =/c {2 }/;
Str = 'ccvc cool free ';
ExecReg (reg, str); returns cc.

C {m, n}
C {3, 4} indicates three consecutive c or four c.

For example
Reg =/c {3, 4 }/;
Str = 'ccvc cool free ';
ExecReg (reg, str); returns null, indicating that no matching is successful.

Reg =/c {3, 4 }/;
Str = 'ccctest ';
ExecReg (reg, str); the result returns ccc.

Reg =/c {3, 4 }/;
Str = 'cctest ';
ExecReg (reg, str); the result returns cccc, which indicates that the regular expression will be as many brands as possible. If it can be 3 to 4, it will select one more match.

Reg =/c {3, 4 }/;
Str = 'ccctest ';
ExecReg (reg, str); still matches only 4 c.

From the above example, we can infer that c {m, n} represents m to n c, and m is less than or equal to n.

C {n ,}
C {1,} indicates more than one c. For example:

Reg =/c {1 ,}/;
Str = 'cainiao ';
ExecReg (reg, str); returns c.

Reg =/c {1 ,}/;
Str = 'ccctest ';
ExecReg (reg, str); returns ccccc, again indicating that the regular expression will match as much as possible.

Reg =/c {2 ,}/;
Str = 'cainiao ';
ExecReg (reg, str); returns null, c {2,} indicates more than 2 c, and cainiao only has 1 c.

The above example shows that c {n,} represents at least n c, but not limited to a number.

 

 

*, + ,?
* Indicates 0 or multiple times, equivalent to {0,}, that is

C * and c {0,} are meanings.

+ Indicates one or more times, equivalent to {1,}, that is

C + and c {1,} are meanings.

Last ,? 0 or 1 time, equivalent to {0, 1}, that is

C? And c {0, 1.

Greedy and non-greedy
People are greedy, and so are regular expressions. In the example reg =/c {3, 4}/; str = 'cctest';, we can see that regular expressions will never match three values when four values can be matched. All the regular expressions described above are like this. If they are legal, they will try to match as many characters as possible. This is called greedy mode.

If we want the regular expression to match as few characters as possible, we can add a? symbol after the symbol that represents a number ?. Form:

{N ,}?, *?, + ?, ??, {M, n }?

Let's take an example:

Reg =/c {1 ,}? /;
Str = 'ccccc ';
ExecReg (reg, str); only one c is returned. Although five c can be matched, only one is matched because the regular expression is not greedy.

/^ Starts with and ends with $/
^ Indicates that only the start of the string is matched. See the following example:

 

Reg =/^ c /;
Str = 'vitamin C ';
ExecReg (reg, str); returns null because the string 'vitamin C' does not start with c, so the matching fails.

 

Reg =/^ c /;
Str = 'cainiao ';
ExecReg (reg, str); returns c this time. The matching is successful because cainiao starts with c.

In contrast to ^, $ matches only the characters at the end of the string. For example:

Reg =/c $ /;
Str = 'cainiao ';
ExecReg (reg, str); returns null, indicating that the regular expression cannot find the character c at the end of the string.

Reg =/c $ /;
Str = 'vitamin C ';
ExecReg (reg, str); the result returned this time is c, indicating that the matching is successful.

Click '.'
'.' Matches all characters except the linefeed \ n, for example

Reg = /./;
Str = 'cainiao ';
ExecReg (reg, str); The result shows that the regular expression matches the character c.

 

Reg = /./;
Str = 'blueidea ';
ExecReg (reg, str); this time is B.

Reg =/. + /;
Str = 'blueidea -- classic Forum haok _. ';
ExecReg (reg, str); the result is "blueidea-classic Forum Good _. "That is to say, all characters are matched, including a space, a slide line, and a broken line.

Reg =/. + /;
Reg =/. + /;
Str = 'bbs .blueidea.com ';
ExecReg (reg, str); similarly, the entire string --bbs.blueidea.com is directly returned. Visible "." Also matches "." itself.

 

Reg =/^ ./;
Str = '\ ncainiao ';
ExecReg (reg, str); the result is null and finally fails. The regular expression requires that the first character of the string is not a line break, but the character starts with \ n.

Either. In the regular expression, or, "|"
B | c indicates that B or c is matched.

For example:

Reg =/B | c /;
Str = 'blueidea ';
ExecReg (reg, str); the result is B.

Reg =/B | c /;
Str = 'cainiao ';
ExecReg (reg, str); the result is c.

Reg =/^ B | c. + /;
Str = 'cainiao ';
ExecReg (reg, str); matches the entire cainiao.

Reg =/^ B | c. + /;
Str = 'bbs .blueidea.com ';
ExecReg (reg, str); returns only one B, not the entire string. The above regular expression indicates that B or c. + at the beginning is matched.

Brackets
Reg =/^ (B | c). + /;
Str = 'bbs .blueidea.com ';
ExecReg (reg, str); the result of this operation is the whole string bbs.blueidea.com. After the brackets on the machine, this regular expression indicates that if the string starts with B or c, then match B or c at the beginning and all non-line characters After B or c.

If you have done the experiment, you will find that the returned result is followed by ", B", which is the Matching content of B | c in. The content written in the brackets in the regular expression will be considered as a subregular expression, and the matching results will be recorded for later use. We will ignore this feature for the moment.

Character Set combination [abc]
[Abc] indicates any character in a, B, or c. For example:

Reg =/^ [abc]/;
Str = 'bbs .blueidea.com ';
ExecReg (reg, str); The returned result is B.

Reg =/^ [abc]/;
Str = 'test ';
ExecReg (reg, str); the result is null this time.

We use the following representation in the character set: [a-z], [A-Z], [0-9], indicating lowercase letters, uppercase letters, numbers, respectively. For example:

Reg =/^ [a-zA-Z] [a-zA-Z0-9 _] + /;
Str = 'test ';
ExecReg (reg, str); the result is the entire test, which indicates that the regular expression must start with an English letter, followed by an English letter, number, and underline.

Anti-Character Set combination [^ abc]
^ Indicates the starting part of the regular expression. For example,/^ c/indicates the starting part of the regular expression. However, in the character set and medium, it indicates a meaning similar to "Non, for example, [^ abc] indicates that it cannot be a, B, or c. For example:

Reg =/[^ abc]/;
Str = 'blueidea ';
ExecReg (reg, str); returns l because it is the first non-abc character (that is, the first B does not match ). Similarly:

Reg =/[^ abc]/;
Str = 'cainiao ';
ExecReg (reg, str); returns I. The first two characters are in the [abc] set.

[^ 0-9] indicates a non-digit, [^ a-z] indicates a non-lowercase letter, and so on.

Boundary and non-Boundary
\ B indicates the boundary, that is, only the start and end of a string are counted. For example,/\ bc/indicates the starting c of the string or the ending c. See the following example:

Reg =/\ bc /;
Str = 'cainiao ';
ExecReg (reg, str); returns the Result c. Matches the c character at the left boundary.

Reg =/\ bc /;
Str = 'vitamin C ';
ExecReg (reg, str); still returns c, but this time returns c on the right boundary.

Reg =/\ bc /;
Str = 'bcb ';
ExecReg (reg, str); this match failed because the c in the bcb string is in the middle and neither left nor right.

\ B corresponding to \ B indicates non-boundary. For example:

Reg =/\ Bc /;
Str = 'bcb ';
ExecReg (reg, str); this time it will be successfully matched to c in bcb ,. However

Reg =/\ Bc /;
Str = 'cainiao ';
ExecReg (reg, str); returns null. Because \ B tells the regular expression that only the non-boundary c is matched.

Numbers and non-Numbers
\ D indicates the meaning of a number. On the contrary, \ D indicates a non-number. For example:

Reg =/\ d /;
Str = 'cainiao8 ';
ExecReg (reg, str); returns 8 as the first numeric character.

Reg =/\ D /;
Str = 'cainiao8 ';
ExecReg (reg, str); returns c, the first non-numeric character.

Blank
\ F matches the linefeed, \ n matches the linefeed, \ r matches the carriage return, \ t matches the tab, and \ v matches the vertical tab.

\ S matches a single space, which is equivalent to [\ f \ n \ r \ t \ v]. For example:

Reg =/\ s. + /;
Str = 'this is a test String .';
ExecReg (reg, str); returns "is a test String.", which indicates matching the first space and all the subsequent non-line characters.

Similarly, \ S indicates non-space characters.

Reg =/\ S + /;
Str = 'this is a test String .';
ExecReg (reg, str); the matching result is This. After the first space is met, the regular expression stops matching.

Word character
\ W represents a word character, equivalent to a character set in combination with [a-zA-Z0-9 _]. For example:

Reg =/\ w + /;
Str = 'blueidea ';
ExecReg (reg, str); returns the complete blueidea string because all characters are word characters.

Reg =/\ w + /;
Str = '. classname ';
ExecReg (reg, str); The result shows that the className matches the string, only the first "." -- the unique non-word character does not match.

Reg =/\ w + /;
Str = 'How about Chinese? ';
ExecReg (reg, str); it does not work if you try to match Chinese characters with word characters. The return value is null.

\ W represents non-word characters, equivalent to [^ a-zA-Z0-9 _]

Reg =/\ W + /;
Str = 'How about Chinese? ';
ExecReg (reg, str); returns the complete string because, whether it is Chinese or "?" Both are non-word characters.

Reverse reference
The format is as follows:/(sub-Regular Expression) \ 1/

Examples are still used to illustrate:

1.

Reg =/\ w /;
Str = 'blueidea ';
ExecReg (reg, str); returns B.

2.
Reg =/(\ w )/;
Str = 'blueidea ';
ExecReg (reg, str); returns bl, B, l

Bl is the content of the entire regular expression matching, B is the content of the sub-Regular Expression matching in the first bracket, and l is the content of the second matching bracket.

3.
Reg =/(\ w) \ 1 /;
Str = 'blueidea ';
ExecReg (reg, str); returns null. Here "\ 1" is called reverse reference, which indicates the Matching content of the regular expression in the first square brackets. In the above example, the (\ w) in the first bracket matches B, so "\ 1" also indicates B, and B cannot be found in the remaining string.

Compared with the second example, we can find that "\ 1" is equivalent to "1st matching brackets", rather than "content of the first bracket ".

Reg =/(\ w) \ 1 /;
Str = 'bbs .blueidea.com ';
ExecReg (reg, str); this regular expression matches bb.

Similarly, we can use several reverse references with several subregular expressions. For example:

Reg =/(\ w) \ 2 \ 1 /;
Str = 'woow ';
ExecReg (reg, str); will match successfully, because the first brace matches w, the second brace matches o, and \ 2 \ 1 indicates ow, exactly match the last two characters of the string.

Brackets (2)
We have discussed the issue of parentheses before. See the example below:

Reg =/^ (B | c). + /;
Str = 'bbs .blueidea.com ';
ExecReg (reg, str); this regular expression is used to match only strings starting with B or c. It always matches with line breaks,. As we can see above, we can use "\ 1" to reverse reference the content matched by the sub-Regular Expression in this bracket. The exec method also saves the matching result of the regular expression to the returned result.

Matching results of sub-regular expressions are not recorded
Use an image like (? : Pattern) to avoid saving matching results in parentheses. For example:

Reg =/^ (? : B | c). + /;
Str = 'bbs .blueidea.com ';
ExecReg (reg, str); you can see that the returned results do not include the multi-match content of the regular expression in the brackets.

Likewise, reverse reference is hard to make:

Reg =/^ (B | c) \ 1 /;
Str = 'bbs .blueidea.com ';
ExecReg (reg, str); returns bb, B. Bb is the content that the entire regular expression matches, while B is the content that the first sub-Regular Expression matches.

Reg =/^ (? : B | c) \ 1 /;
Str = 'bbs .blueidea.com ';
ExecReg (reg, str); returns null. Because there is no matching content in the brackets, there is naturally no way to reverse reference.

Forward pre-Query
Form :(? = Pattern)

The so-called forward pre-query means that the string to be matched must be followed by pattern!

We know that the regular expression/cainiao/will match cainiao. Similarly, it matches cainiao in cainiao9. However, we may expect that cainiao can only match cainiao in cainiao8. At this time, you can write as follows:/cainiao (? = 8)/, view two instances:

Reg =/cainiao (? = 8 )/;
Str = 'cainiao9 ';
ExecReg (reg, str); returns null.

Reg =/cainiao (? = 8 )/;
Str = 'cainiao8 ';
ExecReg (reg, str); matches cainiao.

It should be noted that the content in the brackets does not participate in the real match, but only checks whether the subsequent characters meet the requirements. For example, the preceding regular expression returns cainiao instead of cainiao8.

Let's look at two examples:

Reg =/blue (? = Idea )/;
Str = 'blueidea ';
ExecReg (reg, str); matches blue instead of blueidea.

Reg =/blue (? = Idea )/;
Str = 'bluetooth ';
ExecReg (reg, str); returns null because blue is not followed by idea.

Reg =/blue (? = Idea )/;
Str = 'incluthidea ';
ExecReg (reg, str); returns null.

?!
Form (?! Pattern) and? = On the contrary, the string must not be followed by a pattern. Take the following example:

Reg =/blue (?! Idea )/;
Str = 'blueidea ';
ExecReg (reg, str); returns null. Because of Regular Expression requirements, blue cannot be followed by idea.

Reg =/blue (?! Idea )/;
Str = 'bluetooth ';
ExecReg (reg, str); then blue is returned successfully.

Match metacharacters
First, we need to figure out what is metacharacters? We used *, + ,? Such symbols have special meanings in regular expressions. Similar Characters with special functions are called metacharacters. For example

Reg =/c */; indicates that there is any c, but what if we really want to match the 'C * 'string? You only need to escape *, as shown below:

Reg =/c \*/;
Str = 'C *';
ExecReg (reg, str); returns the matched string: c *.

Similarly, to match other metacharacters, you only need to add "\" to the front.
Modifier of the Regular Expression
Global match, modifier g
Format:/pattern/g

Example: reg =/B/g;

The role of g will be discussed later. First, let's look at the two modifiers.

Case-insensitive, modifier I
Format:/pattern/I

Example:

Var reg =/B /;
Var str = 'bbs ';
ExecReg (reg, str); returns null because it is case insensitive.

Var reg =/B/I;
Var str = 'bbs ';
ExecReg (reg, str); matches B, which is the role of the I modifier.

The end of the first line, modifier m
Format:/pattern/m

The m modifier is used to modify the functions of ^ and $ in the regular expression, so that they indicate the beginning and end of the line, respectively. For example:

 

Var reg =/^ B /;
Var str = 'test \ nbbs ';
ExecReg (reg, str); matching failed because the string starts with no B characters. However, after the m modifier is added:

Var reg =/^ B/m;
Var str = 'test \ nbbs ';
ExecReg (reg, str); matches B, because after the m modifier is added, ^ indicates the first line. Because bbs is at the first of the second line of the string, so it can be matched successfully.

Exec method details
Exec method Return Value
The exec method does not actually match the result string, but an object. simply modify the execReg function to verify this by doing an experiment:

Function execReg (reg, str ){
Var result = reg.exe c (str );
Alert (typeof result );
}
Var reg =/B /;
Var str = 'bbs .bblueidea.com ';
ExecReg (reg, str); The result shows that the type of result is object. It is an array-like object. You can use for in to know its property: index input 0. Index indicates matching the index in the original string, and input indicates the input string;

0 indicates only one matching result. You can use subscript 0 to reference this matching result. This quantity may change. We can know the total number of matching results through the length attribute of the returned value.

Based on the analysis of the returned values, modify the execReg function as follows:

Function execReg (reg, str ){
Var result = reg.exe c (str );
Document. write ('index: '+ result. index +' <br/>'
+ 'Input: '+ result. input +' <br/>'
);
For (I = 0; I <result. length; I ++ ){
Document. write ('result ['+ I +']: '+ result [I] +' <br/> ')
}
} Experiment now:

Var reg =/\ w /;
Var str = 'bbs .bblueidea.com ';
ExecReg (reg, str); the result is as follows:

Index: 0
Input: bbs.bblueidea.com
Result [0]: B
The input string is bbs.bblueidea.com;

The index of matched B in the original string is 0.

The matching result of the regular expression is A, B;

Var reg =/(\ w) (. + )/;
Var str = 'bbs .bblueidea.com ';
ExecReg (reg, str); the result is:

Index: 0
Input: bbs.bblueidea.com
Result [0]: bbs.bblueidea.com
Result [1]: B
Result [2]: B
Result [3]: s.bblueidea.com

As shown in the preceding two examples, the returned object [0] is the content matched by the entire regular expression. The subsequent element is the Matching content of each sub-regular expression.

Update the regular expression using the exec Method

The exec method may update the original regular expression while returning the result object. It depends on whether the regular expression has a g modifier. Let's take a look at two examples:

 

Var reg =/B /;
Var str = 'bbs .blueidea.com ';
ExecReg (reg, str );
ExecReg (reg, str); the result is as follows:

Index: 0
Input: bbs.blueidea.com
Result [0]: B
Index: 0
Input: bbs.blueidea.com
Result [0]: B

That is to say, the two matching results are exactly the same. From the index, we can see that all matching results are the first B characters of the string.

Let's take a look at how g's regular expression works:

Var reg =/B/g;
Var str = 'bbs .blueidea.com ';
ExecReg (reg, str );
ExecReg (reg, str); the result is as follows:

Index: 0
Input: bbs.blueidea.com
Result [0]: B
Index: 1
Input: bbs.blueidea.com
Result [0]: B

It can be seen that the second matching is the second B of the string. This is the role of the g modifier. The following describes how exec treats g and non-g Regular Expressions differently.

If g is not set for the regular expression, the exec method will not affect the regular expression. If g is set, the lastIndex attribute of the regular expression will be updated after exec is executed, indicates the index of the next character of the matched string after this match. The next time you use this regular expression to match the string, the match starts from the last lastIndex attribute, that is why the results of the above two examples are different.

Test Method
The test method only checks whether str can be matched and returns a Boolean value to indicate whether str is successful. Create a simple test function:

Function testReg (reg, str ){
Alert (reg. test (str ));
} Instance 1

Var reg =/B /;
Var str = 'bbs .blueidea.com ';
TestReg (reg, str); success, Output true.

Instance 2

Var reg =/9 /;
Var str = 'bbs .blueidea.com ';
TestReg (reg, str); failed. false is returned.

Use the string method to execute a regular expression
Match Method
Format: str. match (reg );

Similar to the exec method of a regular expression, this method returns an object similar to an array with the input and index attributes. We define the following function for testing:

Function matchReg (reg, str ){
Var result = str. match (reg );
If (result ){
Document. write ('index: '+ result. index +' <br/>'
+ 'Input: '+ result. input +' <br/>'
);
For (I = 0; I <result. length; I ++ ){
Document. write ('result ['+ I +']: '+ result [I] +' <br/> ')
}
} Else {
Alert ('null: matching failed! ')
}
} Example:

Var reg =/B /;
Var str = 'bbs .blueidea.com ';
MatchReg (reg, str); the result is as follows:

Index: 0
Input: bbs.blueidea.com
Result [0]: B

The result is the same as that of exec.

However, if the regular expression is configured with a g modifier, the behavior of exec and match may be different. See the following example:

Index: undefined
Input: undefined
Result [0]: B
Result [1]: B
Result [2]: B

The regular expression with the g modifier set does not stop after a successful match, but continues to find all the matching characters. The returned results include three B. However, the input and index information is not provided.

 

Replace Method
Format: str. replace (reg, 'new str ');

It uses the ''new str "code for the part matching reg in the str string. It is worth noting that the original string is not modified, but is returned as the return value. Example:

Var reg =/B /;
Var str = 'bbs .blueidea.com ';
Var newStr = str. replace (reg, 'C ');
Document. write (newStr); the result is cbs.blueidea.com, and only the first B is replaced with c.

 

Var reg =/B/g;
Var str = 'bbs .blueidea.com ';
Var newStr = str. replace (reg, 'C ');
Document. write (newStr); Output ccs.clueidea.com

Because the g modifier is set, all B is replaced.

 

Var reg =/\ w +/g;
Var str = 'bbs .blueidea.com ';
Var newStr = str. replace (reg, 'word ');
Document. write (newStr); output:

Word.

Use the $ Reference Sub-Regular Expression to match the content in the replace function.
Just like in a regular expression, we can use \ 1 to reference the content matched by the first sub-regular expression, we can also use $1 to reference the same content in the replace character of the replace function.

Let's look at an example:

Var reg =/(\ w +). (\ w +). (\ w + )/;
Var str = 'bbs .blueidea.com ';
Var newStr = str. replace (reg, '$1. $1. $1 ');
Document. write (newStr); the output result is:

Bbs. bbs. bbs

First, we know that the first sub-Regular Expression matches bbs, so $1 represents bbs. Then we set the replacement string to '$1. $1. $ 1', which is actually "bbs. bbs. bbs ". Similarly, $2 is blueidea, and $3 is com.

 

Let's look at an example. The order of the two words before and after spaces is reversed.

Var reg =/(\ w +) \ s (\ w + )/;
Var str = 'cainiao gaoshou ';
Var newStr = str. replace (reg, '$2 $1 ');
Document. write (newStr); the result is: gaoshou cainiao, that is, the words before and after spaces are exchanged.

Because $ has a special meaning in the Replace text, if we want to use $, We need to write it as $, for example:

Var reg =/(\ w +) \ s (\ w + )/;
Var str = 'cainiao gaoshou ';
Var newStr = str. replace (reg, '$ ');
Document. write (newStr); Result: $.

Search Method and split method
Similarly, regular expressions can also be used in the search and split Methods of strings. The format is as follows:

Str. search (reg );
Search returns the location where the regular expression matches for the first time. Example:

Var reg =/idea /;
Var str = 'blueidea ';
Var pos = str. search (reg );
Document. write (pos); the result is 4.

The following example shows the first non-word character:

Var reg =/\ W /;
Var str = 'bbs .blueidea.com ';
Var pos = str. search (reg );
Document. write (pos); the result is 3, that is, the position of the vertex.

Str. split (reg, 'secret ');
Split returns the split array, for example:
Var reg =/\ W /;
Var str = 'bbs .blueidea.com ';
Var arr = str. split (reg );
Document. write (arr); Result: bbs, blueidea, com. It can be seen that the array is divided by non-word characters into arrays with three elements.

Var reg =/\ W /;
Var str = 'HTTP: // www.baidu.com /';
Var arr = str. split (reg );
Document. write (arr. length + '<br/> ');
Document. write (arr); the result is:

7
Http, www, baidu, com,

It can be seen that the string is divided into arrays with seven elements, including three elements that are empty strings.

Excerpted from the column of wandering hacker