The use of js regular expressions

JS Regular Expressions Explained

RegExp is a JS regular expression object, there are 2 ways to instantiate a RegExp object: literal and constructor.

Literally instantiating a RegExp object


The slash / at the beginning and the end are the boundaries of the regular expression, // the text in the middle is the regular expression text, and gi at the end is the modifier of the regular expression.

Constructor instantiates RegExp object


The first parameter is the regular expression text, the second parameter is the regular expression modifier.

global: whether the RegExp object has the flag g.

ignoreCase: whether the RegExp object has the flag i.

lastIndex: an integer indicating the character position at which to start the next match.

multiline: if or not the RegExp object has the flag m.

source: the source text of the regular expression.

The RegExp object has 3 methods: test(), exec(), and compile().


The test() method retrieves the specified value in a string. The return value is either true or false.





Result. exec()

The exec() method retrieves the specified value in a string. The return value is the value found. If no match is found, null is returned.





Result. compile()

The compile() method is used to change the RegExp.

Compile() can either change the retrieval mode or add or remove a second parameter.

g: global full-text search, if you don’t add this parameter, the search will stop when it reaches the first match

i: ignorecase is not case-sensitive, the default is case-sensitive

m: multiplelines multiline search, the default is to search only the first line

The text portion of a regular expression contains The text part of the regular expression contains original text characters and metacharacters, where the original text characters represent the meaning of the characters themselves, such as abc123 and so on.

Metacharacters represent non-alphabetic characters with special meanings, such as \b, \w, \d, +, *, ? etc.

Commonly used metacharacters

Generally a character in a regular expression corresponds to a character in a string, such as the meaning of the expression ab is ab.

Expressions use [] to define a class of characters, which means that it can match this kind of character inside [], it is a generalized reference, not a one-to-one correspondence.

For example, the expression [abc123] means that any one of these strings can be matched.

A range class can be constructed by connecting 2 numbers or letters inside a character class using the horizontal line -, e.g., [a-zA-z0-9-] means that it can match all 26 upper and lower case letters and all the numbers 0-9 as well as the horizontal line -.

Note that to match the horizontal line “-“, the horizontal line must be placed last.

Predefined classes can be understood as range classes that JS writes for us by default, allowing us to use a simple metacharacter to use it. For example, “\w” is a predefined class, which is equivalent to the range class [A-Za-z0-9_]; “.” can match any single character except “\n”.

Boundaries are of 2 types, those that start or end with a string, and word boundaries

The quantifier means that metacharacters can be matched more than once in a row

JS regular expressions are greedy by default, and will lookup with the most matches principle, and non-greedy modes allow the expression to lookup with the least matches principle.

Non-greedy mode just needs to add “?” after the quantifier. can be, such as “123456789″ string want to match the 3 digits as a group to write the expression /\d{3,5}?

Expressions with () to define a grouping, so that the metacharacter can act on a combination of expression strings, such as /(js|php){3}/gi.

Expressions in each grouping of the contents of the match is a variable that can be captured, you can use the value of the $1, $2, $3 …, such as the expression / (\d{4})-(\d{2})-(\d{2})/ contains $1, $2, $3. If you want to ignore the grouped matches, you need to add “? :” in front of the grouping, then you can get the content outside the grouping match.

Foresight is a regular expression followed by an assertion, which not only matches the expression part, but also needs to satisfy the assertion part, which will not be included in the matching result.

Forward-looking exp(? =assert) as in “\w(? =\d)”

Negative forward-looking exp(? !assert) as in “\w(?! \d)”



The match() method retrieves the specified value within a string, or finds a match of one or more regular expressions.

If the regexp does not have the flag g, then the match() method performs only one match within the stringObject.

If it doesn’t find any matching text, match() returns null.

Otherwise, it returns an array holding information about the matching text it found. The 0th element of this array holds the matching text, while the remaining elements hold the text that matches the sub-expressions of the regular expression.


The search() method does not perform a global match, it ignores the flag g. It also ignores the lastIndex property of the regexp and always searches from the beginning of the string, which means it always returns the first match of the stringObject.



