Shulou(Shulou.com)06/02 Report--

This article mainly explains "the usage of JavaScript regular expression". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the usage of JavaScript regular expression".

Let's take a look at the ways to manipulate regularities in JavaScript.

RegExp

RegExp is the constructor of regular expressions.

There are several ways to create a regular expression using a constructor:

New RegExp ('abc'); / / abc/new RegExp (' abc', 'gi'); / / abc/ginew RegExp (/ abc/gi); / / abc/ginew RegExp (/ abc/m,' gi'); / abc/gi

It accepts two parameters: the first parameter is a matching pattern, which can be a string or a regular expression, and the second parameter is a modifier.

If the regular expression of the first parameter defines a modifier and the second parameter has a value, the modifier defined by the second parameter shall prevail, which is a new feature of ES2015.

The use of constructors is generally used in scenarios where regular expressions need to be constructed dynamically, and the performance is not as good as that of literal quantification.

Let's take a look at its instance properties:

LastIndex property. Its function is to mark the position of the beginning of the next match when global matching, and it is the grip of global matching.

Source property. Its function is to store the body of the regular pattern. For example, abc in / abc/gi.

The corresponding modifier property. Currently, there are global, ignoreCase, multiline, sticky, dotAll and unicode attributes. A Boolean value is returned to indicate whether the corresponding modifier is enabled.

Flags property. Returns all modifiers.

Match

Match is the String instance method.

Its function is to return matching results according to the parameters, and the name match is also very appropriate.

It accepts a regular expression as the only parameter.

But a string can also be used as a parameter.

'abc'.match (' b'); / / ["b", index: 1, input: "abc", groups: undefined]

This is because new RegExp () is implicitly called inside the match method to convert it to a regular instance.

The return value of the match method can be divided into three cases.

Match failed

There is nothing to say, return to null.

Non-global matching

Returns an array.

The first item of the array is the matching result. If no parameters are passed, the matching result is an empty string.

'abc'.match (); / / [", index: 0, input:" abc ", groups: undefined]

If there is a capture group in the regular parameter, the captured results are arranged in turn in the array starting with the second term. Undefined is displayed if there is a capture group but no capture.

'@ abc2018'.match (/ @ ([Amurz] +) ([Amurz] +)? /); / / ["@ abc", "abc", undefined, index: 0, input: "@ abc2018", groups: undefined]

The array has an index attribute that indicates the starting position of the matching result in the text.

The array has an input property that displays the source text.

The array has a groups attribute, which stores not the information of the capture group, but the named information.

'@ abc2018'.match (/ @ (? [Amurz] +) (? [Amurz] +)? /); / / ["@ abc", "abc", undefined, index: 0, input: "@ abc2018", groups: {lowerCase: "abc", upperCase: undefined}]

Global matching

Returns an array.

Several captured results are arranged in turn in the array. Because all matching results are returned, other information, including capture groups and several properties, cannot be listed.

'abc&mno&xyz'.match (/ [a murz] + / g); / / ["abc", "mno", "xyz"]

Replace

Replace is the String instance method.

Its function is to replace the matching result with the given string and return the new replaced text. The source text does not change.

It accepts two parameters.

The first parameter can be a string or a regular expression, and its function is to match.

The difference between a parameter is a string and a parameter is a regular expression is that regular expressions are more expressive and can be matched globally. So you can only replace once if the parameter is a string.

'abc-xyz-abc'.replace (' abc', 'biu'); / / "biu-xyz-abc"' abc-xyz-abc'.replace (/ abc/, 'biu'); / / "biu-xyz-abc"' abc-xyz-abc'.replace (/ abc/g, 'biu'); / / "biu-xyz-biu"

The second argument can be a string or a function, and its function is to replace.

The second parameter is a string

The replace method provides some special variables for ways in which the second parameter is a string to meet general needs.

The $number represents the capture group in the corresponding order. Note that although it is a variable, do not write it as the template string `$ {$1} biu`. The internal logic of replace will automatically parse the string and extract the variable.

'@ abc-xyz-$abc'.replace (/ ([^ -] +) abc/g,' $1biu'); / / "@ biu-xyz-$biu"

$& represents the matching result.

'@ abc-xyz-$abc'.replace (/ ([^ -] +) abc/g,' {$&}'); / / {@ abc}-xyz- {$abc}

$`represents the text to the left of the match result.

'@ abc-xyz-$abc'.replace (/ ([^ -] +) abc/g,' {$`}'); / / {}-xyz- {@ abc-xyz-}

