I am small and live in Wuhan, do two years of new media, ready to use 6 months time to switch to the front end of the industry.

Lesson Objective for today

Yesterday we learned the RegExp modifier based on search. Today we will learn RegExp related matching rules based on search, mainly record items, and then learn a few common re usage, is suitable for learning a day, come on, small and ！！！！

Character Classes

character meaning
. (The dot.The decimal point) matches any singlecharacter, butLine endExcept:\n \r \u2028 或 \u2029.

In the character set, the point (.) loses its special meaning and matches a literal point (.).

It’s important to note that,mMultiple lines (multiline) The logo will not changeThe dotPerformance. Therefore, to match character sets in multiple lines, the(^)(Of course you’re not planning on using the old versionIEIn), it will matchAny character, includingA newline.

For example,/.y/matchingyes make my dayIn themy 和 ay, but it doesn’t matchyes.
\d Match anyArabic numerals. Is equivalent to[0-9].

For example,/\d/ 或 / [0-9]matchingB2 is the suite number.In the2.
\D Match any one of themArabic numeralsthecharacter. Is equivalent to[^ 0-9].

For example,/\D/ 或 / [^ 0-9]matchingB2 is the suite number.In theB.
\w Match arbitrary from the baseLatin alphabetIn theAlphanumeric character, as well as theThe underline. Is equivalent to[A-Za-z0-9_].

For example,/\w/matchingappleIn thea.The $5.28In the5 和 3DIn the3.
\W Matching anything is not fundamentalLatin alphabetIn a word,Alphanumeric underscore) character character. Is equivalent to[^A-Za-z0-9_].

For example,/\W/ 或 /[^A-Za-z0-9_]/matching50%In the%.
\s Match aWhitespace characters, includingThe blank space,tabs,Page identifier,A newlineAnd otherUnicode whitespace.

Is equivalent to[ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​\u2001\u2002​\u2003\u2004​ \u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​​\u202f\u205f​ \u3000].

For example,/\s\w*/matchingfoo barIn thebar.
\S Match aNon whitespace characters. Is equivalent to[^ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​\u2001\u2002​\u2003\u2004​ \u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​\u202f\u205f​\u3000].

For example,/\S\w*/matchingfoo barIn thefoo.
\t Match aHorizontal TAB character(TAB)
\r Match aA carriage return(carriage return)
\n Match aA newline(linefeed)
\v Match aVertical TAB character(vertical TAB)
\f Match aPage identifier(the form – feed)
[\b] Match aBack spaceDon’t be a backspace\bConfusion)
\ 0 Match aNULCharacters. Don’t follow behind hereThe decimal point.
\cX X 是 A - ZA letter of. Matches one of the stringsControl characters.

For example,/\cM/Matches in a stringcontrol-M.
\xhh Matching code ishh(twohexadecimalDigit) character.
\uhhhh matchingUnicodeA value ofhhhh(fourhexadecimalDigit) character.
\ For those who are generally consideredLiteral meaningthecharacterFor the next onecharacterwithSpecial useAnd will not be followedLiteral meaningExplanation.

For example,/b/The matching charactersb. inbPreceded by a backslash, which is used/\b/, the character becomes special and matches oneWord boundaries.

Or for those who usuallySpecial treatmentthecharacter, for the next onecharacterDo not haveSpecial purpose, will be followedLiteral meaningExplanation.

For example,*Is aSpecial charactersIs used to match a character0 或Many times, such as/a*/means0Or morea. To match the literal*And put one in front of itThe backslash, for instance,/a\*/matchinga*.

Character Sets

character meaning
[xyz] aCharacter set, also known as theCharacter groups. Matches any one of the setscharacter. You can use a hyphen-To specify aThe scope of.

For example,[abcd]Is equivalent to[a-d]Matching,brisketIn thebandchopIn thec.
[^xyz] aantisenseorSupplementary character set, also known as theAntisense character group. That is, it matches any absenceparenthesesWithin thecharacter. You can also do this by using a hyphen-Specifies a range of characters.

For example,[^abc]Is equivalent to[^a-c]. The first one that matches isbaconIn theo 和 chopIn theh.

Boundaries

character meaning
^ matchingInput the start. Is equivalent to:[\t\n\v\f\r \u00a0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000], if multiple lines (multiline) flag is set totrue, which also matches a line break (line break) after the operatorAt the beginning.

For example,/^A/Don’t matchan AIn theA, but the matchAn AIn theA.
$ matchingThe input end. If multiple lines (multiline) flag is set totrue, which also matches a line break (line break) at the end of.