The replace() method of stringObject performs a find and replace operation. It will find substrings in stringObject that match the regexp and then replace those substrings with replacement. If the regexp has the global flag g, then the replace() method will replace all matching substrings. Otherwise, it replaces only the first matching substring.

replacement can be a string or a function. If it is a string, then each match will be replaced by a string. But the $ character in replacement has a specific meaning. As shown in the table below, it indicates that the string obtained from pattern matching will be used for replacement.



If separator is a regular expression that contains sub-expressions, then the array returned includes strings that match those sub-expressions (but not the text that matches the entire regular expression )

Regular expression syntax semantic testing tool:

How to use regular expressions in js (with code)

This time to bring you how to use regular expressions in js (with code), what are the considerations for using regular expressions in js, the following is a practical case, together with a look.

Read the table of contents

Creating regular expressions

Special characters in regular expressions




*,+,. (decimal point)

? (question mark)


(? :x)

x(? =y),x(? :y),x|y




Regular Expression Flags

Regular Expressions

Regular Expressions

Regular Expression Usage

Many times more than one will be confused by the regular expression, and recently found time to make systematic study of the regular expression, organize the As follows:

Creation of regular expressions

Two methods, one is to write directly, consisting of patterns contained between slashes; the other is to call the constructor of the RegExp object.

The creation code for both methods is as follows:

//Direct creation



///calling the constructor


constregex4=newRegExp(/^[a-zA-Z]+[0-9]*\W?_$/, “gi”);

constregex5=newRegExp(‘^[a-zA-Z]+[ 0-9]*\W?_$’,’gi’);As you can see, when calling the RegExp constructor to create a regular expression, the first parameter can be either a string or a directly created regular expression.

It is important to note that both the toLocaleString() and toString)() methods inherited by RegExp instances return the literal amount of the regular expression, independent of the way in which it was created

For example:

constncname='[a-zA-Z_][\\\w\\\-\\\ .] *’;

constqnameCapture='((? :’+ncname+’\\:)?” +ncname+’)’;

constst startTagOpen=newRegExp(‘^<‘+qnameCapture);

startTagOpen.toString();//’/^<((? :[a-zA-Z_][\w\-\.] *\:)? [a-zA-Z_][\w\-\.] *)/’Special characters in regular expressions


1. Precedes a non-special character with a backslash to indicate that the next character is special;

2. Converts the subsequent special character to a literal;

Note: Convert \ when using the RegExp constructor, because \ is also a converted character in a string


1. match the start of input;

2. indicate reverse character set when first in [];



/^A/.exec(‘AnE’)//[“A”,index:0, input: “AnE”]$

Match end of input


/t$/.exec(‘eat’)//[“t”,index:2,input: “eat”]

*,+,. (decimal)*: match the previous expression 0 or more times. Equivalent to {0,};

+: matches the previous expression 1 or more times. Equivalent to {1,};

. :

Matches any single character except a newline character;

? (question mark)

1. Matches a previous expression 0 or 1 times. Equivalent to {0,1};

2. If immediately followed by any quantifier *+? {} will make the quantifier non-greedy (matching as few characters as possible), the opposite of the greedy mode used by default;

3. Applied to prior assertion


/\d+/.exec(‘123abc’)//[“123”,index:0,input: “123abc”]

/\d+? /.exec(‘123abc’)//[“1”,index:0,input: “123abc”](x)

Matches ‘x’ and remembers the matches, parentheses indicate capture brackets;


/(foo)(bar)\1\2/.test(‘barfoobarfoo ‘);//false



/(bar)(foo)\1\2/. .test(‘barfoofoobar’);//false


‘barfoobarfoo’.replace(/(bar)(foo)/,’$2$1′) The ‘(foo)’ and ‘(bar)’ in the pattern //”foobarbarfoo”/(foo)(bar)\1\2/ matches and remembers the first two words in the string “foobarfoobar”. The pattern \1 and \2 matches the last two words of the string.

Note: \1, \2, \n are used in the matching part of the regular expression, in the substitution part of the regular expression, you have to use the syntax like $1, $2, $n. For example, ‘barfoo’.replace(/(…) (…) /,’$2$1′).

