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

This article introduces the knowledge of "getting started with regular expressions in js". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

What is a regular expression?

Regular expression (regular expression) describes a pattern of string matching, which can be used to check whether a string contains a certain substring, replace a matching substring, or extract a substring from a string that meets a certain condition.

First popularize the basic knowledge of science.

Js uses regular expressions, in addition to understanding the basic matching rules of regular expressions. You also need to know the following basic knowledge:

Python,js,groovy scripting languages all have online debugging websites that can be tested online for syntax errors and are easy to use.

Var reg = new RegExp ('\\ d {8-20}')

Reg.test ("11111111a")

The first\ here is the escape character, which is used for escape.

The above example can also be written as:

Var reg = new RegExp (/\ d {8-20} /)

Reg.test ("11111111a")

Test can test whether the string matches the regular expression yes, and exec and match are used to capture the matching substrings.

To put it bluntly, regular expressions deal with strings, and we can use it to deal with some complex strings.

Why learn regular expressions?

Let's directly use an example to illustrate.

/ / find all the numbers in this string var str = 'abc123de45fgh7789qqq111';// method 1 function findNum (str) {var tmp ='', arr = []; for (var I = 0; I

< str.length; i++) { var cur = str[i]; if (!isNaN(cur)) { tmp += cur; } else { if (tmp) { arr.push(tmp); tmp = ''; } } } if (tmp) { arr.push(tmp) } return arr; } console.log(findNum(str)) //["123", "45", "6789", "111"] //方法2 使用正则表达式 var reg = /\d+/g; console.log(str.match(reg)) // ["123", "45", "6789", "111"] 通过比较2种方法我们明显看出在对字符串进行处理时，使用正则表达式会简单许多，所以虽然正则表达式看起来像是火星文一样的一堆乱码的东西，但我们还是有必要去学习它的。 正则表达式的创建方式 1、字面量创建方式 2、实例创建方式 var reg = /pattern/flags // 字面量创建方式 var reg = new RegExp(pattern,flags); //实例创建方式 pattern:正则表达式 flags:标识(修饰符) 标识主要包括： 1. i 忽略大小写匹配 2. m 多行匹配，即在到达一行文本末尾时还会继续寻常下一行中是否与正则匹配的项 3. g 全局匹配 模式应用于所有字符串，而非在找到第一个匹配项时停止 字面量创建方式和构造函数创建方式的区别 字面量创建方式不能进行字符串拼接，实例创建方式可以 var regParam = 'cm';var reg1 = new RegExp(regParam+'1');var reg2 = /regParam/;console.log(reg1); // /cm1/console.log(reg2); // /regParam/ 字面量创建方式特殊含义的字符不需要转义，实例创建方式需要转义 var reg1 = new RegExp('\d'); // /d/ var reg2 = new RegExp('\\d') // /\d/var reg3 = /\d/; // /\d/ 元字符 代表特殊含义的元字符 \d : 0-9之间的任意一个数字 \d只占一个位置 \w : 数字，字母 ，下划线 0-9 a-z A-Z _ \s : 空格或者空白等 \D : 除了\d \W : 除了\w \S : 除了\s . : 除了\n之外的任意一个字符 \ : 转义字符 | : 或者 () : 分组 \n : 匹配换行符 \b : 匹配边界 字符串的开头和结尾 空格的两边都是边界 =>

Do not occupy the number of string bits

^: limit the start position = > does not occupy the position itself

$: limit the end position = > does not occupy the position itself

[amurz]: any letter [] means any one of them is fine.

[^ amurz]: non-letter [] ^ stands for except

[abc]: any of the three letters of abc [^ abc] except for any of the three characters

Quantifier metacharacters that represent the number of times

*: 0 to more

+: 1 to more

?: 0 or 1 time is optional

{n}: exactly n times

{n,}: n to multiple times

{nmenthm}: n to m times

Quantifiers appear after metacharacters such as\ dcharacters, limiting the number of metacharacters that appear before them.

