Regular expressions, whether they are front-end or back-end development, are easy to encounter pain points, just like your ex-girlfriend sometimes makes you so painful, recently spared time to learn the regular expressions in the next js, keep in mind.
Normal reading takes 10 minutes. A 10-minute review will consolidate the foundation.
One: the theoretical part
1. Instantiate in two ways
var reg = /\bis\b/g; // independent variable var reg = new RegExp('\\bis\\b','g'); // The advantage of instantiating objects is that you can pass variables in
2. Modifiers or so-called object read-only properties
Global: whether full-text search, default false reg.global IgnoreCase: Case sensitive or not, default is false reg.ignoreCase Multiline: multiline search, default false lastIndex: Next position of the last character of the current expression matching content source: The text string of the regular expression
These attributes can be seen on the instantiated object of the regular object and are modifier symbols for our regular expression.
3. Common expression patterns
[abc] Finds any character between square brackets. [0-9] Find any number from 0 to 9. (x|y) Find any options separated by |.
4. Metacharacters
(1)**Original text character**: Characters that represent its original meaning such as abc, 123
(2)**Metacharacters**: Non-alphabetic characters that have special meaning in regular expressions such as: \b for matching word boundaries,
(3) Characters with specific meaning in regular expressions: * +? $^. \() {} []
5. Character Classes
Normally a regular expression has a character corresponding to a string and a character. The expression a b\t means: a letter a letter B plus a horizontal t a b\r carriage return\n to wrap lines.
You can use the meta character [] to construct a simple [class], which refers to an object that matches certain characteristics, a generic reference, rather than a specific character, such as the expression [a b c]: Categorize the characters a or b or C into one class, and the expression can match such characters, that is, to match the characters in a b c, but [^a b c] is the oppositeMeaning.
6. Scope Classes
Regular expressions provide a range class that can use [a-z] to connect two character classes to represent any character from a to z, which is a closed interval, that is, containing a and z;
Can be concatenated: [a-zA-Z], but if the character'-'is included in the range as well: e.g. [0-9-]:'2012-08-08'. replace (/[0-9-]/,');
7: Predefined classes match common character classes
.Equivalent to [^\r\n] for all characters except carriage return and line break \d is equivalent to the [0-9] numeric character d:digit \D [^0-9] Non-numeric Characters \s is equivalent to the [\t\n\x0Bf\r] space character s: \S Non-blank Symbol \w is equivalent to the [a-zA-Z_0-9] word character (letter, number underscore) w:word Boundary matching ^Start with XXX $ends with XXX \b Word boundary \B is not a word boundary
8 quantifier: acts on the next letter, not the whole word, and needs to be grouped to get the whole word
What?Occurs 0 or 1 time (at most 1 time)
+occurs one or more times (at least once)
* 0 or more occurrences (any time)
{n} occurs n times
N to m occurrences of {n, m}
{n,} occurs at least N times
Quantifiers are placed after metacharacters, such as \d+9: Two modes
**Greedy Mode**: Match as much as possible until the match fails, that is, if more than one condition is met in the matching process, which one will be chosen the most
**Non-greedy mode**: Let the regular expression match as little as possible, and don't try again once it matches successfully,** Add [?] after the quantifier**
Eg:'12345678'.replace (/\d{3,6}/g,'X') X78 greedy mode: match as much as possible
'12345678'.replace (/\d{3,6}?/g,'X')'XX78'non-greedy mode: as few matches as possible
10 Groups
(1) The grouping function can be achieved by using () so that the quantifier acts on the grouping (Byron) {3} and the matched three Byronnn s if the direct Byron{3}
Example: Lowercase letters appear three times in a row
'a1b2c3d4'.replace(/[a-z]\d{3}/g,'Q'); //"a1b2c3d4"
'a1b2c3d4'.replace(/([a-z]\d){3}/g,'Q'); //"Qd4"
(2). Use to divide a regular expression into two parts [or |]
'ByrCasperByronsper'.replace(/Byr(on|Ca)sper/g,'Q'); // "QQ"
(3) Reverse reference, capturing must be done on the basis of grouping, which should be supplemented in subsequent cases.
For example, 2015-12-25 => 12/25/2015 uses'$1 $2...'to represent capturing grouped content based on grouping.
(4). Non-capturing groupings, do not want to capture certain groupings, just add them within the group?: Yes
For example,'2015-07-09'.replace (/(?:\d{4}) -(\d{2}) -(\d{2})/g,'$2/$3/$1'); //09/$3/07"
11 Prospect
js does not support back-up eg: matching to Zhang San, and also to see if his father is called Li Si
Regular expressions start parsing from the beginning to the end of the text, with the end of the text heading "front" and the end of the text heading "back"
Prospective: When a regular expression matches a rule, check ahead for assertions, and look backward/forward in the opposite direction (not supported by javascript)
Conforms to the assertion: positive/forward matching is forward-looking: exp(?=assert) Non-conforming Assertion: Negative/Negative Matching Negative Forward Looking: exp(?!assert)
It is important that a forward-looking assertion is used only as a condition of judgment and not as part of the rule.
12 Some methods of regular correlation
test Global matching is not supported RegExp.prototype = { test: Global matching is not supported re.test(str) Focus on detecting returns true/false : Return Array [Matched Items],Output sub-matching items if there are sub-regularities, which one starts matching index] } String.prototype = { search: No return found-1 str.seach(re); match: Return the matched array str.match(re) Without g Match only once replace: split }
2. Actual warfare cases
**(1) is replace** const s = 'this is a book'.replace(/\bis\b/,'~'); // "this ~ a book" const s1 = 'this is a book'.replace(/\Bis\b/,'~'); // "th~ is a book" **(2) hold http And ends with jpg Of url Delete protocol header, return//...jpg** https://cdn.baidu.com/images/asdas.jpg http://cdn.hexun.com/images/asdas.jpg https://cdn.baidu.com/images/asdas.png http://cdn.sohu.com/images/asdas.jpg https://cdn.baidu.com/images/asdas.jpg http://cdn.baidu.com/images/asdas.png https://cdn.baidu.com/images/asdas.png //Regular: `/^http:(\/\/+.jpg)$/gi` (3) Replace all dates below with months:-day-year 02-03-2006 test/07/sd 05-10-2015 16555/12/45 1253645/2131/34 05-15-1998 //Regular: str.replace (/^(\d{4}) [/-] (\d{2}) [/-] (\d{2}) $/ $2-$3-$1) (4) // Forward Looking const s4 = 'v3asd7*5sd'.replace(/\w(?=\d)/g,'~'); // "~3as~7*5sd" // Negative Forward Looking Match is the result of grouping Note why global matching is not used? const s5 = 'v3asd7*5sd'.replace(/\w(?!\d)/,'~'); // "v~asd7*5sd" (5) // Non-capturing groupings are not returned as matches const str_0 = 'window 98 is ok 11'; const re_0 = /window (?=\d)/g; // Not at all as a result const re_1 = /window (?:\d+)/g; // Non-capturing grouping definition subexpressions can be modified as a whole, but subexpression matching results will not be stored. const re_2 = /window (\d+)/g; // Will appear as a matching item in the child console.log( re_0.exec(str_0) ); console.log( re_1.exec(str_0) ); console.log( re_2.exec(str_0) ); //The result is: [ 'window ', index: 0, input: 'window 98 is ok 11' ] [ 'window 98', index: 0, input: 'window 98 is ok 11' ] [ 'window 98', '98', index: 0, input: 'window 98 is ok 11' ] (6) var str_img = "img1.jpg,img2.jpg,img3.bmp"; var str_re_1 = /(?:\w+)(?=\.jpg)/g; var str_re_2 = /(?:\w+)(?:\.jpg)/g; console.log( str_img.match(str_re_1) ) //[ 'img1', 'img2' ] console.log( str_img.match(str_re_2) ) // [ 'img1.jpg', 'img2.jpg' ] // Matching is used above but see the result of execution of the code below console.log( str_re_1.exec(str_img) ); Output Results[ 'img1', index: 0, input: 'img1.jpg,img2.jpg,img3.bmp' ] Why not all of them? //Take a second look at the code var result; while ( (result= str_re_1.exec(str_img)) !=null ){ console.log(str_re_1.lastIndex) console.log(result) } >> The result of execution is: 4 [ 'img1', index: 0, input: 'img1.jpg,img2.jpg,img3.bmp' ] 13 [ 'img2', index: 9, input: 'img1.jpg,img2.jpg,img3.bmp' ] //In summary, exec is not a global match (7)4 digits in the middle of the mobile number **** console.log( '15201095029'.replace(/(?:\d{4})(?=\d{4}$)/g,function($,$1){ return '****' }) ); (8)Convert to Hump Writing console.log( 'app-com-up'.replace(/-(\w)/g,function($,$1){ return $1.toUpperCase() }) ); (9)Greedy Match .+Match non-greedy .+?Is a greedy match