1 正则表达式简介

★"Regular Expression" : 正规表达式 , 缩写 RegExp : 正则表达式
★ 正则表达式是一种被用于从文本中检索符合某些特定模式的文本,
是从左到右来匹配一个字符串,可用来替换字符串中的文本、验证表单、
基于模式匹配从一个字符串中提取字符串等等。

下图规定了一个用户名的输入规则:
定位符首 : ^
[a-z0-9_-] : 包含 a-z 0-9 _ - 这些字符
{3,15} : 最小长度3,最大长度为15
定位符尾 : $

Regular expression

var a = "hndhc_588";
var b = /^[\w]{6,12}$/;
if(b.test(a)){
     console.log("正确的用户名")
}else{
     console.log("错误的用户名")
}

1 备选字符

[0-9] // 一个数字
[a-z] // 一个小写字母
[A-Z] // 一个大写字母
[0-9a-zA-Z] // 一个数组或字母

2 简写字符集

image.png

3 元字符

image.png

3.1 { }

 {m,n}  -->至少m个，最多n个
 {m,}   -->m个以上
 {m}    -->必须m个

手机号码正则表达式

手机号：+86或0086  可有可无，最多1个
               空字符 不限制个数
               1
               3,4,5,7,8 选其一
               9位数字
        (\+86|0086)?\s*1[34578]\d{9}

4 修饰符

image.png

5 支持正则表达式的 String 对象的方法

image.png

★ match()   
eg:
 var str = "he1212 212";
 console.log(str.match(/\d/g));
// ["1", "2", "1", "2", "2", "1", "2"]

★  * , + , $ 作用
eg: *
 var str = "he1212 212";
 console.log(str.match(/\d*/g));     //  *  依次检查每项数值,如果不是返回空值,末尾也是空
// ["", "", "1212", "", "212", ""]

eg: +
 var str = "he1212 212";
 console.log(str.match(/\d+/g));   //  +  只检查对应的表达式数值
// ["1212",  "212",]

eg: $
var str = "her1212 212";     
console.log(str.match(/\d+$/g,"*"));  //  $  从尾部开始检索
// ["212"]

6 正则表达式的方法

image.png

★ compile()
var a ="1The 2fat 3cat sat 5on the 7mat.";
var b = /7.+\./; // 7mat.
var c = a.replace(b,"*");
console.log(c); // 1The 2fat 3cat sat 5on the *
var b = /5.+e/; // 5on the
b.compile(b);
var c = a.replace(b,"*");
console.log(c); // 1The 2fat 3cat sat * 7mat.

★ exec()
var a ="1The 2fat 3cat sat 5on the 7mat.";
var b = /7.+\./; // 7mat.
var c = b.exec(a);
console.log(c); // 27

★ test() 
var a ="1The 2fat 3cat sat 5on the 7mat.";
var b = /7.+\./; // 7mat.
var c = b.test(a);
console.log(c); // true

7 断言

后行断言和先行断言有时候被称为断言，它们是特殊类型的 非捕获组 
(用于匹配模式，但不包括在匹配列表中)。
例如我们想获取输入字符串 $4.44 and $10.88 中 $ 字符之前的所有数字。
我们可以使用这个正则表达式 (?<=\$)[0-9\.]*，表示: 获取 $ 字符之前的所有的数字包含 . 字符。 

image.png

8 例子

eg:关键词过滤

// 将句子里的北京和淘宝替换成"***"

// html
<textarea id="txt1" name=""  cols="30" rows="10">
</textarea>
<input type="button" value="过滤" id="btn" />
<textarea id="txt2" name=""  cols="30" rows="10">
</textarea>

// js
window.onload = function(){
     var txt1 = document.getElementById("txt1");
     var txt2 = document.getElementById("txt2");
     var btn = document.getElementById("btn");
     btn.onclick=function(){
         var value = txt1.value;
         var reg = /淘宝|百度/g;
         txt2.value = value.replace(reg,"***")
     }
 }

eg : 过滤HTML标签

var reg =/<[^<>]+>/g;
txt2.value = txt1.value.replace(reg,"");

eg : 邮箱验证

// html
<input type="text" placeholder="输入正确的邮箱地址"/>

// js
<script>
   var a = document.getElementsByTagName("input")[0];
   a.onchange = function(){
       var yxh = a.value;
       var rgp = /^\w{3,10}@[a-z0-9]{2,3}\.[a-z]{3}$/i;
       if(rgp.test(yxh)){
           console.log("正确的邮箱地址")
       }else{
           console.log("错误的邮箱地址")
       }
   }
</script>

参考文档