(? :x)

Matching ‘x’ but not remembering the matches is called non-capture brackets;


‘foo’.match(/foo{1,2}/)//[“foo”,index:0,input: “foo”]

‘foo’.match(/(? :foo){1,2}/)//[“foo”,index:0,input: “foo”]

‘foofoo’.match(/(? :foo){1,2}/)//[“foofoo”,index:0,input: “foofoo”]

‘foofoo’.match(/foo{1,2}/)//[“foofoo”,index:0,input: “foofoo”]Usage Scenarios: example expression /(? :foo){1,2}/. If the expression is /foo{1,2}/, {1,2} will only work for the last character ‘o’ of ‘foo’. If non-capturing brackets are used, {1,2} will match the entire word ‘foo’.

x(? =y),x(? !y),x|y

x(? =y): matches ‘x’ just when ‘x’ is followed by ‘y’;

x(? !y): matches ‘x’ just when ‘x’ is not followed by ‘y’;

x|y: matches either x or y

Neither of these matches results in a match that does not contain y


‘JackSprat’.match(/Jack(? =Sprat)/)//[“Jack”,index:0,input: “JackSprat”]

‘JackWprat’.match(/Jack(? =Sprat)/)//null

‘JackWprat’.match(/Jack(? =Sprat|Wprat)/)//[“Jack”,index:0,input: “JackWprat”]

/\d+(?! \.) /.exec(“3.141”)//[“141”,index:2,input: “3.141”]{n},{n,m}:

{n}: matches a previous character exactly n times;

{n,m}: matches a previous character at least n times and at most m times. If the value of n or m is 0, this value is ignored;



/a{2}/.exec(‘caandy’)//[“aa”,index:1,input: “caandy”]

/a{ 2}/.exec(‘caaandy’)//[“aa”,index:1,input: “caaandy”]

/a{1,3}/.exec(‘candy’)//[“a”,index:1,input: “candy”]

/a{1,3}/.exec( ‘caandy’)//[“aa”,index:1,input: “caandy”]

/a{1,3}/.exec(‘caaandy’)//[“aaa”,index:1,input: “caaandy”]

/a{1,3}/.exec(‘ caaaandy’)//[“aaa”,index:1,input: “caaaandy”][xyz],[^xyz]

[xyz]: a collection of characters. Matches any character in square brackets;

[^xyz]: a reverse character set. Matches any character not contained in square brackets;

Both of these matches can use a dash (-) to specify a range of characters, and special symbols have no special meaning in the character set.



returnstring.replace(/([. *+? ^=! :${}()|[\]\/\\])/g,”\\\$&”);

//$& denotes the entire matched string

}Example of . *+? ^=! :${}() all indicate literals and have no special meaning.


\b: Match a word boundary. The boundaries of a matched word are not contained in the content of the match. In other words, the length of the content of a matching word boundary is 0;

\B: matches a non-word boundary;


/\bm/.exec(‘moon’)//[“m”,index:0,input: “moon”]

/\bm/.exec(‘ sanmoon’)//[“m”,index:4,input: “sanmoon”]


/\B.. /.exec(‘noonday’)//[“oo”,index:1,input: “noonday”]

/y\B.. /.exec(‘possiblyyesterday’)///y\B… /.exec(‘possiblyyesterday’)\d: matches a number, equivalent to [0-9];

\D: matches a non-numeric character, equivalent to [^0-9];

\f: matches a page break (U+000C);

\n: matches a newline (U+000A);

/y\y\B… /.exec(‘possiblyyesterday’)

\r: matches a carriage return (U+000D);

\s: matches a whitespace character, including spaces, tabs, page breaks and line breaks, equivalent to [\f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\ u3000\ufeff];

S\: matches a non-whitespace character, equivalent to [^\f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff];

\w: matches a single character (letter, number, or underscore), equivalent to [A-Za-z0-9_];

\W: matches a non-single character, equivalent to [^A-Za-z0-9_];

Regular expression flags

g: global search;

i: case insensitive;

m: multi-line search;

Regular expression use

RegExp has exec() and test() methods;

exec matches with result: match result, capture result, index and input.

