Front end - Fundamentals of JavaScript 22 - regular expressions

regular expression

It is a logical formula for string operation, which is to form a "regular string" with some specific characters defined in advance and the combination of these specific characters. This "regular string" is used to express a kind of filtering logic for strings.

Regular expression: use a "string" to describe a feature, and then verify whether another "string" conforms to this feature.

purpose

Given a regular expression and another string, we can achieve the following objectives:

1. whether the given string conforms to the filtering logic of regular expression (called "match");

2. we can get the specific part we want from the string through regular expression.

The characteristics of regular expressions are:

1. very flexible, logical and functional;

2. it can quickly achieve complex control of strings in a very simple way.

character

explain

         /

Represents the beginning or end of a text regular expression.

         \

Marks the next character as a special character, text, back reference, or octal escape character. For example, "n" matches the character "n". "\n" matches newline characters. The sequence "\ \" matches "\", "\ (" matches "(".

         ^

Matches the position where the input string begins.

         $

Matches the position at the end of the input string.

          *

Matches the preceding character or subexpression zero or more times. For example, zo* matches "z" and "zoo"* Equivalent to {0,}.

         .

Matches any single character except the newline \n character. To match, Please use \.

         +

Matches the preceding character or subexpression one or more times. For example, "zo+" matches "Zo" and "zoo", but not "z"+ Equivalent to {1,}.

        ?

Matches the preceding character or subexpression zero or once. For example, "do(es)?" Match "do" in "do" or "does".? Equivalent to {0,1}.

       {n}

N is a nonnegative integer. Exactly n times. For example, "o{2}" does not match the "O" in "Bob", but matches the two "O" in "food".

       {n,}

n is a nonnegative integer. Match at least n times. For example, "o{2,}" does not match "O" in "Bob", but matches all o in "fooood". "o{1,}" is equivalent to "o+". "o{0,}" is equivalent to "o*".

       {n,m}

M and N are nonnegative integers, where n < = M. Match at least N times and at most m times. For example, "o{1,3}" matches the first three o's in "foodood." o{0,1}'is equivalent to'O?'. Note: you cannot insert spaces between commas and numbers.

       [a-z]

Character range. Matches any character within the specified range. For example, "[a-z]" matches any lowercase letter in the range "a" to "Z".

      [^ a-e]

Reverse range character. Matches any character that is not within the specified range. For example, "[^a-e]" matches any character that is not in the range "a" to "z".

character

explain

   \b

Matches a word boundary, that is, the position between the word and the space. For example, "er\b" matches "Er" in "never", but does not match "Er" in "verb".

   \B

Non word boundary matching. 'er\B' matches' er 'in' verb 'but does not match' er 'in' never '.

    \d

Numeric character matching. Equivalent to [0-9].

    \D

Non numeric character matching. Equivalent to [^0-9].

   \f

Page feed matching. Equivalent to \x0c and \cL.

    \n

Newline match. Equivalent to \x0a and \cJ.

    \r

Match a carriage return. Equivalent to \x0d and \cM.

    \s

Matches any white space characters, including spaces, tabs, page breaks, and so on. Equivalent to [\f\n\r\t\v].

    \S

Matches any non white space characters. Equivalent to [^ \f\n\r\t\v].

\t

Tab matching. Equivalent to \x09 and \cI.

\v

Vertical tab matching. Equivalent to \x0b and \cK.

\w

Matches any word type characters, including underscores. And "[A-Za-z0-9_]" Equivalent.

\W

Matches any non word characters. And "[^A-Za-z0-9_]" Equivalent.

 

Let's look at some simple expressions

<p>6-30 Digit alphanumeric underline</p>
	<script type="text/javascript">
		var username=/^ \w{6,30} $/;	                
	</script>

<p>6-10 Bit cipher</p>
	<script type="text/javascript">
		    var pass=/^ \w{6,10} $/        
	</script>


<p>qq No. 5-12 Bits (all numbers)</p>
	<script type="text/javascript">
		
		 var qq=/^ \d{3,12} $/
	</script>


<p>3 Bit area code-8 4-digit telephone number or 4-digit area code-8 Bit number(Area code of landline number-Telephone number)</p>
	<script type="text/javascript">
		   var tal=/^ (\d{3} - \d{8}) | (\d{4} - \d{8) $/;         
	</script>

<p>Mailbox 1 to n Alphanumeric underscore followed by @  Follow 1 to n Alphanumeric</p>
	<script type="text/javascript">
		 var email=/^ \w+@+\w+(.com|.cn|.net|.org)(.cn)? $/           
	</script>

.test();

The test() method is used to detect whether a string matches a pattern

Take a look at [example]:

<style type="text/css">
		.regCon{
			height: 40px;
			margin-top: 30px;
			line-height: 40px;
		}
		.rcLeft{
			border: 1px solid #e6e6e6;
			height: 40px;
			width: 400px;
			float: left;
			margin-right: 10px;
		}
		.rcLeft lable{
			border-right: 1px solid #e6e6e6;
			margin-right: 10px;
			width: 100px;
			text-align: center;
			height: 40px;
			display: block;
			float: left; 
		}
		input{
			width: 270px;
			height: 38px;
			float: left;	
			line-height: 30px;
			outline: none;
			border: none;

		}
		.btnDiv{
			width: 400px;
			margin-top:30px;
			height: 42px;
		}
		.btnRegister{
			width: 100%;
		    height: 42px;
		    line-height: 42px;
		    border-radius: 4px;
		    background: #3f99e6;
		    font-size: 16px;
		    color: #fff;
		    text-align: center;
		    cursor: pointer;
		    font-weight: bold;
		}
		.tips{
			color: red;
		}
	</style>


<div id="content">
	<form action="#" method="post" id="form">
		<div class="regCon">
			<div class="rcLeft">
				<lable>Login name:</lable>
				<input type="text" id="userName" placeholder="enter one user name" />
			</div>
			<label id="s_username" class="tips"> </label>
		</div>
		<div class="btnDiv">
			<input type="submit" class="btnRegister" value="Registration">
		</div>
	</form>
</div>


<script type="text/javascript">
	document.getElementById("form").onsubmit = function () {
		return  checkUserName();
	}
	document.getElementById("userName").onblur = checkUserName;
	function checkUserName() {
		  //Get the value of the user name
		 var username = document.getElementById("userName").value;

		//Define regular expressions
		var reg_username = /^([a-zA-Z0-9_-])/;
		//Determine whether the value conforms to the rules of regular expressions
		var flag = reg_username.test(username);

	    //Prompt information
		var s_username = document.getElementById("s_username");

		if (flag) {
		    //Prompt green check
		    s_username.innerHTML = '<img src="../../images/duihao.jpg" class="dhimg" width="25" height="21">';
		 } else {
		     //Prompt red error message
		     s_username.innerHTML = "Composed of letters, numbers and underscores, starting with letters, 4-16 Bit.!";
		 }
		 return flag;
	}
</script>

 

 

Next -- Example of registration page

 

 

My articles are all summaries of the learning process. If any errors are found, please leave a message and point them out. I will correct them in time.

Tags: Javascript Front-end

Posted by samdennis on Tue, 31 May 2022 09:18:30 +0530