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

This article mainly shows you "how to use JavaScript regular expressions", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use JavaScript regular expressions" this article.

What is a regular expression

Regular expression (Regular Expression, regexp for short)

Is a syntax rule that describes the structure of a string.

Is a specific formatting pattern used to verify whether various strings match this feature, and then to achieve advanced text search, replace, intercept content and other operations.

Application: in the project development, the functions such as hiding the specified digits of mobile phone number, data collection, filtering of sensitive words and form verification can be realized by regular expression.

Applicable fields: in operating systems (Unix, Linux, etc.), programming languages (C, C++, Java, PHP, Python, JavaScript, etc.).

For example: take the text search as an example, if you find a string that matches a certain feature (such as a mobile phone number) in a large number of text, the feature will be written according to the syntax of the regular expression to form a computer program recognition pattern (Pattern), and then the computer program will match the text according to this pattern to find the string that conforms to the rules.

The Development History of regular expressions

The representation of regular expressions

One is a POSIX specification-compliant regular expression that ensures portability between operating systems.

One is that when Perl (a feature-rich programming language) developed, Perl regular expressions were derived, and the regular syntax in JavaScript is based on Perl.

How to use regularities

In development, it is often necessary to search and match the specified string according to the regular matching pattern.

Exec () method

The exec () method is used to search for matches in the target string, returning only one match at a time.

For example, search for abc in the specified string str.

The "/" in "/ abc/i" is the delimiter of the regular expression, "abc" represents the pattern text of the regular expression, and "I" is the pattern modifier identifier, indicating that case is ignored in str.

The parameter of the exec () method is the string str to be matched, and when the match succeeds, the return value of the method is an array, otherwise null is returned.

As you can see from the return result of exec (), the first element (AbC) saved in the array represents the matching string; the second element, index, represents the index value of the matched character in the target string (calculated from 0); and the third parameter, input, represents the target string (AbC123abc456).

Match () method

In addition to retrieving the specified value within a string, the match () method in the String object can also regularly match all the contents that meet the requirements in the target string, save it to an array after a successful match, and return false if the match fails.

The locator "^" can be used to match the position where the string begins.

The locator "$" can be used to match the position at the end of the string.

G represents a global match and is used to continue searching after the first match is found.

Get regular object

In JavaScript applications, regular objects need to be created before using regular expressions. In addition to the literal creation described earlier, it can also be created through the constructor of the RegExp object.

Pattern is regular expression pattern text consisting of metacharacters and text characters.

Metacharacters are characters with special meanings, such as "^", "." Or "*", etc.

Text characters are ordinary text, such as letters and numbers.

Flags represents a schema-decorated identifier and is used to further set regular expressions.

Pattern modifiers can also be combined according to actual needs.

For example, to ignore both case and global matching, you can use gi directly, and there is no order requirement when writing multiple schema modifiers.

Therefore, the reasonable use of pattern modifiers can make regular expressions more concise and intuitive.

In order to enable readers to better understand the acquisition of regular objects, to match the special characters "^", "$", "*", "." It is compared with "\" as an example.

The selector "|" means "or", and the search condition can be established as long as one of the conditions is met.

There is an escape problem with strings in JavaScript, so the "\" in str in the code represents a backslash.

When matching special characters in a rule, you also need a backslash (\) to escape the special characters. For example, "\" becomes "\" after a string escape, and then the regular expression matches "\" with "\".

Be careful

Although the regular objects created by constructor and literal quantity are identical in function, they have some differences in syntax implementation. The pattern of the former needs to escape the backslash (\). The pattern of the latter is written in the delimiter "/", and the flags tag is placed outside the trailing delimiter

Character category

Benefits: the effective use of character categories can make regular expressions more concise and easy to read.

Example 1: uppercase letters, lowercase letters and numbers can be directly represented by "\ w".

Case 2: to match a number between 0 and 9, you can use "\ d".

The following is to make it easier for readers to understand the use of character categories with "." And "\ s" as examples for demonstration.

The regular object reg is used to match any two characters after a white space character (except for line breaks).

So in the results seen by the console, there is a space before id.

Character set

The representation of a character set: "[]" can implement a character set.

Character range: when used with the hyphen "-", it matches the characters within the specified range.

Antisense: when the metacharacter "^" is used with "[]", it is called an antisense.

