Regular expression

examineOriginal site, more expanded content and better reading experience!
See the original text:Regular expression

Regular expression

Regular expressions are matching patterns, either matching characters or matching positions.

Character matching

Two kinds of fuzzy matching

  • Regular expressions can realize fuzzy matching
  • Fuzzy matching, there are two directions of fuzzy: horizontal and vertical

Transverse fuzzy matching

  • Horizontal ambiguity means that the length of a regular matchable string is not fixed.
  • The implementation is to use quantifiers.{m,n}A that indicates the minimum number of consecutive occurrencesmSecond, mostnnext

/ab{2,5}c/Match: The first character isaNext is2to5CharactersbAnd finallyc.

var regex = /ab{2,5}c/g;
var string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";
console.log(string.match(regex));
//[ 'abbc', 'abbbc', 'abbbbc', 'abbbbbc' ]

Longitudinal fuzzy matching

Vertical ambiguity, a regular matching string, when specific to a certain character, it may not be a certain character, and there may be many possibilities

  • The implementation is to use character groups.[abc]A that indicates that the character can beabcAny one of them.
var regex = /a[123]b/g;
var string = "a0b a1b a2b a3b a4b";
console.log(string.match(regex));
//[ 'a1b', 'a2b', 'a3b' ]

character set

Although it is called a character group (character class), it only matches one of the characters.[abc]Indicates a match to a character, which can beabc.

Range representation

There are many characters in the character group, and range representation can be used.

  • [123456abcdefGHIJKLM]Can be written as[1-6a-fG-M]. Use hyphens-To omit and abbreviate.
  • Matchinga-zAny one of these three characters can be written as[-az]Or[a\-z]. Either at the beginning, at the end, or escape.

Exclude character groups

  • Vertical fuzzy matching a character cannot beabc
  • [^abc]Indicates a divisionabcAny character other than. The first digit of a character group^(hyphenated) indicates the concept of negation.

Common abbreviations

  • \dexactly[0-9]. Represents a number.digit
  • \Dexactly[^0-9]. Represents any character other than a number.
  • \wexactly[0-9a-zA-Z]. Represents numbers, uppercase and lowercase letters, and underscores.word
  • \Wexactly[^0-9a-zA-Z]. Non-word character
  • \sexactly[\t\v\n\r\f]. Represents a blank character, including spaces, horizontal tabs, vertical tabs, line feeds, carriage returns, and page feeds.space
  • \Sexactly[^\t\v\n\r\f]. Non-blank character
  • .exactly[^\n\r\u2028\u2029]. Wildcards, which represent all arbitrary characters.

Match any character, you can use[\d\D][\w\W][\s\S][^]Any one of them.

Measure word

Quantifiers are also called repetitions.{m,n}

Short form

  • {m,}Indicates at least occurrencemnext
  • {m}Equivalent to{m,m}A that indicates the occurrencemnext
  • ?Equivalent to{0,1}A that indicates presence or absence
  • +Equivalent to{1,}A that represents at least one occurrence.
  • *Equivalent to{0,}A that represents any occurrence and may not occur.

Greedy matching and inert matching

var regex = /\d{2,5}/g;
var string = "123 1234 12345 123456";
console.log(string.match(regex));
//[ '123', '1234', '12345', '12345' ]
  • Greedy matches will make as many matches as possible.
  • Inert matching will result in as few matches as possible.
var regex = /\d{2,5}?/g;
var string = "123 1234 12345 123456";
console.log(string.match(regex));
//[ '12', '12', '34', '12', '34', '12', '34', '56' ]

/\d{2,5}? /gshow2to5Any time will do, when2When it is enough, it will not match down any more.

  • By adding after the quantifier?Inert matching can be realized, and all inert matching situations

    • {m,n}?
    • {m,}?
    • shachihoko
    • +?
    • *?
  • .*It’s greedy mode
  • .*?Is inert mode

Multiple choice branch

  • One mode can realize horizontal and vertical fuzzy matching. While multi-select branches can support any one of multiple sub-modes.
  • (p1|p2|p3)among themp1p2Andp3It’s a submode, using|(pipe symbol) separation, which means either of them.