test matches with result true or false and is more efficient than exec.

String has match(), replace(), search(), split() methods;

match matches the same result as RegExp’s exec, replace replaces according to regular expression, search finds so position, split splits the string according to regular expression.

When replace has function, the parameter description is as follows:

*Match item

*Memory item (the item inside the parentheses)


*matching index

*input input item

Recommended reading:

Writing a simple regular way in JS

Regular and Linux three major text processing tools used in detail

JS regular expressions how to use

This time to bring you JS regular expressions how to use, what are the considerations for using JS regular expressions, the following is the actual case, together with a look.

It is important to learn how to use regular expressions, here are some basic knowledge about regular expressions

\:escape character

^:match the start of the string

$:match the end of the string

*:match the previous expression any number of times

+:match the previous expression one or more times

? p>

? :Match the preceding expression zero or more times

{n}:Match a definite n times, n is a non-negative integer

{n,}:Match at least n times, n is a non-negative integer

{n,m}:Match at least n times, up to m times, n and m are non-negative integers and n<=m

(*,+,{n,m})? : Non-greedy match pattern, match as few as possible, e.g. “z+” can match “zzzzzz”, “z+?” matches only to “z”

. :Match any single character except \r\n

(pattern):Match a pattern and get the match, you can get the result of the match, use \1-\9 to indicate, for example, “(o)” matches to “o”, “(o)” matches to “o”, “(o)” matches to “o”, “(o)” matches to “o”, “(o)” matches to “o”, “(o)” matches to “o”, “(o)” matches to “o”. “(o)\1” matches to “oo”, “(\d{3})\1” matches to “123123 “, cannot match to “123456”

(? :pattern):non-get match, matches pattern, but doesn’t get a match

(? =pattern):non-access match, positive sure prefetch, matches a lookup string at the start of any string matching the pattern, the match does not need to be fetched for later use, e.g. “test(? = 123)” matches “test” in “test123”, but not “test” in “test456”. “test”

(? !pattern): non-access match, forward negation pre-check, matches the lookup string at the beginning of any string matching the pattern, the match does not need to be accessed for later use, e.g., “test(? =123)” matches “test” in “test456” but not “test” in “test123”. “test”

(? <=pattern): non-accessible match, reverse affirmative precheck, similar to forward affirmative precheck, but in the opposite direction, e.g. “(? <=123)test” can match “123test” in “test”, but can not match “456test “test” in “123test” but not “456test”

(? <!pattern): non-access match, reverse negative prefix, similar to forward negative prefix, but in the opposite direction, e.g. “(? <!123)test” can match “test” in “456test”, but cannot match “123test “test” in “456test”, but not “test” in “123test”

x|y:matches x or y

[xyz]:matches any one of the included characters

[^xyz]:matches any one of the unincluded characters

\b:matches a word boundary, for example. “on\b” can match “on” in “location”, can’t match “on” in “component”. “on” in “location”, but not “on” in “component”

\B: matches non-word boundaries, e.g. “on\B” matches “on” in “component”, but not “on” in “location”. “on” in “component” but not “on” in “location”

\d:Match a numeric character

\D:matches a non-numeric character

\s:matches any invisible character, equivalent to [\f\n\r\t\v]

\S:matches any visible character, equivalent to [^\f\n\r\t\v]

Learning regular not only helps us to reduce the amount of code, but also solves a lot of complex needs, so first build a good foundation in order to climb to the higher level

Recommended reading:

Javascript’s Singleton Pattern

Flex Layout Explained

Observer Pattern in Javascript

Proxy Pattern in Javascript

In what cases are ^ and $ used inside regular expressions in JS?

When they are used, that depends on your needs. Generally speaking, ^ in regular means beginning and $ means end.

These two are zero-width characters (not actually characters, just positions, similar to \A,\Z,\B,\b).

^\d matches a digit at the beginning of a string.

\d$ matches a digit at the end of the string.

/^\d/ Matches strings that start with a digit, e.g. 123acb;

/\d$/ Matches strings that end with a digit, e.g. abc123;

/^\d$/ Matches strings that are a digit from the beginning to the end, e.g. 123456.