For example,/t$/Don’t matcheaterIn thet, but the matcheatIn thet.
\b Match aZero word wideBoundary (zero-width word boundary), such as aThe letterWith aThe blank spaceIn between. (don’t get along with[\b]Confusion)

For example,/\bno/matchingat noonIn theno./ly\b/matchingpossibly yesterday.In thely.
\B Match aZero width non wordBoundary (zero-width non-word boundary), such as twoThe letterBetween or bothThe blank spaceIn between.

For example, use/\Bno/matchingat noonIt’s not a match. Use/\Bon/matchingat noonIn theon, / ye \ B/matchpossibly yesterday.In theye.

Grouping and Back References

character meaning
(x) matchingxAnd captureA match. This is known asCapturing parentheses(capturing parentheses).

For example, /(foo)/ matches and capturesfoo bar.In thefoo. The matched substring can be an element in the result array[1], ..., [n]Found in, or in definedRegExpObject propertiesAt $1,... , $9Found.

Capture group (Capturing groups) there is a performance penalty. If the matched substring does not need to be accessed again, it is best to use non-capturing parentheses (see below).
\n nIs aPositive integer. abackreferences(back reference) to aRegular expressionIn the firstnMatches in brackets (counting from left)The substring.

For example,/apple(,)\sorange\1/matchingapple, orange, cherry, peach.In theapple,orange,. A more comprehensive example can be found below.
(? :x) matchingxDon’t catchA match. This is known asNon-capture parenthesis(non-capturing parentheses).A matchCan’t fromThe result arrayThe elements of the[1], ..., [n]Or definedRegExpObject propertiesAt $1,... , $9Visit again.

Quantifiers

character meaning
x* Match the previous patternx 0 或Many times.

For example,/bo*/matchingA ghost booooedIn theboooo.A bird warbledIn theb, but it doesn’t matchA goat grunted.
x+ Match the previous patternx 1 或Many times. Is equivalent to{1,}.

For example,/a+/matchingcandyIn thea.caaaaaaandyAll of thea.
x*? x+? As the above* 和 +Same as the previous patternxWhereas the match isLeast likely match.

For example,/. *? /matchingfoo bar 的 The blank spaceAnd the*No back?When the matchfoo bar, i.e.,'foo bar.'.match(/.*/)The value of["foo bar.", index: 0, input: "foo bar.", groups: undefined].
x? Match the previous patternx 0 或 1Times.

For example,/e? le? /matchingangelIn theel.angleIn thele.

If you’re in a quantifier*,+,? 或 {}, any of which is immediately followed by the symbol (?), can makequantifiersBecome ungreedy (non-greedy), that is, the number of matches is minimized. The reverse is, by default, greedy, which maximizes the number of matches.

In the use of theForward assertion(lookahead assertions), see the table(? =),(? !). 和 (? :)The instructions.
x(? =y) Only when thexOn the heels ofyIs matchedx. For example,/Jack(? =Sprat)/Only in theJackOn the heels ofSprat, will match it./Jack(? =Sprat|Frost)/Only in theJackOn the heels ofSprat 或 Frost, will match it. However,Sprat 或 FrostThey’re not part of the match.
x(? ! y) Only when thexNot immediately afteryIs matchedx. For example, /\d+(? ! \.) /A number is matched only if it is not immediately followed by a decimal point.

/\d+(? ! \.) /. The exec () '3.141'matching141Rather than3.141.
x|y matchingx 或 y

For example,/green|red/matchinggreen appleIn thegreen.red apple.In thered.
x{n} nIt’s a positive integer. The previous patternxContinuous appearnSub-time matching.

For example,/a{2}/Don’t matchcandy,In thea, but matchescaandy,Two of theaAnd matchingcaaandy.The first twoa.
x{n,} nIt’s a positive integer. The previous patternxAppear continuously at leastnSub-time matching.

For example,/a{2,}/Don’t matchcandyIn thea, but matchescaandy 和 caaaaaaandy.All of thea.'caaaaaaandy.'.match(/a{2,}/)The value of["aaaaaaa", index: 1, input: "caaaaaaandy.", groups: undefined].
x{n,m} n 和 mIs a positive integer. The previous patternxAppear continuously at leastnAt most time,mSub-time matching.

For example,/ a / {1, 3}Don’t matchcndyMatching,candy,In thea.caandy,Two of theaMatching,caaaaaaandyThe first threea. Notice when matchescaaaaaaandy, even ifRaw stringHave morea, and so does the matchaaa, i.e.,'caaaaaaandy.'. The match (/ {1, 3} / a)The value of["aaa", index: 1, input: "caaaaaaandy.", groups: undefined].