var regex = /good|nice/g;
var string = "good idea, nice try.";
console.log(string.match(regex));
//[ 'good', 'nice' ]
var regex = /good|goodbye/g;
var string = "goodbye";
console.log( string.match(regex) ); 
// => ["good"]
var regex = /goodbye|good/g;
var string = "goodbye";
console.log( string.match(regex) ); 
// => ["goodbye"]

The above results are different.The branching structure is also inert, i.e. when the front matches well, the back will not try again..

Case analysis

Matching16Binary color value

Matching required

#ffbbad
#Fc01DF
#FFF
#ffE

Analysis

  • Indicates a16Binary character, can use character group[0-9a-fA-F]
  • In which characters can appear3Or6Second, what is needed is the usage word and the branch structure.
  • When using the branch structure, attention should be paid to the order.
var regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;
var string = "#ffbbad #Fc01DF #FFF #ffE";
console.log(string.match(regex));
//[ '#ffbbad', '#Fc01DF', '#FFF', '#ffE' ]

Matching time

Matching required

23:59
02:07

Analysis

  • general4Bit number, the first digit can be[0-2]
  • When the first1The bit is2When, the first2The bits can be[0-3], other circumstances first2The bit is[0-9]
  • No.3The digit number is[0-5], no.4The bit is[0-9]
var regex = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/g;

Matching required7:9In front of0Can be omitted.

var regex = /^(0?[0-9]|1[0-9]|2[0-3]):(0?[0-9]|[1-5][0-9])$/g;
var string = "7:9";
console.log(regex.test(string));
//true

Match date

Matching required 2017-06-10

Analysis

  • Year, four digits[0-9]{4}
  • Month, a total of 12 months, divided into two situations01、02、 ...And10、11、12,(0[1-9]|1[0-2])
  • Year, up to 31 days, available(0[1-9]|[12][0-9]|3[01])
var regex = /^[0-9]{4}-(0[0-9]|1[0-2])-(0[0-9]|[12][0-9]|3[01])$/g;
console.log(regex.test("2017-10-20"));
//true

Window operating system file path

F:\study\javascript\regex\regular expression.pdf
F:\study\javascript\regex\
F:\study\javascript
F:\

