做好准备，下方高能，一次把这篇文章看完。睡前再看一遍，然后回忆一遍进入梦乡，这个记忆就比较牢固啦。想更稳就醒的时候在回忆一遍。那就不得了啦。开始。
官方定义：
正则表达式，又称规则表达式。（英语：Regular Expression），通常被用来检索、替换那些符合某个(规则)的文本。
其实是自己写一个规则，让程序执行。不管你是谁只要是不按我的规则来，就不让你完成。
一、简单认识正则表达式
创建正则表达式的两种方式
1.通过构造函数定义
var 变量名= new RegExp(/规则表达式/);
2.通过直接量定义
var 变量名= /规则表达式/;
test();正则表达式的一个方法，返回bool值，判断括号内参数是否符合调用者规则。
来试一下。
//1.我们用对象定义法创建一个规则（3个字母）
var re1 = new RegExp(/abc/);
//2.然后用字面量也创建一个3个字母的规则。
var re2 = /abc/;
//下面re1是调用者。re2是参数。判断参数是否满足调用者的规则。
console.log(re1.test(re2));
//返回true;
二、正则表达式内置的五大类(把这五大类用好，you就学得OK啦)
-
（一）预定义类
(感觉这个名字不是太好，但又想不起来好名字)
| 字符 | 相当于 | 含义 |
|---|---|---|
| .（点） | [^\n\r] | 允许除了换行和回车之外的任意字符 |
| \d | [0-9] | 代表数字字符 |
| \D | [^0-9] | 非数字字符 |
| \s | [ \t\n\x0B\f\r] | 代表空白字符 |
| \S | [^ \t\n\x0B\f\r] | 非空白字符 |
| \w | [a-zA-Z_0-9] | 允许单词字符 |
| \W | [^a-zA-Z_0-9] | 非单词字符 |
这个好记：只要是大写的，都是非。
里面字符都是用\d,不是用/d。是因为正则字面量是包含在/***/这里面，只能用相反的\来使用。
-
预定义的特殊类
| 字符 | 正则 | 描述 |
|---|---|---|
| \t | /\t/ | 制表符 |
| \n | /\n/ | 制表符 |
| \r | /\r/ | 回车符 |
| \f | /\f/ | 换页符 |
| \a | /\a/ | alert字符 |
| \e | /\e/ | escape字符 |
| \cX | /\cX/ | 与X相对应的控制字符 |
| \b | /\b/ | 与回退字符 |
| \v | /\v/ | 垂直制表符 |
| \0 | /\0/ | 空字符 |
-
（二）字符类
只多不少，区分大小写。必须全匹配。
console.log(/ABC/.test("ABC")) //true;
console.log(/ABC/.test("abc")) //flase;
console.log(/ABC/.test("AB")) //flase;
console.log(/ABC/.test("ABCD")) //true;
如果带中括号的话，包含一个就行，不用全匹配。
console.log(/[abc]/.test("c"));//true;
console.log(/[abc]/.test("w"));//flase;没有w
console.log(/[abc]/.test("*"));//flase;
-
（三）负向类
也可以叫反向类。括号内插入^（中文叫这玩意乘方）进行取反。
console.log(/[^abc]/.test("iiii"));//true:里面没有abc.
console.log(/[^abc]/.test("aiiii"));//true:只能多不能少。
console.log(/[^abc]/.test("abc"));//false:正好匹配
console.log(/[^abc]/.test("bc"));//false:少了，
console.log(/[^abc]/.test("abcdef"));//true:只能多不能少。
-
（四）范围类
console.log(/[a-b]/.test("a"));//true:不要忘记这玩意是区分大小写的。
console.log(/[0-5]/.test("6"));//false
console.log(/[0-5]|[A-W]/.test("B"));//true,,0-5或者A-W
console.log(/[A-d]/.test("d"));//true;这样写的意思为：[A-D]和[a-d]都行。
-
（五）组合类
就是以上四种规则都可以混搭在一个括号里组成一个新规则“组合类”
console.log(/[a-c1-6]/.test("46s48w94645c"));//true:只要有一个匹配就返回true;不精确。
console.log(/[a-c1-6]/.test("b"));//true;
console.log(/[a-c1-6]/.test(86));//true;
console.log(/[a-c1-6]/.test(3));//true;
三、量词符
就是数量词，一个规则可以出现的次数。
| 符号 | 含义 |
|---|---|
| * | 重复0次或更多 (>=0) |
| + | 重复一次或更多次 (>=1) |
| ? | 重复零次或一次（0或者1） |
| {n} | 精确匹配n次 （x=n） |
| {n,} | 重复n次或更多 (x>=n) |
| {n,m} | 重复出现的次数比n多但比m少 (n<=x<=m) |
所以，7+其实和7{1,}是一样的。
那么，7*其实和7{0,}是一样的。
最后，7?其实和7{0,1}是一样的
四、边界符
就是正则的开头和结尾。
| 符号 | 含义 |
|---|---|
| ^ | 会匹配行或者字符串的起始位置 |
| $ | 会匹配行或字符串的结尾位置 |
| ^$ | 在一起 表示必须是这个（精确匹配） |
注意：^在[ ]中表示非！以外表示规则的开始
开头符：^
console.log( /^\d/.test("a99") ); //false 因为这个必须数字开头。
结尾符：美元符
console.log(/\d$/.test("a99"));// true 因为这个的确是数字开头。
学一个新方法str.replace() 字符替换
此方法详解http://www.w3school.com.cn/jsref/jsref_replace.asp
\b 表示一个单词边界（而非字符）。
\B 表示非单词边界。
^ $在一起 表示必须是这个（精确匹配）
例子：
console.log(/^abc$/.test("abc"));//true;精确匹配里面的字符
console.log(/^abc$/.test("ac"));//false;少了c；
console.log(/^abc$/.test("abcabc"));//false;多了字符，不管你多了什么，反正是多啦；
实战来啦 ~~~
-
案例一 验证座机手机号
请读源代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">
<input type="text"/>
<span>请输入！</span>
</div>
<script>
//需求：验证座机号！
//直辖市：三位-八位（010-82935150）
//普通市：四位-七位（0314-3160186）
//1.老三步。
var inp = document.getElementsByTagName("input")[0];
var span = inp.nextElementSibling || inp.nextSibling;
inp.onblur = function () {
//2.判断input里面的值，是否符合正则标准。
// 下面要不是3个数字开头的，要不是4个数字开头的
var reg1 = /(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/;
if(reg1.test(inp.value)){
//3.符合给一个样式，不符合给另外一个样式。
span.style.color = "green";
span.innerHTML = "恭喜您，输入正确！";
}else{
span.style.color = "red";
span.innerHTML = "对不起，您输入的为非法字符！";
}
}
</script>
</body>
</html>
*实战二 * ---必须输入中文名称---
难点：怎样判断是中文
利用unicode编码： /^[\u4e00-\u9fa5]$/
请看源码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">
<input type="text"/>
<span>请输入！</span>
</div>
<script>
//需求：输入名字，两位-四为。
//原理: unicode（\u4e00-\u9fa5）编码{2,4}
//步骤：
//1.老三步
//2.判断input中的value值是否符合正则标准
//3.符合给一个样式，不符合给另外一个样式
//1.老三步
var inp = document.getElementsByTagName("input")[0];
var span = inp.parentNode.children[1];
inp.onblur = function () {
//unicode（\u4e00-\u9fa5）编码{2,4}
var reg = /^[\u4e00-\u9fa5]{2,4}$/;
//2.判断input中的value值是否符合正则标准
if(reg.test(this.value)){
//3.符合给一个样式，不符合给另外一个样式
span.style.color = "green";
span.innerHTML = "恭喜您，输入正确！";
}else{
span.style.color = "red";
span.innerHTML = "对不起，您输入的为非法字符！";
}
}
</script>
</body>
</html>
-
三个方法
-
1. trim()//;去除前后的空格
var str = " 你好 我很好！ "//;
console.log(str)//;
console.log(str.trim())//; -
2. replace(); //替换和全局替换值。
var str = "Today is fine day,today is fine day!"
console.log(str)//;
console.log(str.replace(/today/ig,"tomorrow"))//; -
3. //search(); 给字符差索引
var str = "abcdefg"//;
console.log(str.search(/bc/))//;
console.log(str.indexOf("bc"))//;
-
*实战三 * ---注册框验证---
读源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
label {width: 40px;display: inline-block;}
.container {
margin: 100px auto;
width: 400px;
padding: 50px;
line-height: 40px;
border: 1px solid #999;
background: #efefef;
}
span {margin-left: 30px;font-size: 12px;padding:2px 20px 0;color: #ccc;}
.wrong {color: red; }
.right {color: green;}
.pwd {width: 220px;height: 20px;}
.str1{background-position: 0 -20px;}
.str2{background-position: 0 -40px;}
.str3{background-position: 0 -60px;}
.str4{background-position: 0 -80px;}
</style>
<script>
window.onload = function () {
//需求：按照需求，对表单数据进行校验！
//步骤：
//1.老三步
//2.判断是否符合正则标准
//3.给样式。（封装方法给）
// var inp1 = document.getElementById("inp1");
// var inp2 = document.getElementById("inp2");
// var inp3 = document.getElementById("inp3");
// var inp4 = document.getElementById("inp4");
// var inp5 = document.getElementById("inp5");
// var inp6 = document.getElementById("inp6");
var password = document.getElementById("password");
// inp1.onblur = function () {
// var span = this.nextElementSibling || this.nextSibling;
// if(/^[1-9][0-9]{4,}$/.test(this.value)){
// span.innerHTML = "恭喜您,输入正确！";
// span.className = "right";
// }else{
// span.innerHTML = "格式错误！";
// span.className = "wrong";
// }
// }
//qq号
addEvent("inp1", function () {
if(/^[1-9][0-9]{4,}$/.test(this.value)){
setClassName(this,"right");
setInnerHTML(this,"恭喜您,输入正确！");
}else{
setClassName(this,"wrong");
setInnerHTML(this,"格式错误！");
}
});
//手机号
addEvent("inp2", function () {
if(/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(this.value)){
setClassName(this,"right");
setInnerHTML(this,"恭喜您,输入正确！");
}else{
setClassName(this,"wrong");
setInnerHTML(this,"格式错误！");
}
});
//邮箱
addEvent("inp3", function () {
if(/^[\w\-\.]{5,}\@[\w]+\.[\w]{2,4}$/.test(this.value)){
setClassName(this,"right");
setInnerHTML(this,"恭喜您,输入正确！");
}else{
setClassName(this,"wrong");
setInnerHTML(this,"格式错误！");
}
});
//座机
addEvent("inp4", function () {
if(/(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/.test(this.value)){
setClassName(this,"right");
setInnerHTML(this,"恭喜您,输入正确！");
}else{
setClassName(this,"wrong");
setInnerHTML(this,"格式错误！");
}
});
//用户名
addEvent("inp5", function () {
if(/^[a-zA-Z0-9_-]{3,16}$/.test(this.value)){
setClassName(this,"right");
setInnerHTML(this,"恭喜您,输入正确！");
}else{
setClassName(this,"wrong");
setInnerHTML(this,"格式错误！");
}
});
//密码
addEvent("inp6", function () {
if(/^[a-zA-Z0-9_\-$]{6,18}$/.test(this.value)){
setClassName(this,"right");
setInnerHTML(this,"恭喜您,输入正确！");
password.className = "pwd str1";
//只有密码通过了，才能执行密码强度测试
//从大往小判断。
if(/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/.test(this.value)){
password.className = "pwd str4";
}else if(/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/.test(this.value)){
password.className = "pwd str3";
}else if(/^([a-z].*[A-Z])|([A-Z].*[a-z])$/.test(this.value)){
password.className = "pwd str2";
}
}else{
setClassName(this,"wrong");
setInnerHTML(this,"格式错误！");
}
});
//因为每次都要这样调用，所以很繁琐，我们通过封装实现代码
function addEvent(str,fn){
document.getElementById(str).onblur = fn;
}
function setClassName(aaa,txt){
var span = aaa.nextElementSibling || this.nextSibling;
span.className = txt;
}
function setInnerHTML(aaa,txt){
// console.log(this);
var span = aaa.nextElementSibling || this.nextSibling;
span.innerHTML = txt;
}
}
</script>
<body>
<div class="container">
<label for="inp1">QQ</label><input type="text" id="inp1"><span>输入正确的QQ号码</span><br>
<label for="inp2">手机</label><input type="text" id="inp2"><span>输入13位手机号码</span><br>
<label for="inp3">邮箱</label><input type="text" id="inp3"><span>输入正确邮箱</span><br>
<label for="inp4">座机</label><input type="text" id="inp4"><span>输入您的座机</span><br>
<label for="inp5">账号</label><input type="text" id="inp5"><span>亲输入您的账号</span><br>
<label for="inp6">密码</label><input type="text" id="inp6"><span>请输入您的密码</span><br>
<div id="password" class="pwd"></div>
</div>
</body>
</html>
-
封装trim()方法
<script>
var str = " 你好，我 很好！ ";
console.log(str);
// console.log(str.trim());
console.log(trim(str));
function trim(str){
var aaa = str.replace(/(^\s+)|(\s+$)/g,"");
return aaa;
}
//面向对象学习
// String.prototype.aaa = function () {
// var aaa = str.replace(/(^\s+)|(\s+$)/g,"");
// return aaa;
// }
// console.log(str.aaa());
