1. Introduction
The purpose of this article is not to let you become a master of regular, but just to describe some simple regular writing methods and how to write some simple regular. Let’s work together!
2. The body
2.1 Benefits Section
First release write regular common API table, after all, as an API engineer, API is very important!
API table read, we learned half of the regular!
2.2 Recognition of fuzzy matching
Regular exact matching is of little significance, and most of them are fuzzy matching. There are two ways: horizontal matching and vertical matching 1. Lateral match
// indicates a match: the first character is "a" // followed by two to five characters "b", and // followed by the last character "c". Const r = / ab /} {2 and 5 c2. Vertical match
// This can match 'a1b' or 'a2b' or 'a3b' const r = /a[123]b/Now that we have learned it, it must be in order to use it. So what can we do at this time? So we can do a lot of things, and we can basically handle most of the simple regulars with a good grasp of character groups and quantifiers.
We use the reverse learning method, first look at the problem analysis, with questions to see the API table, can read the regular and then practice is equal to master
Q1:
const r = /\d{m,n}/{m,n} \d \d \d \ m,n} \d \d \d \ m,n} \d \d \d \ m,n} \d \d So what this means is match m to n numbers
Q2:
const r = /[A-Za-z0-9]+/[A-Za-Z0-9] matches the letters and numbers once or more. [A-Za-Z0-9] matches the letters and numbers once or more
Q3: Matches hexadecimal colors
const regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;The hexadecimal code can be either a 6 digit #FFFFFF or a 3 digit #FFF, and only the vertical match can be made by using the quantifiers {6} and {3} plus the pipe symbol. The picture is parsed as follows:
2.3 Regular matching position
In ES5, there are 6 anchors: ^, $, \b, \b, (? = p) and (? ! P), commonly used are the following two:
^ and $2.31
^Matches the beginning of a line in a multi-line match.$(dollar sign) matches the end, matching the end of a line in a multi-line match.
Questions to do:
Q1:
var result = "hello".replace(/^|$/g, '#');
console.log(result);
// => "#hello#"Q2: Does not match any fields
const r = /.^/Parsing: Because this regularization requires only one character, but that character is followed by the beginning, and such a string does not exist.
2.32 \ \ b and b
\b is the word boundary, which is the position between \w and \w, also the position between \w and ^, and the position between \w and $.
var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
console.log(result);
// => "[#JS#] #Lesson_01#.#mp4#"\w is short for the character group [0-9a-za-z_], and \w is short for the exclusion character group 1.
- The first character on both sides is
"[" and "J" are the positions between \W and \W. - The second character on both sides is
"S" and "]", that is, the position between \w and \w. - The third character is flanked by a space and “L”, which is the position between \W and \W.
- Fourth, the characters on both sides are “1” and “.”, which is the position between \w and \w.
- The fifth character is flanked by “.” and “m”, which is the position between \W and \W.
- The sixth, at the end, preceded by the character “4” is \w, that is, the position between \w and $.
Once the concept of \B is understood, the concept of \B is easily understood. \B is the opposite meaning of \B.
var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#');
console.log(result);
// => "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"2.33 (? = p) and (? ! p)
(? =p), where p is a subpattern, that is, the position before p, or the character after that position matches p. Such as? =l), indicating the position before the “l” character:
var result = "hello".replace(/(? =l)/g, '#'); console.log(result); // => "he#l#lo"And (? ! P) is (? 9. Opposite of =p) :
var result = "hello".replace(/(? ! l)/g, '#'); console.log(result); // => "#h#ell#o#"Questions to do:
Q3: The thousandth representation of a number
var result = "12345678".replace(/(? =(\d{3})+$)/g, ',') console.log(result); / / = > "12345678"Where (? =(\d{3}) means that the matching position is before the 3-digit number +$means that it occurs at least once. G global matching
At first glance, it seems that we have written this regular, but in fact it is not. After writing the regular, we need to test several groups, and then we will find the problem
var result = "123456789".replace(/(? =(\d{3})+$)/g, ',') console.log(result); / / = > ", 123456789"This is because our regex counts forward from the end, replacing its preceding position with a comma as soon as it is a multiple of three. The solution is actually very simple, we just don’t match the beginning, match the beginning we know to use the ^, but what about the mismatch? With (? ! ^) regex modified as follows:
var regex = /(? ! (^)? =(\d{3})+$)/g; var result = "12345678".replace(regex, ',') console.log(result); / / = > "12345678" result = "123456789". The replace (regex, ', '); console.log(result); / / = > "123456789"Increase the difficulty
Q4: Password length is 6-12 characters, consisting of numbers, lowercase characters and uppercase characters, but must include at least 2 characters. The condition “but must include at least two characters” is not considered. We can easily write:
Var/regex = ^ [0-9 a Za - z] {6, 12} $/;What if you have to include numbers:
var regex = /(? ^ =. * [0-9]) [0-9 a Za - z] {6, 12} $/;We just need to understand (? =.*[0-9])^, separated by (? =. * [0-9]) and ^. Indicates that there is a position before the beginning (also the beginning, that is, the same position). (? =.*[0-9]) indicates that the characters following the position match.*[0-9], that is, any number of arbitrary characters followed by a number. Is the following character, must contain a number.
Final answer:
Var regex = /((? =. * ([0-9])? =.*[a-z])|(? =. * ([0-9])? =.*[A-Z])|(? =.*[a-z])(? =. * [a-z])) ^ [0-9 A Za - Z] {6, 12} $/; Var regex = /(? ! ^ [0-9] {12} $) (? ! ^ [a-z] {12} $) (? ! ^ [a-z] {12} $) ^ [0-9 A Za - Z] {6, 12} $/;So you can read it and think about what these two solutions mean.
2.4 grouping
The grouping is simply parentheses
The direct problem.
Q1: Replace yyyy-mm-dd format with mm/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"Analytic: including the replace of the second parameter in use $1, $2, $3 refer to the corresponding group.
Q2: A regex support matches the following three formats: ‘2016-06-12 2016/06/12 2016.06.12’
It is easy to answer the following
var regex = /\d{4}(-|\/|\.) \d{2}(-|\/|\.) \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) ); // trueWhere/and. Need to be escaped. Although it matches the required case, it also matches data like “2016-06/12”. Modify as follows:
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) ); // falseThe visual form is as follows:
Notice \ 1, said a reference before the group (- | \ / | \.) . Whatever it matches to, \1 matches that same specific character.
The nested parentheses are subject to the open parentheses
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 ); / / 3The visual form is as follows:
Q3: String trim method emulation. The trim method strips white space at the beginning and end of a string
/ / solution 1: matching to the beginning and end of whitespace, then replace null character function trim (STR) {return STR. Replace (/ ^ \ s + | \ s + $/ g, "); } console.log( trim(" foobar ") ); Function trim (STR) {return STR. Replace (/^\s*(.*?)); \s*$/g, "$1"); } console.log( trim(" foobar ") ); // => "foobar"Q4: Convert 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"Q5: HTML escape and anti-escape
Function escapeHtml (STR) {var escapeHtml = {'<' : 'lt', '>' : 'gt', '" : "', '&' : 'amp', '\'' : '#39' }; return str.replace(new RegExp('[' + Object.keys(escapeChars).join('') +']', 'g'), function (match) { return '&' + escapeChars[match] + '; '; }); } console.log( escapeHTML('<div>Blah blah blah</div>') ); // => "< div> Blah blah blah< /div>"; // Convert entity characters to HTML equivalents. function unescapeHTML (str) { var htmlEntities = { nbsp: ' ', lt: '<', gt: '>', quot: '"', amp: '&', apos: '\'' }; return str.replace(/\&([^;] +); /g, function (match, key) { if (key in htmlEntities) { return htmlEntities[key]; } return match; }); } console.log( unescapeHTML('< div> Blah blah blah< /div> ')); // => "<div>Blah blah blah</div>"3. The end
In fact, here, basically common regular API has appeared, the rest is to live to learn to use, you can work in some of the previous JS API place is now replaced by regular, that is, B, and you can better grasp the regular.
Due to my technical limitations, if there are any errors in the text, please point out, thank you!
See article: JavaScript Regular Expressions Minibook
- 0-9 a – zA – Z_ ↩