Var str = '122333444444' var str reg = /\ d {2} / g var res var res = str.match (reg); console.log (res) / / ["12", "23", "33", "44", "44"] var str ='I am the master of blanks'; var reg = / ^\ s + |\ smatching lead g; / / match begins and ends with spaces var res = str.replace (reg,'') Console.log ('('+ res+')') / / (I am Mr. Space)

Take out the () and [] and repeat subitems / / in the rule and talk about it separately.

In general, the characters in [] have no special meaning, such as + means +.

But something like\ w still has a special meaning.

Var str1 = 'abc';var str2 =' dbc';var str3 = '.bc'; var reg = / [ab.] bc/; / / at this time. It means .reg.test (str1) / / truereg.test (str2) / / falsereg.test (str3) / / true

[], there will be no double digits

[12] means 1 or 2, but [0-9] means 0 to 9 [a murz] indicates a to z for example: match all people from 18 to 65 years old var reg = / [18-65] /; / / is it correct to write reg.test ('50') reg = / (18 | 19) | ([2-5]\ d) | (6 [0-5]) /

Uncaught SyntaxError: Invalid regular expression: / [18-65] /: Range out of order in character class smart you think 8-6 may be wrong here, so change it to [16-85] that seems to match the age range from 16 to 85, but in fact, it is also unreliable. In fact, we match this 18-65-year-old regular, we have to take it apart to match we break it into three parts to match 18-19 20-59 60-65.

() higher priority function: whenever there is | when it appears, we must pay attention to whether it is necessary to add () to increase the priority

Group repetition subitems of () (two are put together)

Grouping:

As long as there are parentheses in the rule, a grouping will be formed.

As long as there is a grouping, the results in exec (match) and replace will change (later in the regular method)

Grouped references (repeating subitems):

As long as there are parentheses in the rule, a grouping will be formed. We can refer to this grouping by\ n (n is the number represents the grouping), and the first subgroup can be represented by\ 1.

For example, find out which letters appear the most in the string 'abAAbcBCCccdaACBDDabcccddddaab', and how many times they appear (ignore case).

Var str = 'abbbbAAbcBCCccdaACBDDabcccddddaab'; str = str.toLowerCase (). Split ('') .sort (function (AMaginb) {return a.localeCompare (b)}). Join (''); var reg = / (\ w)\ 1Romagio; var maxStr =''; var maxLen = 0; str.replace (reg,function ($0mement1) {var regLen = $0.1th; if (regLen > maxLen) {maxLen = regLen; maxStr = $1;} else if (maxLen = = regLen) {maxStr + = $1 }}) console.log (the most common letter for `is ${maxStr}, with a total of ${maxLen}`)

When we add () only to improve priority and do not want to capture small packets, we can add?: in () to cancel packet capture.

Var str = 'aaabbb';var reg = / (a +) (?: B +) /; var res = reg.exec (str); console.log (res) / / ["aaabbb", "aaa", index: 0, input: "aaabbb"] / / only capture the contents of the first subpacket

Precedence of regular operators

Regular expressions are evaluated from left to right and follow the order of priority, which is very similar to arithmetic expressions.

Those with the same priority will operate from left to right, while those with different priorities will be high and then low.

The following is the precedence arrangement of common operators

Describe the precedence order of the various regular expression operators from the highest to the lowest:

\: escape character

(), (?), (?), [] = > parentheses and square brackets

*, +,?, {n}, {n,}, {nrecom} = > quantifier qualifier

^, $,\ any metacharacter, any character

| | = > replace, or "operation |

Characters have a higher priority than the replacement operator. In order to increase the priority of |, we usually use () to increase the priority when using |

For example, when matching food or foot, reg = / foo (t | d) / so as to match

The characteristic of regularity

1. Greed

The so-called greed is that regular capture will capture as much content as possible each time.

If we want to capture as few qualified strings as possible, we can add quantifier metacharacters.

2. Laziness

Laziness means that after a successful capture, no matter whether the subsequent string meets the criteria or not, it will no longer be captured.