Assertions

character meaning
x(? =y) Matches only byyFollow thex.

So for example,/Jack(? =Sprat)/If theJackFollowed by thesprat, matches.

/Jack(? =Sprat|Frost)/If theJackFollowed by theSpratorFrost, matches. However,Sprat 和FrostNone of them show up in the match.
x(? ! y) Only match not beyFollow thex.

So for example,/\d+(? ! \.) /Will only match the dot (.) the following number.

/\d+(? ! \.) /. The exec () '3.141'matching141Rather than3.141

Special value regular conversion table 

const strString = "hello little";
const oo = new Object(a);const oString = new String("hello world");
const oBool = new Boolean(true);
const oNum = new Number(68);
const oArray = new Array("demo"."little"."you"); const oDate = new Date(a);// Mon May 25 2020 21:31:56 GMT+0800 Copy the code
The original value Method of use Conversion value
true new RegExp(true) /true/
false new RegExp(false) /false/
undefined new RegExp(undefined) / (? 🙂 /
null new RegExp(null) /null/
NaN new RegExp(NaN) /NaN/
{} new RegExp({}) /[object Object]/
[String: ‘hello world’] new RegExp(oString) /hello world/
[Boolean: true] new RegExp(oBool) /true/
[Number: 68] new RegExp(oNum) / 68 /
oDate new RegExp(oDate) /Mon May 25 2020 21:31:56 GMT+0800 /
Number.MAX_VALUE new RegExp(Number.MAX_VALUE) 1.7976931348623157 e+308 / /
Number.MIN_VALUE new RegExp(Number.MIN_VALUE) /5e-324/
Number.NaN new RegExp(Number.NaN) /NaN/
Number.NEGATIVE_INFINITY new RegExp(Number.NEGATIVE_INFINITY) /-Infinity/
Number.POSITIVE_INFINITY new RegExp(Number.POSITIVE_INFINITY) /Infinity/

Common regular expressions

  • The user name

[a - z0-9 / ^ _ -] 3 dec} {$/

The string must start and end with a lowercase letter, a number from 0 to 9, or an _ – symbol, and must be three to sixteen characters in length


  • password

[a - z0-9 / ^ _ -] {6} 16 $/

The string must start and end with a lowercase letter, a number from 0 to 9, or an _ – symbol, and must be 6 to 18 characters in length


  • Hexadecimal value

/ ^ #? ([a-f0-9]{6}|[a-f0-9]{3})$/

The value is a string of three or six characters with lowercase letters (a to F) and digits from 0 to 9 and starts with or does not contain the character #.


  • email

[a - / ^ (z0-9 _ \. -] +) @ (/ \ \. Da - z - +) \. ([a-z \.] {2, 6}) $/

/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?) + (\. {1, 2} [a-z] +) + $/


This is a little difficult to understand, I probably know that the email format should be checked, such as [email protected]

  • URL

/^(https? : \ \ /)? ([\ \. Da - z -] +) \. ([a-z \.] {2, 6}) (/ \ \ / \ w - *) * \ /? $/


This is a bit difficult to understand, probably know is to check for the website form such as http://baidu.com

  • The IP address

/((2[0-4]\d|25[0-5]|[01]? \d\d?) \.) {3}(2[0-4]\d|25[0-5]|[01]? \d\d?) /

/ ^ (? : (? : 25 [0 to 5] | 2 [0 to 4] [0-9] | [01]? [0-9] [0-9]?) \.) {3} (? : 25 [0 to 5] | 2 [0 to 4] [0-9] | [01]? [0-9] [0-9]?) $/

This is completely incomprehensible ~~~~~

  • HTML tags

/^<([a-z]+)([^<]+)*(? :>(.*)<\/\1>|\s+\/>)$/


< HTML >

  • Delete the code\ \annotation

/ (? <! http:|\S)//.*$/

This is completely incomprehensible ~~~~~

  • UnicodeRange of Chinese characters in encoding

/^[\u2E80-\u9FFF]+$/

This is completely incomprehensible ~~~~~

Refer to the website

  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

Summary of today’s lesson


Today the mood

Today is mainly based on the search to basic learning RegExp, found that the regular side of the subdivision of knowledge too much, the general direction to do a record, mainly on a few commonly used for learning and understanding, I hope to learn more RegExp tomorrow ~~~~


This article is formatted using MDNICE