$'represents the text to the right of the match result.

'@ abc-xyz-$abc'.replace (/ ([^ -] +) abc/g, "{$'}"); / / "{- xyz-$abc}-xyz- {}"

Sometimes I want the symbol of the variable itself, not the value of the variable, what should I do? Add a $to escape.

'@ abc-xyz-$abc'.replace (/ ([^ -] +) abc/g,' $1biu'); / / "$1biu-xyz-$1biu" @ abc-xyz-$abc'.replace (/ ([^ -] +) abc/g,'$biu'); / / "$biu-xyz-$biu" @ abc-xyz-$abc'.replace (/ ([^ -] +) abc/g,'$biu'); / / "$biu-xyz-$biu"

In a scenario where there is no misunderstanding, the effect of one $and two $is a $, because the other acts as an escape symbol. If there is a scenario that will cause misunderstanding, you must add $to escape.

The second argument is the function

After all, variables in strings can only be referenced and cannot be operated. In contrast, the expressive power of the function is much stronger.

The return value of the function is what you want to replace. If the function does not return a value, it returns undefined by default, so the replacement is undefined.

The first argument to the function is the matching result.

'abc-xyz-abc'.replace (/ abc/g, (match) = > `{${match}}`); / / "{abc}-xyz- {abc}"' abc-xyz-abc'.replace (/ abc/g, (match) = > {}); / / "undefined-xyz-undefined"

If there is a capture group, the post-sequence parameter of the function corresponds to the capture group one by one.

'@ abc3-xyz-$abc5'.replace (/ ([^ -] +) abc (\ d +) / g, (match, $1, $2) = > `{${$1} ${match} ${$2}`); / {@ @ abc33}-xyz- {$$abc55}

The penultimate parameter is the position of the matching result in the text.

'@ abc-xyz-$abc'.replace (/ ([^ -] +) abc/g, (match, $1, index) = > `{${match} is the location is ${index}}`); / / {@ abc is the location is 0}-xyz- {$abc is the location is 9}

The penultimate parameter is the source text.

'abc-xyz'.replace (/ abc/g, (match, index, string) = > `{${match}} belongs to {${string}}`); / / "{{abc} belongs to {abc-xyz}}-xyz"

The most common place to use the replace method is to escape the HTML tag.

'

Hello regex

'.replace (/ / g,' >'); / "

Hello regex

"

Search

Search is the String instance method.

Its purpose is to find out the index of the first match. It has a single function and better performance.

It accepts a regular expression as the only parameter. Like match, if you pass in an irregular expression, it calls new RegExp () to convert it to a regular instance.

'abc-xyz-abc'.search (/ xyz/); / / 4'abc-xyz-abc'.search (/ xyz/g); / / 4'abc-xyz-abc'.search (/ mno/); / /-1'abc-xyz-abc'.search (); / / 0'abc-xyz-abc'.search (/ abc/); / / 0

Because only the location of the first match can be returned, the global match is not valid for it.

If the match fails, return-1.

Split

Split is the String instance method.

Its function is to cut the source text based on the delimiter passed in. It returns an array of units to be cut.

It accepts two parameters. The first parameter, which can be a string or a regular expression, is a delimiter, and the second parameter, optionally, limits the maximum length of the returned array.

'abc-def_mno+xyz'.split (); / / ["abc-def_mno+xyz"]' abc-def_mno+xyz'.split ('- _ +'); / / ["abc-def_mno+xyz"] 'abc-def_mno+xyz'.split ('') / ["a", "b", "c", "-", "d", "e", "f", "_", "m", "n", "o", "+", "x", "y", "z"] 'abc-def_mno+xyz'.split (/ [- _ +] /) / / ["abc", "def", "mno", "xyz"] 'abc-def_mno+xyz'.split (/ [- _ +] / g); / / ["abc", "def", "mno", "xyz"]' abc-def_mno+xyz'.split (/ [- _ +] /, 3); / / ["abc", "def", "mno"] 'abc-def_mno+xyz'.split (/ [- _ +] /, 5) / ["abc", "def", "mno", "xyz"]