If you want to capture all qualified strings in the target, we can use the identifier g to indicate that it is a global capture.

Var str = '123aaaa456 accountabilityvar reg = /\ dpepper reg; / / capture only once, capture as many as possible var res = str.match (reg) console.log (res) / / ["123aaaaa456", input: "123aaa456"] reg = /\ dharmUniple g / / solve greed and laziness res = str.match (reg) console.log (res) / / ["1", "2", "3", "4", "5", "6"]

Some methods related to regularity

Here we only introduce four methods: test, exec, match and replace.

Reg.test (str) is used to verify whether the string conforms to the rules and returns true otherwise it returns false.

Var str = 'abc';var reg = /\ true true console.log (reg.test (str))

Reg.exec () is used to capture strings that conform to the rules

Var str = 'abc123cba456aaa789';var reg = /\ daccountablesconsole.log (reg.exec (str)) / / ["123", index:3,input:" abc123cba456aaa789 "]; console.log (reg.lastIndex) / / lastIndex: 0 in the array captured by reg.exec / / [0:" 123", index:3,input: "abc123cba456aaa789"] 0: "123indicates that the captured string index:3 represents the index input of the capture start position represents the original string.

When we capture with exec, if the rule does not add the'g 'identifier, then the exec capture is the same every time, when there is a' g 'identifier in the rule, the capture result is different, let's take a look at the example just now

Var str = 'abc123cba456aaa789';var reg = /\ dprinter _ g / / add the identifier gconsole.log (reg.lastIndex) / / lastIndex: 0 console.log (reg.exec (str)) / / ["123", index: 3, input:" abc123cba456aaa789 "] console.log (reg.lastIndex) / / lastIndex: 6console.log (reg.exec (str)) / / [" 456 ", index: 9, input:" abc123cba456aaa789 "] console.log (reg.lastIndex) / / lastIndex: 12console.log (reg.exec (str)) / / [" 789 ", index: 15 Input: "abc123cba456aaa789"] console.log (reg.lastIndex) / / lastIndex: 18console.log (reg.exec (str)) / / nullconsole.log (reg.lastIndex) / / lastIndex: 0

The string captured is different each time the exec method is called

LastIndex: this property records the index from which the next capture starts.

This value is 0 when capture is not started.

If the current capture result is null. Then the value of lastIndex will be changed to 0. 0. Capture it from scratch next time.

And this lastIndex attribute also supports artificial assignment.

The capture of exec is also affected by packet ().

Var str = '2017-01-05 accountabilityvar reg = /-(\ d +) / index / ["- 01", "01", index: 4, input: "2017-01-05"] "- 01": regular captured content "01": content in a subgroup in the captured string

Str.match (reg) returns an array of successful matches if the match is successful, and returns null if the match is not successful

/ / the usage of match and exec is similar to that of var str = 'abc123cba456aaa789';var reg = /\ index console.log (reg.exec (str)); / / ["123", index: 3, input: "abc123cba456aaa789"] console.log (str.match (reg)); / / ["123", index: 3, input: "abc123cba456aaa789"]

What is the difference between the results of the above two methods console? The two strings are the same.

When we make a global match, the difference between the two will be revealed.

Var str = 'abc123cba456aaa789';var reg = /\ dsolver console.log (reg.exec (str)); / / ["123", index: 3, input: "abc123cba456aaa789"] console.log (str.match (reg)); / / ["123", "456", "789"]

When global matching occurs, the match method captures all the strings that meet the matching criteria into the array at once.

If you want to use exec to achieve the same effect, you need to execute the exec method multiple times.

We can try to use exec to simply simulate the implementation of the match method.

