Creating regular expressions

Method 1: CallRegExpObject constructor is createdvar regexp = new RegExp(/ 123 /);
    console.log(regexp); Method 2: Use literals to create regular expressionsvar reg = /abc/; What it means: Just include ABCCopy the code
The test() re object method that checks if a string conforms to the rule and returnstrue 或 false, which takes a test stringvar rg = / 123 /;
	console.log(rg.test(123));// Whether 123 appears in the matching character is true
	console.log(rg.test('abc'));// Check whether 123 appears in the matching character
Copy the code

Special characters in regular expressions

A regular expression can consist of simple characters, such as/ABC /, or a combination of simple and special characters, such as /ab*c/. Special characters are also called metacharacters. They are special symbols with special meanings in regular expressions, such as ^, $, and +. Regular expressions: Simple characters and special characters Metacharacters are used to test regular expressions. For details, see MDN jQuery Manual

Boundary operator

A boundary character (position character) in a regular expression is used to indicate the position of a character. It consists of two characters

[/^ ABC / : starts with ABC] : Matches the text at the end of a line (who ends with it) [/^ ABC: matches the text at the end of a line (who ends with it) [/^ ABC / : matches the text at the end of a line (who ends with it) [/ ABC / : can only be ABC]

  • If ^ and $are together, it must be an exact match.

	var rg = /abc/; // Regular expressions do not require quotation marks, either numeric or string
	// / ABC/returns true for any string containing ABC
	 	console.log(rg.test('abc'));
	 	console.log(rg.test('abcd'));
	 	console.log(rg.test('aabcd'));
	 	console.log('-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --');
	var reg = /^abc/;
	 	console.log(reg.test('abc')); // true
	 	console.log(reg.test('abcd')); // true
	 	console.log(reg.test('aabcd')); // false
	 	console.log('-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --');
	var reg1 = /^abc$/; // The exact match must be an ABC string to comply with 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


Copy the code

Character classes

A character class represents a list of characters to choose from, and you only need to match one of them. All optional characters are enclosed in square brackets.

Square brackets []

Indicates that there are a series of characters to choose from, and you only need to match one of them1] [abcdefg]var rg = /[abc]/; // Return true whenever a or b or c is included
		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]$/; Return true only if the letters are a, B, or C
		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]$/ // Each of the 26 letters returns true - representing 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]$/; // Return true for any of the 26 letters (upper and lower case)
------------------------------------------------------------------------------------
	// If the square brackets inside the ^ are inverted, return false whenever the characters inside the square brackets are included.
	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

	/^[^a-z]$/: two ^, the outside of the parentheses is the boundary, the inside of the parentheses is the meaning of the inverseCopy the code

Quantifier operator

A word is used to set the number of occurrences of a pattern.

Quantifier description * repetition0One or more times [>=0/^[a-z]*$/ + repeat1One or more times [>=1【/^[a-z]+$/】? repeat0Time or1{n} repeat n times {n,} repeat n times or more {n,m} repeat n to m times Note: {n,m} no Spaces between n and m boundary: ^, $Brackets: [] : What is contained in brackets can only be selected1Four quantifiers: *, +,? , {n, m}Copy the code

  • User name form validation

    • Functional requirements:
    1. If the user name is valid, the following message is displayed: The user name is valid and the color is green
    2. If the user name is invalid, the following message is displayed: The user name is invalid and the color is red

   	<style>
   		.right {
   			color: green;
   			font-weight: bold;
   		}

   	.error {
   		color: red;
   		font-weight: bold;
   	}
  	 </style>
   </head>
<body>User name:<input type="text">
   	<span></span>
</body>

   <script>
        // Get the element
   	var input = document.querySelector('input');
   	var span = document.querySelector('span');
   	// Create a re
   	var reg = / ^ [a - zA - Z0 - _ - 9] 6 16th} {$/;
   	// Add events
   	input.onblur = function () {

   		if (reg.test(this.value)) {
   			span.innerHTML = 'Entered correctly';
   			span.className = 'right';
   		}else {
   			span.innerHTML = 'Error content';
   			span.className = 'error'; }}</script>

Copy the code

Parentheses summary

  • 1. Curly bracket quantifier. Inside is the number of repetitions {}

  • 2. Set of parenthesis characters. Matches any character in square brackets. []

  • 3. Parentheses indicate priority ()

Regular expression online test

Predefined classes

Predefined classes are shorthand for some common patterns.