[JS/TS] how to write regular expressions? input form validation

Posted by Ironmann00 on Sun, 31 Oct 2021 18:19:23 +0100

1, Regular expression overview

Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects.

2, How to create regular expressions

  1. Call the constructor of the RegExp object to create it
const regexp=new RegExp(/123/);  //123 is the regular expression content
  1. Create by literal
const regexp=/123/;  //123 is the regular expression content
  1. test regular expression effect
    Test (): the test method of regexp, which is used to detect whether the string conforms to the rules and returns true/false. Its parameter is the tested string.
/123/.test('12');  //The string is expected to contain 123, so false is returned

3, Special characters of regular expressions

A regular expression pattern is composed of simple characters, such as / abc /; Or a combination of simple and special characters, such as / ab*c /. Special characters are also called metacharacters, which are special symbols with special meaning in regular expressions, such as \, $, ^, etc.
Detailed and comprehensive introduction to special characters and jump MDN document – special characters in regular expressions.
Here, we will only introduce some common:

1. Boundary character ^ $:

^: indicates the text that matches the beginning of the line (from whom)
$: indicates the text that matches the end of the line (with whom)

// The string contains abc
const reg=/abc/; 
reg.test('a');   // false
reg.test('abcbc');   // true

// ^String starting with abc
const reg=/^abc/;  
reg.test('abc');   // true
reg.test('abcbc');   // true
reg.test('aabc');   // false

// ^$exact match can only be abc
const reg=/^abc$/;  
reg.test('abc');   // true
reg.test('abcbc');   // false
reg.test('abcabc');   // false

2. Character class []:

Character class []: indicates that there are a series of characters to choose from, and only one needs to be matched.

const reg=/[abc]/;  // It returns true as long as it contains a | B | C 

const reg=/^[abc]$/;  // true is returned only if it is a | B | C 
reg.test('a');  // true
reg.test('b');  // true
reg.test('c');  // true
reg.test('ab');  // false

3. Range symbol -:

Range character -: matches any contained character. You can use hyphens to specify the character range.

[a-c] is the same as [abc]. They will match "a" in "apple" and "b" in "blue".
But [abc -]: match "a" in "apple" and "-" in "do-g".

const reg=/^[a-z]$/;   // All 26 lowercase English letters are true
reg.test('a');  // true
reg.test('ab');  // false

// Any of the 26 upper and lower case English letters and 0-9 numbers is true
const reg=/^[a-zA-Z0-9]$/;  
reg.test('a');  // true
reg.test('ab');  // false

// 26 upper and lower case English letters and 0-9 numbers_ Either is true
const reg=/^[a-zA-Z0-9_-]$/;   

// Adding ^ in [] means that negation cannot be included
// 26 upper and lower case English letters and 0-9 numbers_ Either is false
const reg=/^[^a-zA-Z0-9_-]$/;   

4. Quantifier * +? {3,6} :

Quantifiers represent the number of characters or expressions to match.

*     it is allowed to repeat zero or more times
+     it is allowed to repeat one or more times
?      it is allowed to repeat once or zero times
{n}     it is allowed to repeat n times
{3,}     it is allowed to repeat 3 times or more
{3,6}     it is allowed to repeat 3-6 times

const reg=/^a$/;   // Only a


// *> = 0 times
/^a*$/.test('');   // true
/^a*$/.test('a');   // true
/^a*$/.test('aa');  // true
/^a*$/.test('ab');   // false

// +> = 1 time
/^a+$/.test('');   // false
/^a+$/.test('a');   // true
/^a+$/.test('aa');   // true

// ?    0 | 1 time
/^a?$/.test('');   // true
/^a?$/.test('a');   // true
/^a?$/.test('aa');   // false
/^a?$/.test('ab');   // false

// {3,5} 3-5 times
/^a{3,5}$/.test('');   // false
/^a{3,5}$/.test('aaaa');   // true
/^a{3,5}$/.test('aaab');   // false
/^a{3, 5}$/.test('aaa');   // false note that {3,5} cannot be followed by a space

// Only 26 uppercase and lowercase alphanumeric 0-9 -_ Composition, and the length is 3-5
const reg=/^[a-zA-Z0-9_-]{3-5}$/;  

Topics: Javascript Front-end regex ts