Analysis

  • The overall pattern is: drive letter:\ Folder \ Folder \ Folder \
  • Where matchingF:\, need to use[a-zA-Z]:\\, where the drive letter is not case sensitive, note\Characters need to be transferred
  • File name or folder name cannot contain some character characters, and character groups need to be excluded at this time[^\\:*<s>|"? \r\n/]To represent legal characters. It cannot be an empty name and has at least one character, that is, quantifiers should be used.+.

    • MatchingFolder \, available[^\\:*<>|"? \r\n/]+\\
  • In additionFolder \, which can occur any number of times. That is,([^\\:*<>|"? \r\n/]+\\)*. Where parentheses provide subexpression.
  • The last part of the path can beFolderNo\Therefore, it needs to be added([^\\:*<>|"? \r\n/]+)?
var regex = /^[a-zA-Z]:\\([^\\:*<>|"?\r\n/]+\\)*([^\\:*<>|"?\r\n/]+)?$/g;

Matching id

Request from<div id="container" class="main"></div>To extractid="container"

var regex = /id=".*?"/;
var string = '<div id="container" class="main"></div>';
console.log(string.match(regex)[0]);
//id="container"

Position matching

Common in ES56Anchor characters

^$\b\B(?=p)(?!p)

$And^

  • ^(hyphenation) matches the beginning of the line, and matches the beginning of the line in multi-line matching.
  • $(dollar sign) match end, match end in multi-line match

Use the beginning and end of the string#replace

var result = "hello".replace(/^|$/g, '#');
console.log(result);
//#hello#

Multiline matching pattern

var result = "I\nlove\njavascript".replace(/^|$/gm, '#');
console.log(result);
//#I#
// #love#
// #javascript#

\bAnd\B

\bIs the word boundary, specifically\wAnd\WThe position between, also includes\wAnd\WThe position between, also includes\wAnd$Position between

  • The file name is[JS] Lesson_01.mp4hit the target\b
var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
console.log(result);
//[#JS#] #Lesson_01#.#mp4#

(? =p)And(? ! p)

  • (? =p)Of whichpIs a submodel, namelypFront position
  • (? =l)A that indicateslPosition before character
var result = "hello".replace(/(?=l)/g, '#');
console.log(result);
//he#l#lo

(? ! p)Yes(? =p)Reverse operation of

var result = "hello".replace(/(?!l)/g, '#');
console.log(result);
//#h#ell#o#

They are forward-looking predicate and reverse-looking predicate respectively, specifically(? <=p)And(? <! p)

  • (? =p)exactlypThe front position

Characteristics of location

var result = /^^hello$$$/.test("hello");
console.log(result); 
// => true

Case

Does not match the regularity of anything

/.^/

The thousands separator representation of numbers

The12345678To become12,345,678

Use(? =\d{3}$)

var result = "12345678".replace(/(?=\d{3}$)/g, ',');
console.log(result);
//12345,678

Comma position, after request3A group of numbers, that is\d{3}At least once

  • Quantifiers can be used+
var result = "12345678".replace(/(?=(\d{3})+$)/g, ',');
console.log(result);
//12,345,678

Match other cases

  • The matching position is not the beginning.(? ! ^)
var string1 = "12345678";
var string2 = "123456789";
var reg = /(?!^)(?=(\d{3})+$)/g;
var result1 = string1.replace(reg, ',');
console.log(result1);
//12,345,678
var result2 = string2.replace(reg, ',');
console.log(result2);
//123,456,789

Verify password problem

  • The password is 6-12 digits long and consists of numbers, lowercase characters and uppercase letters, but must include at least 2 characters.

Simplify

The condition of “but at least 2 characters” is not considered.

var reg = /^[0-9A-Za-z]{6,12}$/;

Judging whether a certain character is contained or not

If the requirement must contain numbers, you can use the(? =.*[0-9])

var reg = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;

It contains two characters at the same time

Both numbers and lowercase letters can be used(? =.*[0-9](? =.*[a-z]))

var reg = /(?=.*[0-9])(?=.*[a-z])^(0-9A-Za-z){6,12}$/;
  • It contains both numbers and lowercase letters.
  • It contains both numbers and capital letters.
  • Includes both lowercase and uppercase letters
  • It contains numbers, lowercase letters and uppercase letters at the same time.
var reg = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A-Z]))^[0-9A-Za-z]{6,12}$/;

The role of brackets

  • Brackets provide grouping
  • There are two situations when a group is referenced: in JS and in regular expressions

Grouping and branching structure

Grouping

  • /a+/Matching occurs continuously.aTo match consecutive occurrencesabWhen, need to use/(ab)+/
  • Brackets provide grouping function to make quantifiers+Act onabThe whole
var regex = /(ab)+/g;
var string = "ababa abbb ababab";
console.log(string.match(regex));
//[ 'abab', 'ab', 'ababab' ]

branch structure

  • Multi-choice branch structure(p1|p2)The function of brackets is to provide all possibilities of subexpression.
I love JavaScript
I love Regular Expression
var regex = /^I love (JavaScript|Regular Expression)$/;
console.log( regex.test("I love JavaScript") );
console.log( regex.test("I love Regular Expression") );
// => true
// => true

Reference grouping

  • Brackets play an important role in data extraction and more powerful replacement operations.

Match dateyyyy-mm-dd

Extract data

Extract the year, month and day

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2018-06-18";
console.log(string.match(regex));
//[ '2018-06-18', '2018', '06', '18', index: 0, input: '2018-06-18' ]

matchAn array returned, the first element is the overall matching result, then the matching content of each grouping (bracket), then the matching subscript, and finally the input text. (Is there a modifier for regularizationg,matchThe returned array format is different)

  • You can use the of regular objectsexecMethod

You can use the global properties of the constructor$1To$9To get

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";

regex.test(string); // 正则操作即可,例如
//regex.exec(string);
//string.match(regex);

console.log(RegExp.$1); // "2017"
console.log(RegExp.$2); // "06"
console.log(RegExp.$3); // "12"

replace

Theyyyy-mm-ddFormat, replace withmm/dd/yyyy

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, "$2/$3/$1");
console.log(result); 
// => "06/12/2017"

among themreplaceUse for the second parameter in$1$2$3Refers to the corresponding grouping. Equivalent tovar regex=/(\d{4})-(\d{2})-(\d{2})/

Reverse reference

Writing a regular support matches the following three formats:

2016-06-12
2016-06-12
2016.06.12
  • Require consistent delimiters and use reverse references
var regex = /\d{4}(-|\/|\.)\d{2}\1\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // false
  • \1A that represents the grouping before the reference to the(-|\/|\.). No matter what it matches (e.g.-),\1All match the same specific character
  • \2And\3Referring to the second and third packets respectively

Parenthesis nesting

The left bracket (open bracket) shall prevail

var regex = /^((\d)(\d(\d)))\1\2\3\4$/;
var string = "1231231233";
console.log( regex.test(string) ); // true
console.log( RegExp.$1 ); // 123
console.log( RegExp.$2 ); // 1
console.log( RegExp.$3 ); // 23
console.log( RegExp.$4 ); // 3

Regular matching pattern

  • The first character is a number, say 1.
  • The second character is a number, say 2.
  • The third character is a number, say 3.
  • Next is 1, which is the content of the first grouping, then look at what the grouping corresponding to the first open parenthesis is, 123,
  • Next is 2, find the second opening bracket, the corresponding grouping, the matching content is 1,
  • Next is 3, find the third bracket, the corresponding grouping, the matching content is 23,
  • The last is 4, find the third bracket, the corresponding grouping, the matching content is 3.

Reference to a grouping that does not exist

Back reference refers to the previous group, and refers to a group that does not exist in the regex. regex will not report an error, but only matches the character itself of the back reference.

Non-capture packet

  • The packets appearing before will capture their matching data for subsequent reference, so they are also called capture packets.
  • Non-capture packet? :p
var regex = /(?:ab)+/g;
var string = "ababa abbb ababab";
console.log(string.match(regex));
//[ 'abab', 'ab', 'ababab' ]

Case

StringtrimMethod simulation

trimThe method is to remove the white space at the beginning and end of the string.

  • The first is to match the blanks at the beginning and end and replace them with blanks.
function trim(str) {
    return str.replace(/^\s+|\s+$/g, '')
}
  • Second, match the whole string, and then use the reference to extract the corresponding data
function trim(str) {
    return str.replace(/^\s*(.*?)\s*$/g, "$1");
}

Inert matching is used here*?Otherwise, it will also match all spaces before the last one.

Converts the first letter of each word to uppercase

function titleize(str) {
    return str.toLowerCase().replace(/(?:^|\s)\w/g, function (c) {
        return c.toUpperCase();
    })
}
console.log(titleize('my name is epeli'));
//My Name Is Epeli

The idea is to find the first letter of each word. It is also possible not to apply non-capture matching here.

Humping

function camelize(str) {
    return str.replace(/[-_\s]+(.)?/g, function (match, c) {
        return c ? c.toUpperCase() : '';
    })
}
console.log(camelize('-moz-transform'));
//MozTransform

Where grouping(.)Represents the initial letter. The definition of a word is that the preceding characters can be multiple hyphens, underscores and blanks.

After regular?The aim is to deal withstrThe trailing character may not be a word character.

Middle streaking

The inverse process of humping

function dasherize(str) {
    return str.replace(/([A-Z])/g,'-$1').replace(/[-_\s]+/g,'-').toLowerCase();
}
console.log(dasherize('MozTransform'));
//-moz-transform

htmlEscape and Reverse Meaning

Match pairs of labels

Matching required

<title>regular expression</title>
<p>laoyao bye bye</p>

mismatching

<title>wrong!</p>
  • Match an open label and use regular<[^>]+>
  • Match a closed tag, use<\/[^>]+>

Matching pairs of labels is required, and reverse reference is required.

var regex = /<([^>]+)>[\d\D]*<\/\1>/;
var string1 = "<title>regular expression</title>";
var string2 = "<p>laoyao bye bye</p>";
var string3 = "<title>wrong!</p>";
console.log(regex.test(string1)); // true
console.log(regex.test(string2)); // true
console.log(regex.test(string3)); // false
  • In which a label is opened<[^>]+>Change to<([^>]+)>The purpose of using parentheses is to provide grouping for later use of backreferences.
  • Closed tags use reverse references<\/\1>
  • [\d\D]This character is a number or not, that is, it matches any character.

Regular expression backtracking method

There is no backtracking match

When the target string isabbbcWhen, there is no so-called “backtracking”.

Matching with Backtracking

If the target string isabbc, there is back in the middle

Common forms of backtracking

  • The backtracking method is also called heuristic method. The basic idea is to start from a certain state (initial state) of the problem, search for all “states” that can be reached from this state. When a road comes to an “end”, take another step or steps back, start from another possible state, and continue searching until all paths (states) have been explored. This method of continuously advancing and tracing back to find solutions is called “tracing back method”.
  • In essence, it is a depth-first search algorithm. One step back before this process, known as “backtracking.”

Where regular expressions generate backtracking

Greedy quantifier

var string = "12345";
var regex = /(\d{1,3})(\d{1,3})/;
console.log(string.match(regex));
//[ '12345', '123', '45', index: 0, input: '12345' ]

previous\d{1,3}The match is123After\d{1,3}The match is45

Inert quantifier

Inert quantifier is a greeting after greedy quantifier. Indicates as few matches as possible.

var string = "12345";
var regex = /(\d{1,3}?)(\d{1,3})/;
console.log( string.match(regex) );
// => ["1234", "1", "234", index: 0, input: "12345"]
  • among them\d{1,3}?Matches only one character1, while the latter\d{1,3}Matched234
  • Although inert quantifiers are not greedy, there is also backtracking.

branch structure

Branches are also inert, for example/can|candy/To match the stringcandyThe result iscanBecause the branch will try one by one, if the front is satisfied, the back will not try again.
For the branch structure, the previous sub-patterns may form a local match. If the following expressions do not match as a whole, the remaining branches will continue to be tried.

Split of Regular Expressions

Structure and Operator

In regular expressions, operators are all embodied in structures, that is, a special whole represented by special characters and matching characters.

What are the structures in JS regular expressions?

  • Character literal, character group, quantifier, anchor character, grouping, selection branch, back reference

Specific meaning

  • Literal quantityTo match a specific character, including those that need not be escaped and those that need to be escaped.

    • such asaMatching charactera,\nMatch line breaks,\.Match decimal point
  • character set, matching a character, can be one of many possibilities,

    • such as[0-9]A that represents matching a number.\dIt’s a short form.
    • In addition, there is an antisense character group, which means that it can be any character other than a specific character, such as[^0-9]Indicates a non-numeric character, also has\DShort form of
  • Measure wordA that represents the continuous occurrence of a character, such asa{1,3}showaCharacters appear 3 times in a row.

    • Common abbreviations,a+showaCharacters appear at least once in succession
  • AnchorTo match a position, not a character.

    • such as^Match the beginning of the string.
    • such as\bMatch word boundaries
    • such as(? =\d)Indicates the position before the number.
  • GroupingA whole is represented by brackets.

    • such as(ab)+showabTwo characters appear several times in succession, and non-capture grouping can also be used.(? :ab)+
  • branch, more than one subexpression

    • such asabc|bcdExpression matchingabcOrbcdCharacter substring
  • Reverse referenceFor example\2To refer to the first2Groups

The operators involved are

  • escape character\
  • Brackets and brackets(...)(? :...)(? =...)(? ! ...)[...]
  • Quantifier qualifier{m}{m,n}{m,}?*+
  • Position and sequence^$\ metacharactersGeneral characters
  • Pipe symbol|

The priority of operators is from top to bottom and from high to low.

/ab?(c|de*)+|fg/
  • Because of the brackets,(c|de*)Is an integral structure
  • In(c|de*)Pay attention to the quantifier, thereforeeIs an integral structure
  • Because of the branching structure|The lowest priority, thereforecIs a whole, andde*Is another whole
  • By the same token, the whole regularization is divided intoab?(...)+fg. However, due to branching, it can be divided intoab? (c|de*)+AndfgTwo parts

Attention points

The overall problem of matching strings

  • To match the entire string, add anchor characters before and after the regular^And$

The Conjunction of Quantifiers

每个字符为a、b、c任选其一
字符串的长度是3的倍数
  • /([abc]{3})/

Metacharacter Escape Problem

  • Metacharacters are characters with special meanings in regularity
  • Metacharacters used in all structures:

    • ^$.*+?||/()[]{}=!:-,

When matching the above characters themselves, they can all be escaped:

var string = "^$.*+?|\\/[]{}=!:-,";
var regex = /\^\$\.\*\+\?\|\\\/\[\]\{\}\=\!\:\-\,/;
console.log(regex.test(string));
// => true
  • among themstringhit the target\Characters should also be escaped
  • Also instringYou can also escape each character in, and the escaped result is still itself.

Metacharacters in Character Groups

Metacharacters associated with character groups are []`、^, need to escape in the place that can cause ambiguity. For example, the beginning` must be escaped, otherwise the whole character group will be treated as an antisense character group.

var string = "^$.*+?|\\/[]{}=!:-,";
var regex = /[\^$.*+?|\\/\[\]{}=!:\-,]/g;
console.log( string.match(regex) );

Case analysis

ID card

/^(\d{15}|\d{17}[\dxX])$/

Because ..|Is the lowest priority, so regularization is divided into two parts\d{15}And\d{17}[\dxX]

  • \d{15}show15Bitwise continuous number
  • \d{17}[\dxX]show17The last digit can be a number or upper and lower case letters.x

IPV4 address

(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])

It is a multi-choice structure, divided into5Part

  • 0{0-2}\dA that matches a single digit, including0Make it up. such as909009
  • 0? \d{2}, matching two digits, including0Complete, including single digits
  • 1\d{2}, match100to199
  • 2[0-4]\d, match200-249
  • 25[0-5], match250-255

Regular expression programming

Four operations

Verification

  • The most direct application of regular expressions during validation, such as form validation

Judge whether there are numbers in a string

Usesearch

var regex = /\d/;
var string = "abc123";
console.log(!!~string.search(regex));
//true

Usetest

var regex = /\d/;
var string = "abc123";
console.log( regex.test(string) );
// => true

Usematch

var regex = /\d/;
var string = "abc123";
console.log( !!string.match(regex) );
// => true

Useexec

var regex = /\d/;
var string = "abc123";
console.log( !!regex.exec(string) );
// => true

Among them, the most commonly used istest

segmentation

  • Segmentation is to cut the target string into segments, such as JSsplit

    • For example, the target stringhtml,css,javascript, separated by commas
var regex = /,/;
var string = "html,css,javascript";
console.log(string.split(regex));
//[ 'html', 'css', 'javascript' ]

Date format

2018/06/20
2018.06.20
2018-06-20

Can be usedsplitCut-out date

var regex = /\D/;
console.log("2018/06/20".split(regex));
console.log("2018.06.20".split(regex));
console.log("2018-06-20".split(regex));
// [ '2018', '06', '20' ]
// [ '2018', '06', '20' ]
// [ '2018', '06', '20' ]

extract

  • In this case, the group reference (group capture) function is usually used for regularization.

match

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2018-06-20";
console.log(string.match(regex));
//[ '2018-06-20', '2018', '06', '20', index: 0, input: '2018-06-20' ]

exec

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2018-06-20";
console.log(regex.exec(string));
//[ '2018-06-20', '2018', '06', '20', index: 0, input: '2018-06-20' ]

test

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2018-06-20";
regex.test(string);
console.log(RegExp.$1, RegExp.$2, RegExp.$3);
//2018 06 20

search

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2018-06-20";
string.search(regex);
console.log(RegExp.$1, RegExp.$2, RegExp.$3);
//2018 06 20

replace

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2018-06-20";
var date = [];
string.replace(regex, function (match, year, month, day) {
    date.push(year, month, day);
});
console.log(date);
//[ '2018', '06', '20' ]

The most common of these arematch

replace

The date format, fromyyyy-mm-ddReplace withyyyy/mm/dd

var string = "2018-06-20";
var today = new Date(string.replace(/-/g, "/"));
console.log(today);
//2018-06-19T16:00:00.000Z

Methods for regular operations, common6, string instances4Regular instances2A

  • string#search
  • string#split
  • string#match
  • string#replace
  • RegExp#test
  • RegExp#exec

searchAndmatchThe parameter problem of

  • The of the string instance4All method parameters support regular and string
  • But ..searchAndmatchConvert string to regular
var string = "2018.06.20";

console.log(string.search("."));//0
//需要修改成下列形式之一
console.log(string.search("\\."));//4
console.log(string.search(/\./));//4

console.log(string.match("."));
//[ '2', index: 0, input: '2018.06.20' ]
//需要修改成下列形式之一
console.log(string.match("\\."));
//[ '.', index: 4, input: '2018.06.20' ]
console.log(string.match(/\./));
//[ '.', index: 4, input: '2018.06.20' ]

console.log(string.split("."));
//[ '2018', '06', '20' ]

console.log(string.replace(".", "/"));
//2018/06.20

matchThe format problem of the returned result

matchReturns the format of the result, with or without modifiers for regular objectsgRelevant

var string = "2018.06.20";
var regex1=/\b(\d+)\b/;
var regex2=/\b(\d+)\b/g;
console.log(string.match(regex1));
//[ '2018', '2018', index: 0, input: '2018.06.20' ]
console.log(string.match(regex2));
//[ '2018', '06', '20' ]
  • Nog, which returns the standard matching format, the contents of the overall matching when the first element of the array is the first element, the contents captured by grouping, the first subscript of the overall matching, and the final input target string
  • YesgWhich returns all matching content
  • When there is no match, whether there is one or notgAll returnnull

execthanmatchMore powerful

When regular does notgWhen usingmatchMore information was returned. But theregAfter that, there is no key informationindex
AndexecMethod can solve this problem, it can continue matching after the last match

var string = "2018.06.20";
var regex = /\b(\d+)\b/g;
console.log(regex.exec(string));
//[ '2018', '2018', index: 0, input: '2018.06.20' ]
console.log(regex.lastIndex);//4
console.log(regex.exec(string));
// [ '06', '06', index: 5, input: '2018.06.20' ]
console.log(regex.lastIndex);//7
console.log(regex.exec(string));
//[ '20', '20', index: 8, input: '2018.06.20' ]
console.log(regex.lastIndex);//10
console.log(regex.exec(string));//null
console.log(regex.lastIndex);//0

testNeed to use when matching the whole^And$

testIt is to see if there is a regular substring match in the target string, that is, there is only a partial match.

  • To match the whole, you need to add a beginning and an end before and after the regularization.
console.log( /123/.test("a123b") );
// => true
console.log( /^123$/.test("a123b") );
// => false
console.log( /^123$/.test("123") );
// => true

splitMatters needing attention

  1. First, it can have a second parameter that represents the maximum length of the result array
var string = "html,css,javascript";
console.log( string.split(/,/, 2) );
// =>["html", "css"]
  1. Second, when grouping is used regularly, the result array contains delimiters
var string = "html,css,javascript";
console.log( string.split(/(,)/) );
// =>["html", ",", "css", ",", "javascript"]

replaceIs very strong

replaceThere are two ways to use it. Its second parameter can be either a string or a function.

When the second parameter is a string, the following characters have special meanings:

  • $1,$2,...,$99Match first1~99Text captured in groups
  • $&Matched substring text
  • $`Text to the left of the matched substring
  • $'The text to the right of the matched substring
  • $$Dollar symbol

For example, the “2,3,5“to become”5=2+3“:

var result = "2,3,5".replace(/(\d+),(\d+),(\d+)/, "$3=$1+$2");
console.log(result);
// => "5=2+3"

When the second parameter is a function, the parameters of the callback function are as follows:

"1234 2345 3456".replace(/(\d)\d{2}(\d)/g, function(match, $1, $2, index, input) {
    console.log([match, $1, $2, index, input]);
});
// => ["1234", "1", "4", 0, "1234 2345 3456"]
// => ["2345", "2", "5", 5, "1234 2345 3456"]
// => ["3456", "3", "6", 10, "1234 2345 3456"]

Modifier

  • gGlobal matching, that is, finding all matches, the word isglobal
  • iIgnore case of letters, wordsingoreCase
  • mMulti-line matching only affects^And$, both become the concept of line, that is, the beginning of the line and the end of the line. The word ismultiline