If an empty string is passed in the first parameter, each string is cut.

In addition, because the regularities in the split method are used to match delimiters, global matching makes no sense.

Exec

Exec is the RegExp instance method.

Its function is to return matching results based on parameters, similar to the string method match.

/ xyz/.exec ('abc-xyz-abc'); / / ["xyz", index: 4, input: "abc-xyz-abc", groups: undefined] / mno/.exec (' abc-xyz-abc'); / / null/xyz/.exec (); / / null

The small difference is when the argument is empty: exec returns null directly; match returns an array of empty strings. The reason is also easy to understand. If there is a fish without a net, the worst is that there is no harvest; if there is a net without fish, there is no running head.

The biggest difference between the two is the globally matched scene.

Global matching means multiple matches, and the RegExp instance has a lastIndex property, which is updated to the location where the next match begins. Exec is based on this attribute to achieve global matching.

Const reg = / abc/g;reg.lastIndex// 0reg.exec ('abc-xyz-abc'); / / ["abc", index: 0, input: "abc-xyz-abc", groups: undefined] reg.lastIndex// 3reg.exec (' abc-xyz-abc'); / / ["abc", index: 8, input: "abc-xyz-abc", groups: undefined] reg.lastIndex// 11reg.exec ('abc-xyz-abc') / / nullreg.lastIndex// 0reg.exec ('abc-xyz-abc'); / / ["abc", index: 0, input: "abc-xyz-abc", groups: undefined]

If there are multiple matching results, all the matching results can be obtained by executing multiple times. So exec is generally used in loop statements.

There are two points to pay special attention to:

Because the lastIndex is constantly updated and eventually attributed to zero, the matching process can be repeated indefinitely.

The lastIndex property belongs to a regular instance. Only the lastIndex of the same instance is constantly updated.

You know what the second point means?

/ abc/g.exec ('abc-xyz-abc'); / / ["abc", index: 0, input: "abc-xyz-abc", groups: undefined] / abc/g.exec (' abc-xyz-abc'); / / ["abc", index: 0, input: "abc-xyz-abc", groups: undefined] / abc/g.exec ('abc-xyz-abc') / ["abc", index: 0, input: "abc-xyz-abc", groups: undefined] / /.

If you don't extract the regular and get a reference to it, the exec method keeps spinning around, because each time it is a new regular instance, and each time lastIndex starts at 0.

Test

Test is the RegExp instance method.

Its function is to find out whether the source text has a match, similar to the string method search. It is often used in form validation.

/ abc/.test ('abc-xyz-abc'); / true/mno/.test (' abc-xyz-abc'); / / false/abc/.test (); / / false

The difference between test method and search method is mainly reflected in two points:

LastIndexconst reg = / abc/g;reg.lastIndex// 0reg.test ('abc-xyz-abc'); / / truereg.lastIndex// 3reg.test (' abc-xyz-abc'); / / truereg.lastIndex// 11reg.test ('abc-xyz-abc'); / / falsereg.lastIndex// 0reg.test (' abc-xyz-abc'); / / true

The underlying implementation of the modified string method

We have also seen that some of the methods that handle the rules are defined on the String instance, and some of the methods that deal with the rules are defined on the RegExp instance. In order to unify all the methods of handling regularities into RegExp instances, ES2015 modified some of the underlying implementations of the string method.

Specifically, ES2015 has added four new methods for RegExp instances, and the internal calls of string methods match, replace, search, and split have been changed to the corresponding RegExp instance methods.

RegExp.prototype[Symbol.match] RegExp.prototype[Symbol.replace] RegExp.prototype[Symbol.search] RegExp.prototype[Symbol.split]

What is Symbol.match? Symbol is a new base data type with 11 built-in values that point to methods used within the language.

RegExp.prototype [Symbol.match] in use, compared with match, the caller and parameters can be flipped.

'abc-mno-xyz'.match (/ mno/); / / ["mno", index: 4, input: "abc-mno-xyz", groups: undefined] / mno/ [Symbol.match] (' abc-mno-xyz') / ["mno", index: 4, input: "abc-mno-xyz", groups: undefined] Thank you for reading. This is the content of "the usage of JavaScript regular expressions". After the study of this article, I believe you have a deeper understanding of the usage of JavaScript regular expressions, and the specific usage needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.