Detailed explanation of JavaScript Regular Expressions

The regular expression is a sophisticated tool that is often used to search and replace strings. The JavaScript language references Perl and provides regular expression-related modules, which are very useful during development, in some class libraries or frameworks, such as jQuery, there are a large number of regular expressions. Therefore, learning Regular Expressions well is a basic requirement for improving development skills. This day, the blogger will give a detailed summary of the knowledge about regular expressions. I hope that unfamiliar students will be able to master the principles and applications of regular expressions.

In JS, there are two ways to create a regular expression: one is the literal method and the other is the constructor method, as shown below:

Var regex =/\ w +/; // or var regex = new RegExp ('\ w + ');

It may be noted that the literal is much simpler than the constructor. \ w represents a word and matches a single letter, number, or underline. When RegExp constructor is used, our regular expression is changed to "\ w", because a backslash \ is to be expressed in the string, and we need to escape it, that is, add an escape character \ in front \. As we all know, to express a regular expression that matches the backslash \ in a literal regular expression, you only need to write it as \, but express this regular expression in the string, it looks like "\\\\", because the first two in the string represent a backslash \, the last two also represent a backslash \, and eventually at the regular level, the result is \\.

You can add some suffix modifiers for the above two creation forms. These modifiers can be used individually or in combination:

/\w+/g; // global search/\w+/i; // ignore case/\w+/m; // multi-line/\w+/u; // unicode/\w+/y; // sticky/\w+/gi;new RegExp('\\w+', 'gi');

From the perspective of English comments, I believe everyone knows a little about it. Note the u and y modifiers. They are new features of ES6. The utable indicates that Unicode mode is enabled, it is particularly useful for matching Chinese characters, while y is sticky, which indicates "Adhesion". Similar to g, y is a global match, but they are also different. We will introduce them later.

Regular Expressions

How can I use a regular expression object? The regular expressions and strings in JS provide corresponding methods in the prototype. Let's take a look at the two methods in the regular expression prototype:

RegExp. prototype. test (str );
RegExp.prototype.exe c (str );

The preceding test () and exec () methods both need to input a string to search and match the string. The difference is that the test () method returns true or false, whether the string matches the regular expression, while the exec () method returns an array of matching results when matching. If not, only one null value is returned. Let's see the difference:

// RegExp#test()var regex = /hello/;var result = regex.test('hello world');   // true// RegExp#exec()var regex = /hello/;var result = regex.exec('hello world');   // ['hello']

For the exec () method, if the regular expression contains a capture group, it will appear in the result array after matching:

// (Llo) is a capture group var regex =/he (llo)/; var result = regex.exe c ('Hello World'); // ['hello ', 'llo']

During development, the test () method is generally used for user input verification, such as mailbox verification and mobile phone number verification, while the exec () method is generally used to obtain valuable information from specific content, for example, you can obtain the ID and email type from the user's email input and the location of the phone number.

String-related methods

The above are two methods in the regular expression prototype. Now let's take a look at the available methods available in the string prototype:

String.prototype.search(regexp);String.prototype.match(regexp);String.prototype.split([separator[, limit]]);String.prototype.replace(regexp|substr, newSubStr|function);

Let's talk about the String # search () method. It will match the String based on the regular parameters. If the match is successful, the index at the first match will be returned. If the match fails, -1 is returned.

// String#search()'hello world'.search(/hello/);    // 0'hello world'.search(/hi/);       // -1

The String # match () method is similar to the RegExp # exec () method and returns an array of results. The difference is that if the regular parameters of String # match () contain the global tag g, only matched substrings are displayed in the result, and the capture group is ignored. This is different from RegExp # exec. See the following code:

// String # match () 'Hello hello '. match (/he (llo)/); // ['hello', 'llo'] // String # match () the capture group 'Hello hello' is discarded when a global g modifier is encountered '. match (/he (llo)/g); // ['hello', 'Hello'] // RegExp # exec () still contains the capture group/he (llo) /g.exe c ('Hello hello'); // ['hello', 'llo']

Therefore, if you need to always return the capture group as the result, you should use the RegExp # exec () method instead of the String # match () method.

Next, let's talk about the String # split () method. This method is used to split strings and return an array containing its substrings. The separator and limit parameters are optional, separator can be specified as a string or regular expression. limit specifies the maximum number of returned results. If separator is omitted, the array result of this method only contains its own source string. If sparator specifies an empty string, the source string is separated by characters; if the separator is a non-empty string or regular expression, the method splits the source string based on this parameter. The following code demonstrates the use of this method:

// String # split () 'Hello '. split (); // ["hello"] 'Hello '. split (''); // [" h "," e "," l "," l "," o "] 'Hello '. split ('', 3); // [" h "," e "," l "] // specify a non-empty string var source = 'Hello world '; var result = source. split (''); // [" hello "," world "] // or use the regular expression var result = source. split (/\ s/); // ["hello", "world"]

If separtor is a regular expression that contains a capture group, the capture group will also appear in the result array:

// String # split () Regular capture group var source = 'matchandsplits '; var result = source. split ('and'); // ["match", "split"] var result = source. split (/and/); // ["match", "split"] // capture group var result = source in the regular expression. split (/(and)/); // ["match", "and", "split"]

Finally, we will introduce the String # replace () method, which performs both search and replace operations.

From the above function signature, this method will accept two parameters: the first parameter can be a regular expression or a string, both of which indicate the substring to be matched; the second parameter can be used to specify a string or a function. If a string is specified, this string will replace the matched substring. If a function is specified, then, the return value of the function replaces the matched substring.

The String # replace () method returns a new replaced String. The following describes how to use the replace method:

// String # replace () var source = 'matchandsplitandreplace '; var result = source. replace ('and', '-'); // "match-splitandreplace" // or var result = source. replace (/and/, function () {return '-';}); // "match-splitandreplace"

From the code above, we can see that 'and' is replaced with '-', but we also note that only the first 'and' is replaced, and the latter is not processed. Here we need to understand that the String # replace () method only replaces the matching String that appears for the first time. If we need to replace it globally, we need to specify the first parameter as a regular expression, append the global g modifier as follows:

// String # replace () Global replacement var source = 'matchandsplitandreplace '; var result = source. replace (/and/g, '-'); // "match-split-replace" var result = source. replace (/and/g, function () {return '-';}); // "match-split-replace"

Beginners may be confused when they see the code above. It is quite easy to directly specify a string for the second parameter. Why should we use a function and then return a value. Let's take a look at the following example and we will know:

// String # replace () replace function parameter list var source = 'matchandsplitandreplace'; var result = source. replace (/(a (nd)/g, function (match, p1, p2, offset, string) {console. group ('match: '); console. log (match, p1, p2, offset, string); console. groupEnd (); return '-';}); // "match-split-replace"

In the code above, the first parameter is a regular expression, which contains two capture groups (and) and (nd). The second parameter specifies an anonymous function, and its function list contains some parameters: match, p1, p2, offset, and string match the matched substring, the first capture group, the second capture group, the index of the matched substring in the source string, and the source string respectively, we can call this anonymous function "replacer" or "replace function". In the parameter list of the replace function, match, offset, and string always exist during each matching, in the capture group such as p1 and p2 in the middle, the String # replace () method will be filled according to the actual matching conditions. Of course, we can also obtain these parameter values based on arguments.

The following figure shows the result of running the code on the console:

Now, it is much more powerful to specify a function than to specify a string. This useful information can be obtained for each matching. We can perform some operations on it, finally, a value is returned as the new substring to be replaced. Therefore, we recommend that you use the above method when calling the String # replace () method.

The above are common Regular Expressions related to the String class. Note that the parameters in the String # search () and String # match () method signatures are regular objects, if another type of parameter is passed, it is implicitly converted to a regular object. The specific step is to call the toString () method of the parameter value to obtain the value of the string type, call new RegExp (val) to obtain the regular object.

// -> String#search(new RegExp(val.toString()))'123 123'.search(1);        // 0'true false'.search(true);  // 0'123 123'.search('\\s');    // 3var o = {  toString: function() {    return '\\s';  }};'123 123'.search(o);        // 3// -> String#match(new RegExp(val.toString()))'123 123'.match(1);         // ["1"]'true false'.match(true);   // ["true"]'123 123'.match('\\s');     // [" "]var o = {  toString: function() {    return '1(23)';  }};'123 123'.match(o);         // "123", "23"]

The split () and replace () methods do not convert strings into regular expression objects. For other types of values, only the toString () method is called to convert the parameter values into strings, it will not be further converted to regular expressions. You can test it yourself.