1, Regular expression
1. Regular expression overview
Regular Expression is a pattern used to match the composition of characters in a string. It is used to detect whether the composition of a string meets certain requirements or rules. It is usually used to verify the form: for example, to verify that the user name can only be composed of English letters, numbers and underscores. Moreover, regular expressions can also be used to replace some sensitive words in the page, or get a specific part of the string we want from the string.
In JavaScript, regular expressions are also objects. At present, in JS, we mainly use regular expressions for form verification.
2. Characteristics of regular expressions
① strong flexibility, logic and functionality.
② simple expressions can be used to realize the complex control of strings.
③ the expression structure is not very clear and obscure.
④ in actual development, we generally don't write regular expressions by ourselves, but generally copy the written ones. Reference website: https://c.runoob.com/front-end/854
3. Creation of regular expressions
In JavaScript, there are two ways to create regular expressions: constructor and literal.
① Call the constructor of RegExp object to create
// Case code var regexp = new RegExp(/123/);
② Create by literal (common)
// Case code var rg = /123/; // At this time, no matter whether it is a string or a number, quotation marks are not required
4. Use of regular expressions
The use of a regular expression requires calling the test() regular object method to detect whether the string conforms to the rules of the regular expression. If it conforms, it returns true, otherwise it returns false.
// Case code var rg = /123/; console.log(rg.test(123));// Whether 123 appears in the matching character, and the result is true console.log(rg.test('abc'));// Whether 123 appears in the matching character. If it does not appear, the result is false
5. Composition of regular expressions
A regular expression can consist of simple characters, such as: / abc /, / 123 /, or complex and special characters, such as / ab*c /. The special characters are also called metacharacters, such as ^, $, + and so on, which have special meaning in regular expressions.
For the meaning of more special characters, you can query MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
6. Boundary character
Boundary characters or locators in regular expressions are mainly ^ and $, where ^ represents the text that matches the beginning of the string and indicates that the beginning must comply with some rules$ Represents the text that matches the end of the string, indicating that the end must conform to some rule. If ^ and $appear at the same time, it indicates an exact match. The full text of the string must comply with a rule.
// Case code var rg = /abc/; // Regular expressions do not need quotation marks, whether numeric or string // /abc / no boundary character is added. As long as abc is included, the string returns true console.log(rg.test('abc')); console.log(rg.test('abcd')); console.log(rg.test('aabcd')); console.log('---------------------------'); var reg = /^abc/; // If the start boundary character is added, it must start with abc console.log(reg.test('abc')); // true console.log(reg.test('abcd')); // true console.log(reg.test('aabcd')); // false console.log('---------------------------'); var reg0 = /abc$/; // If the end boundary character is added, it must end with abc console.log(reg0.test('abc')); // true console.log(reg0.test('aabc')); // true console.log(reg0.test('aabcd')); // false console.log('---------------------------'); var reg1 = /^abc$/; // Exact matching requires abc string to meet the specification console.log(reg1.test('abc')); // true console.log(reg1.test('abcd')); // false console.log(reg1.test('aabcd')); // false console.log(reg1.test('abcabc')); // false
7. Character class []
The character class [] of regular expression indicates that there are multiple characters to choose from. As long as one of them is matched, the return value will be true.
// Case code var rg = /[abc]/; // It returns true as long as it contains a, b or c console.log(rg.test('andy'));//true console.log(rg.test('baby'));//true console.log(rg.test('color'));//true console.log(rg.test('red'));//false var rg1 = /^[abc]$/; // After adding the boundary character, choose one from three. Only the letters a, b or c return true console.log(rg1.test('aa'));//false console.log(rg1.test('a'));//true console.log(rg1.test('b'));//true console.log(rg1.test('c'));//true console.log(rg1.test('abc'));//true ---------------------------------------------------------------------------------- var reg = /^[a-z]$/ //26 English letters. Any single letter returns true - indicating the range from a to z console.log(reg.test('a'));//true console.log(reg.test('z'));//true console.log(reg.test('A'));//false ----------------------------------------------------------------------------------- //Character combination var reg1 = /^[a-zA-Z0-9]$/; // 26 English letters (both uppercase and lowercase) any single letter or number 0-9 returns true ------------------------------------------------------------------------------------ //The addition of ^ inside the inverted square brackets indicates negation. As long as the characters in the square brackets are included, false is returned. var reg2 = /^[^a-zA-Z0-9]$/; console.log(reg2.test('a'));//false console.log(reg2.test('B'));//false console.log(reg2.test(8));//false console.log(reg2.test('!'));//true
8. Quantifier
The number of occurrences of the character [] is usually used in conjunction with the regular expression.
classifier | explain |
---|---|
* | Repeat 0 or more times |
+ | Repeat 1 or more times |
? | Repeat 0 or 1 times |
{n} | Repeat n times |
{n,} | Repeat n or more times |
{n,m} | Repeat n to m times |
// Case code // Quantifier is to set the number of times a certain pattern appears var reg = /^[a-zA-Z0-9_-]{6,16}$/; // In this mode, only English alphanumeric characters can be input, and the underline is between 6-16 in length
9. Parentheses ()
Parentheses in regular expressions indicate priority. Multiple characters can be wrapped and verified as one character/^ abc{3} $/ just let c repeat three times instead of abc repeat three times/^ (abc){3} $/ is what makes abc repeat three times
10. Bracketed summary
① brace quantifier It indicates the number of repetitions
② bracketed character set. Matches any character in parentheses
③ parentheses indicate priority
11. Predefined classes
Predefined classes refer to some commonly used validation rules, which are predefined and referred to by some simple characters.
// Case code landline telephone verification var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/; // In regular expressions or expressed by |
12. Regular replace
The replace() method is used to implement the string replacement operation. The parameters used to replace can be strings or regular expressions. When the parameter is a regular expression, the regular expression can also have parameters: / expression / parameter. The parameter has three values: g - global matching, i - ignoring case, gi - global matching and ignoring case.
// Case code var str = 'andy and red'; var newStr = str.replace('andy', 'baby'); // String substitution console.log(newStr)//baby and red //andy, which is equivalent here, can be written in a regular expression var newStr2 = str.replace(/andy/, 'baby'); console.log(newStr2)//baby and red //Normal replace replaces only the first character that matches var str = 'abcabc' var nStr = str.replace(/a/,'ha-ha') console.log(nStr) //Ha ha bcabc //Replace all g var nStr = str.replace(/a/g,'ha-ha') console.log(nStr) //Ha ha bc ha ha bc //Ignore case i var str = 'aAbcAba'; var newStr = str.replace(/a/i,'ha-ha')// "a ha ha bcAba" //Match globally and ignore case gi var str = 'aAbcAba'; var newStr = str.replace(/a/gi,'ha-ha')// "Ha ha ha bc ha ha b ha ha"
13. Use replace to filter sensitive words
// Case code <textarea name="" id="message"></textarea> <button>Submit</button> <div></div> <script> var text = document.querySelector('textarea'); var btn = document.querySelector('button'); var div = document.querySelector('div'); btn.onclick = function() { div.innerHTML = text.value.replace(/passion|gay/g, '**'); } </script>