String.prototype.myMatch = function (reg) {var arr = []; var res = reg.exec (this); if (reg.global) {while (res) {arr.push (res [0]); res = reg.exec (this)}} else {arr.push (res [0]);} return arr;} var str = 'abc123cba456aaa789';var reg = /\ daccountablesconsole.log (str.myMatch (reg) / / ["123"] var str =' abc123cba456aaa789' Var reg = /\ dbadge _ console.log (str.myMatch (reg)) / / ["123,456", "789"]

In addition, both match and exec can be affected by grouping (), but match only displays the contents of small packets without an identifier g. If there is a global g, match will capture them all at once and put them into the array.

Var str = 'abc';var reg = / (a) (b) (c) /; console.log (str.match (reg)); / / ["abc", "a", "b", "c", index: 0, input: "abc"] console.log (reg.exec (str)); / / ["abc", "a", "b", "c", index: 0, input: "abc"] var str =' abc' "when global g exists Var reg = / (a) (b) (c) / gconsole.log (str.match (reg)); / / ["abc"] console.log (reg.exec (str)); / / ["abc", "a", "b", "c", index: 0, input: "abc"]

Str.replace () is certainly a familiar method, and now we're going to talk about something related to this method and regularization.

Match the string regularly, and replace the successful character with the new string.

Written in: str.replace (reg,newStr)

The second argument of var str = 'a111bc222 destructiveVar res = str.replace (/\ dBC222) console.log (res) / / "aQQQbcQQQde" / / replace can also be a function str.replace (reg,fn); var str =' 2017-01-06' Str = str.replace (/ -\ dstamp gamma function () {console.log (arguments)}) / / console print result: ["- 01", 4, "2017-01-06"] ["- 06", 7, "2017-01-06"] "2017undefinedundefined" / / from the print result we find that the value of each output seems to be similar to that of exec capture, since it seems to be very similar to exec. So it seems that it is also possible to print out the contents of the small groups. Var str = '2017-01-06'. Str = str.replace (/-(\ d +) / console.log (arguments)}) ["- 01", "01", 4, "2017-01-06"] ["- 06", "06", 7, "2017-01-06"] "2017undefinedundefined" / / our guess is fine from the results.

In addition, we need to note that if we need to replace the string found by the regular in replace, we need a return value in the function to replace the contents of the regular capture.

The method of obtaining parameters in url by replace method

(function (pro) {function queryString () {var obj = {}, reg = / ([^? & # +] +) = ([^? & # +] +) / g; this.replace (reg,function ($0String.prototype)) {obj [$1] = $2;) return obj;} pro.queryString = queryString;} (String.prototype); / / for example, url is https://www.baidu.com?a=1&b=2// _ window.location.href.queryString () / / {aVO1BRIMBUR 2} Zero width assertion

Used to find things before or after certain content (but not including them), such as\ b, ^, $to specify a location that should meet certain conditions (that is, assertions), so they are also called zero-width assertions.

When using regular expressions, the captured content must be specific content, and zero-width assertions can come in handy when we don't want to capture that specific content.

Zero width positive prediction advance assertion (? = exp)

Zero width negative prediction antecedent assertion (?! exp)

Zero width is reviewing and asserting (?

The names of these quadruplets look so long, giving people a sense of complexity and difficulty. Let's take a look at what they do one by one.

(? = exp) this simple understanding means that the right side of the position where the character appears must match the expression exp.

Var str = "i'm singing and dancing"; var reg = /\ b (\ w + (? = ing\ b) / gvar res = str.match (reg); console.log (res) / / ["sing", "danc"]

Note that we are talking about positions, not characters.

Var str = 'abc';var reg = / a (? = b) cUniverse console.log (res.test (str)); / / false// this seems to be correct, but in fact the result is false

The matching string a (? = b) in reg has b to the right of the abc' string a, and then the c matching string after a (? = b) in reg starts from this position before the b after an in the string 'abc'.

This is the equivalent of / ac/ matching 'abc',. Obviously the result is false.

(?! exp) this means that the expression exp cannot be to the right of the position where the character appears.

Var str = 'nodejs';var reg = / node (?! js) /; console.log (reg.test (str)) / / false

(? var str ='¥998 $888 reg = / (?

Finally, a mind map.

This is the end of the introduction to regular expressions in js. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.