2020 Teach you understand Javascript regular expressions

Foreword

4089 word article, read it takes about 12 minutes.

text

I believe many people first saw the first impression of regular expressions are ignorant of force, for starters, a regular expression is a string of a string of meaningless, confusing. However, the regular expression is a very useful feature, whether it is Javascript, PHP, Java or Python has a regular expression. Just like regular expression has evolved into a small language. As part of the programming language, it does not want variables, functions, objects so easy to understand this concept. Many people understand regular expressions are based on simple matching, used in business until completely rely on to solve the problem copy from the Internet. I have to say, with the development of a variety of open source community, by copy can indeed solve most of the problems in business, but as a pursuit of programmers, will never let myself rely solely on Ctrl C + Ctrl V to programming. Based on Javascript regular expression, combined with my personal thinking within the community and some excellent article to a regular expression regular expressions to explain.

Javascrip the use of regular expressions

Under a brief introduction, the use of regular expressions in Javascript in two ways:

1. ** Constructor: ** using the built RegExp constructor;
2. Literal **: ** double slash (//);

Using the constructor:

var regexConst = new RegExp('abc');

Use double slash:

var regexLiteral = /abc/;

Matching

Javascript in the regular expression object there are two main methods, test and exec:

test () method takes one parameter, the parameter is a string and a regular expression for matching, the following examples:

var regex = /hello/;
var str = 'hello world';
var result = regex.test(str);
console.log(result);
// returns true

exec () method performs a search for a matching string specified. Returns a result array or null.

var regex = /hello/;
var str = 'hello world';
var result = regex.exec(str);
console.log(result);
// returns [ 'hello', index: 0, input: 'hello world', groups: undefined ]
// 匹配失败会返回null
// 'hello' 待匹配的字符串
// index: 正则表达式开始匹配的位置
// input: 原始字符串

We are used hereinafter test () method to test.

Flag
flag parameter is used to indicate a range of the search string, there are 6 flags:

double slash Syntax:

var re = /pattern/flags;

The constructor syntax:

var re = new RegExp("pattern", "flags");

Facie instance:

var reg1 = /abc/gi;
var reg2 = new RegExp("abc", "gi");
var str = 'ABC';
console.log(reg1.test(str)); // true
console.log(reg2.test(str)); // true

Regular expressions thinking

A regular expression is a pattern matching the string.

Remember, the regular expression is operating on strings, it generally has a string type of programming language, there will be regular expressions.

For strings, it is composed of two parts: the content and location .

For example, a string:

'hello World';

It is the content:

'h', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd'

As each individual string is the string of letters content, it refers to the position:

the position is referred to a position between adjacent characters, i.e. the position of the figure above the arrow.

Matching content compared to the matching position is more complicated, look under the simple matching method:

Simple match

The easiest way is to complete the match to match a string:

 var regex = /hello/;
 console.log(regex.test('hello world'));
 // true

Complex matching
regular expression There are many special characters used to match a string, how much solution is to match (by location match) and match who (by content matching) problems. Let's look at some of the matches to determine who the special characters:

Matched content
simple special characters
simply match the content of the following special characters:

[XYZ]: the character set, a character matching for any square brackets, for example:

var regex = /[bt]ear/;
console.log(regex.test('tear'));
// returns true
console.log(regex.test('bear'));
// return true
console.log(regex.test('fear'));
// return false

** Note: ** In addition to the special character ^, all other special characters in the character set (in square brackets) will lose its special meaning.

[^ Xyz]: This is the character set, and the above character sets of different things, which is used to match all characters not in brackets. such as:

var regex = /[^bt]ear/;
console.log(regex.test('tear'));
// returns false
console.log(regex.test('bear'));
// return false
console.log(regex.test('fear'));
// return true

For lowercase letters, uppercase letters and numbers of these three very popular character, but also provides a relatively simple wording:

\ D: equivalent to [0-9], matching numeric characters.

\ D: equivalent to [^ 0-9], matching non-numeric characters.

\ W: equivalent to [a-zA-Z0-9_], matching digits, lowercase letters, uppercase letters and underlined.

\ W: equivalent to [^ A-Za-z0-9_], the matching non-numeric, non-lowercase letters, uppercase letters and non-non-underlined.

[Az]: If we want to match all the letters, it is a stupid way to do all letters are written in square brackets, but it is clear that to achieve very elegant, easy to read and very easy to miss letters. There is a simpler implementation, is to specify a range of characters, such as ** [ah] is to match all the letters between the letters of a letter to H, can also be matched in addition to lowercase and uppercase letters, numbers, [0-9] matches a number from 0 to 9, [AZ] ** a match between all capital letters Z. such as:

var regex = /[a-z0-9A-Z]ear/;
console.log(regex.test('fear'));
// returns true
console.log(regex.test('tear'));
// returns true
console.log(regex.test('1ear'));
// returns true
console.log(regex.test('Tear'));
// returns true

x | y: match x or y. such as:

var regex = /(green|red) apple/;
console.log(regex.test('green apple'));
// true
console.log(regex.test('red apple'));
// true
console.log(regex.test('blue apple'));
// false

: Match any single character except a newline, if the flag s will match a newline example:

var regex = /.n/ ;
console.log(regex.test('an'));
// true
console.log(regex.test('no'));
// false
console.log(regex.test('on'));
// true
console.log(regex.test(`
n`));
// false
console.log(/.n/s.test(`
n`)); // 注意这里的正则
// true

\: This is used to escape special characters, such as we want to match the square brackets, you can use \ to escape the same match \ can also use \ to escape, such as:

var regex = /\[\]/;
console.log(regex.test('[]')); // true

The above special characters can only match a target string once, but many scenes we need to match the target string multiple times, such as we want to match numerous a, above special characters will not be able to meet our needs, so match special characters in the content of some of it is used to solve this problem:

{N}: n times before the character matching braces. example:

var regex = /go{2}d/;
console.log(regex.test('good'));
// true
console.log(regex.test('god'));
// false

Well understood, the above is equivalent to regular / good /.

{N,}: matching characters before braces at least n times. example:

var regex = /go{2,}d/;
console.log(regex.test('good'));
// true
console.log(regex.test('goood'));
// true
console.log(regex.test('gooood'));
// true

{N, m}: before brace characters match at least n times at most m times. example:

var regex = /go{1,2}d/;
console.log(regex.test('god'));
// true
console.log(regex.test('good'));
// true
console.log(regex.test('goood'));
// false

For more convenient to use, but also provides a more convenient three commonly used rule of writing:

*: Equivalent to {0}. It indicates that the preceding character appears at least 0 times, that is, appear any number of times.
+: Equivalent to {1}. It indicates that the preceding character appears at least once.
?: Equivalent to {0,1}. It indicates that the characters do not appear or appear more than once.

Using the above content matching ordinary characters has to meet the demand, but as line breaks, page breaks, and carriage returns and other special symbols or more special characters can not meet the demand, so the regular expression matching is also designed to provide a special symbol Special characters:

\ S: matches a whitespace characters, including spaces, tabs, page breaks and line breaks. Look at an example:

var reg = /\s/;
console.log(reg.test(' ')); // true

\ S: Matches a non-whitespace character;

\ T: matches a horizontal tab.

\ N: Matches a newline.

\ F: match for a website page.

\ R: matching a carriage return.

\ V: matching a vertical tab.

\ 0: match NULL (U + 0000) character.

[\ B]: matches a backspace.

\ CX: when X is in between characters A to Z, a matching string of control character.

Advanced content match

(X): x match and remember x, in brackets is known as capturing groups. The brackets can support strong sub-expressions, that can be written in regular brackets go, then as a whole to match. There is also a special character called \ n, n, and in front of the line breaks are not the same, this is a variable refers to the number, used to record the number of capturing groups. example:

console.log(/(foo)(bar)\1\2/.test('foobarfoobar')); // true
console.log(/(\d)([a-z])\1\2/.test('1a1a')); // true
console.log(/(\d)([a-z])\1\2/.test('1a2a')); // false
console.log(/(\d){2}/.test('12')); // true

In the regular expression replacement part, will have to use something like $ 1, $2、...、$ N-this syntax, for example, 'bar foo'.replace (/ (... $1')。$& It represents the entire original string for matching.

(:? X): match 'x' but does not remember the match. It is called non-capturing group. Here \ 1 will not take effect, will it as an ordinary character. example:

var regex = /(?:foo)bar\1/;
console.log(regex.test('foobarfoo'));
// false
console.log(regex.test('foobar'));
// false
console.log(regex.test('foobar\1'));
// true

Matching position
again stressed that position is the position where the front Ituri arrow.

^{: Match beginning of the string, which is the position of the first arrow of our previous location map. Attention and [} XY] are ^{distinguished, two entirely different meaning, see} example:

var regex = /^g/;
console.log(regex.test('good'));
// true
console.log(regex.test('bad'));
// false
console.log(regex.test('tag'));
// false

I.e. above meaning regular matching strings beginning with the letter g.

$: End position of the matching string, examples:

var regex = /.com$/;
console.log(regex.test('[email protected]'));
// true
console.log(regex.test('test@testmail'));
// false

I.e. above meaning regular matches strings ending .com

\ B: matching a word boundary. Note that the match is a word boundary, this boundary means that a word is not another "word" character followed with front position or other "word" character position. That is a position to meet the requirements of both sides are not all normal characters are incomplete or special symbols. Look at an example:

console.log(/\bm/.test('moon')); // true 匹配“moon”中的‘m’，\b的左边是空字符串，右边是'm'
console.log(/oo\b/.test('moon')); // false 并不匹配"moon"中的'oo'，因为 \b左边上oo，右边是n,全是正常字符
console.log(/oon\b/.test('moon')); // true 匹配"moon"中的'oon'，\b左边是oon，右边是空字符串
console.log(/n\b/.test('moon   ')); // true 匹配"moon"中的'n'，\b左边是n，右边是空格
console.log(/\bm/.test('   moon')); // true 匹配"moon"中的'm'，\b左边是空字符串 右边是m
console.log(/\b/.test('  ')); // false 无法匹配空格，\b左边是空格或空字符串，右边是空格或是空字符串，无法满足不全是正常字符或是不全是正常字符

If this is not well understood, you can look \ B, a little more comprehensible.

\ B: matching a non-word boundary, and \ b contrary, that match is about both sides of all is the location of all normal characters or special symbols. Look at an example:

console.log(/\B../.test('moon')); // true 匹配'moon'中的'oo' \B左边是m，右边是o
console.log(/\B./.exec('  ')); // true 匹配'  '中的' ' \B左边是空字符串，右边是空格' '

x (y?!): only when 'x' is not followed behind 'y' match 'x', which is known as negative look forward. example:

var regex = /Red(?!Apple)/;
console.log(regex.test('RedOrange')); // true

(?! <Y) x: only when 'x' not preceded by 'y' match 'x', which is known as a reverse lookup denied. example:

var regex = /(?<!Red)Apple/;
console.log(regex.test('GreenApple')); // true

(? =) X y: match 'x' only if 'x' followed by 'y' This is called the first assertion. example:

var regex = /Red(?=Apple)/;
console.log(regex.test('RedApple')); // true

x (<= y?): Match 'x' only if 'x' front 'y' which is called the trailing assertion. example:

var regex = /(?<=Red)Apple/;
console.log(regex.test('RedApple')); // true

JS can use regular expressions approach

practice
matches any 10-digit:

var regex = /^\d{10}$/;
console.log(regex.test('9995484545'));
// true

Regular analysis under the above:

1. We want to match across the entire string, the string can not have what we want to match can therefore use ^ and $ limit the beginning and end;
2. \ D numbers to match, it is equivalent to [0-9];
3. {10} matches \ d expression, i.e. \ d repeated 10 times;

Match the date format DD-MM-YYYY or DD-MM-YY:

var regex = /^(\d{1,2}-){2}\d{2}(\d{2})?$/;
console.log(regex.test('10-01-1990'));
// true
console.log(regex.test('2-01-90'));
// true
console.log(regex.test('10-01-190'));

The above analysis Regular:

1. Similarly we use ^ and $ restricting the beginning and end;
2. \ D {1,2}, which matches one or two digits;
3. - to match a hyphen, no special meaning;
4. () Wrapped up a sub-expression, also known as capturing groups;
5. {2} indicates twice the sub-matching expression above;
6. \ D {2} matches the two numbers;
7. ? (\ D {2}) subexpression matches the two numbers, and then match or do not match a sub-expression;

CamelCase turn underlined name:

var reg = /(\B[A-Z])/g;
'oneTwoThree'.replace(reg, '_$1').toLowerCase();

The above analysis Regular:

1. \ B Avoid capitalize the first letter of the characters are also cast away;
2. ([AZ]) captures captured uppercase group;
3. Then replace in using this syntax $ n to indicate the previous capture;
4. Call toLowerCase lowercase letters;

Conclusion
Regular expressions hard to remember the rules, I hope this article can help you better to remember these special characters, I hope you can write cattle fork regular expressions.
Above are some of my own thoughts, to share out the welcome to correct me, the way to find a wave of concern