Not in a range: "^" is used with "[]" to match characters that are not within the specified range of characters.

Take the string 'get good TB6'.match (/ pattern/g) as an example to demonstrate its common usage.

Be careful

The character "-" usually represents only one ordinary character, only when it represents a range of characters.

Use as metacharacters. The range represented by the "-" hyphen follows the order of character encoding, such as "amurz", "zmura" and "aMel 9" are illegal ranges.

[case] limit the input

Code implementation ideas:

Write HTML, set up a text box for year (copy) and month (copy), and a query button.

Get the element object of the operation to validate the submission of the form.

Verify the year, regular: / ^\ d {4} /. Verification monthly, regular: / ((0? [1 − 9]) ∣ (1 [012])) /.

The text box gets the focus and removes the color of the prompt box. The text box loses focus, removes the white space at both ends of the input, and validates it.

Code implementation

Limit the input content input [type=text] {width: 40pxborderlycolor: # bbb;height: 25pxbordermuri size: 14pxbordermuri: radius: 2pxbordermuri: 0tramborder: # ccc 1px solid;padding: 010px10pxAfter webkitripple: box-shadow .5s; margin-bottom: 15px;} input [type=text]: hover, input [type=text]: focus,input [type=submit]: hover {border: 1px solid # 56b4ef Box-shadow: inset 0 1px 3px rgba, 00 8px rgba;-webkit-transition: box-shadow .5s;} input::-webkit-input-placeholder {color: # 999;-webkit-transition: color .5s;} input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {color: # c2c2c2;-webkit-transition: color .5s;} input [type=submit] {height: 30px Width: 80px; background: # 4393C9; border:1px solid # fff;color: # fff;font:14px bolder;} year and month

Function checkYear (obj) {if (! obj.value.match (/ ^\ d {4} $/)) {obj.style.borderColor = 'red'; result [XSS _ clean] =' input error, year is represented by 4 digits'; return false;} result [XSS _ clean] ='; return true } function checkMonth (obj) {if (! obj.value.match (/ ^ ((0? [1-9])) | (1 [012]) $/)) {obj.style.borderColor = 'red'; result [XSS _ clean] =' input error, month is between 1 and 12'; return false;} result [XSS _ clean] ='; return true } var form = document.getElementById ('form'); / / element object var result = document.getElementById (' result'); / /

Element object var inputs = document.getElementsByTagName ('input'); / / element collection form.onsubmit = function () {return checkYear (inputs.year) & & checkMonth (inputs.month);}; inputs.year.onfocus = function () {this.style.borderColor =';}; inputs.month.onfocus = function () {this.style.borderColor ='' }; if (! String.prototype.trim) {String.prototype.trim = function () {return this.replace (/ ^ [\ s\ uFEFF\ xA0] + | [\ s\ uFEFF\ xA0] + $/ g,''); / /\ uFEFF byte order mark \ xA0 does not wrap blanks};} inputs.year.onblur = function () {this.value = this.value.trim (); checkYear (this);}; inputs.month.onblur = function () {this.value = this.value.trim (); checkMonth (this);}; methods in the RegExp class

The test () method detects whether the regular expression matches the specified string.

When the match succeeds, the return value of the test () method is true, otherwise it returns false.

Detect pattern modifiers for regular objects

There are also attributes in the RegExp class that detect the schema modifiers used by the current regular object, specify the starting index for the next match, and so on.

In order for readers to better understand the use of these attributes, take the matching of spaces as an example to demonstrate.

Methods in the String class

The search () method: you can return the position where the substring of the specified pattern first appears in the string, which is more powerful than the indexOf () method.

The argument to the search () method is a regular object, and if an irregular expression object is passed in, it is implicitly converted to a regular expression object using "new RegExp (passed in parameters)".

When the search () method fails to match, the return value is-1.

The split () method is used to split a string into an array of strings based on the specified delimiter, which does not include the delimiter.

When there is more than one delimiter, you need to define a regular object to complete the splitting operation of the string.

Follow the "@" and "." in the string The two delimiters are divided.

The argument to the split () method is the delimiter set by the regular expression pattern, and the return value is the segmented result saved as an array.

Be careful

When the string is empty, the split () method returns an array "["] "containing an empty string, or an empty array" [] "if both the string and the delimiter are empty strings.

When you split a string using regular matching, you can also specify the number of times the string is split.

When the number of string segmentation is specified, if the specified number of times is less than the number of times of regular segmentation in the actual string, other segmentation results will be ignored in the final return result.

Hands-on practice

Password strength verification

Password strength verification conditions:

The ① is 6 digits long and contains one of the numbers, letters, or other characters, and the password strength is "low".

The ③ is more than 6 characters long and contains two of the numbers, letters, or other characters. The password strength is "medium".

④ is more than 6 characters in length and contains three or more of the numbers, letters, or other characters. The password strength is "high".

Character qualifier-qualifier

Ask the question: match a consecutive character, such as 6 consecutive digits "458925".

Solution 1: regular object /\ d\ d/gi.

The problem: the repeated "\ d" is not easy to read and tedious to write.

Solution 2: use qualifiers (?, +, *, {}) to match the continuous occurrence of a character. Regular object /\ d {6} / gi.

Character qualification-- matching greed and laziness

When the dot character (.) is used in conjunction with the qualifier, it is possible to match any number of characters in the specified range.

For example: "^ hello.*world$".

Description: a string containing zero or more arbitrary characters from hello to the end of world can be matched.

Regular supports greedy matching and lazy matching when implementing any character matching in a specified number of characters.

Greed means matching as many characters as possible, while laziness means matching as few characters as possible. By default, it is greedy matching.

To achieve lazy matching, add "?" after the previous qualifier. Symbols.

Parenthesis character

In a regular expression, the content enclosed by the parenthesis character "()" is called a "subexpression".

Action

Parentheses match catch and cater, but if you don't use parentheses, they become catch and er

When not grouped, it matches 2 c characters; when grouped, it matches 2 "bc" strings.

Capture and non-capture

Capture: the process of storing the content matched to a subexpression in the cache of the system.

Non-capture: does not store the matching contents of the subexpression in the system cache, using the (?: X) implementation.

The replace () method of the String object can directly take advantage of $n (n is a positive integer greater than 0) to obtain the captured content and complete the operation of replacing the content captured by the subexpression.

The first parameter is a regular expression, which is used to match the str string, replacing the content that conforms to the rule with the content set by the second parameter.

$2 represents the content "Capture" captured by the second subexpression in the reg regular expression.

$1 represents the content "Regular" that was captured by the first subexpression.

The return value is the new string after replacement, so the contents of the original string are not modified.

You can use "(?: X)" to achieve non-capture matching.

Reverse reference

When writing a regular expression, if you want to get the capture of a subexpression stored in the cache in the regular expression, you can reference it using "\ n" (n is a positive integer greater than 0). This process is "reverse reference".

"\ 1" represents the capture of the first subexpression.

"\ 2" represents the capture of the second subexpression, and so on.

"\ d" is used to match any number between 09s.

After you add parentheses "()" to it, you can get the captured content by back reference.

Therefore, the final matching results are 333 and 666.

Zero width assertion

Zero-width assertion: refers to a zero-width subexpression match that is used to find out whether the content of the subexpression match contains a specific character set before or after.

Classification: it is divided into forward pre-check and reverse pre-check, but only forward pre-check is supported in JavaScript, that is, the match contains or does not contain the data before the captured content, and the captured content is not included in the matching result.

Regular operator precedence

There are many operators in regular expressions. In practical application, various operators will match according to the order of priority. The precedence of operators commonly used in regular expressions is shown in the following table.

[case] content search and replacement

Code implementation ideas:

Write a HTML that defines two text fields, one for user input and the other for displaying filtered content that has been replaced as required.

User input will be replaced with * as long as it contains bad and any Chinese characters.

Content rule to find and replace: / (bad) | [\ u4e00 -\ u9fa5] / gi.

Code implementation

Content find and replace p {float:left;} input {margin:0 20px;}

Pre-filter content:

Filtered content:

Document.getElementById ('btn'). Onclick = function () {/ / define the content rules to be found and replaced. [\ u4e00 -\ u9fa5] means to match any Chinese characters var reg = / (bad) | [\ u4e00 -\ u9fa5] / gi; var str = document.getElementById (' pre'). Value; var newstr = str.replace (reg,'*') Document.getElementById ('res') [xss_clean] = newstr;}; that's all of the article "how to use JavaScript regular expressions". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.