前端基础学习之js-正则表达式基本语法及练习

• 正则表达式:也叫规则表达式,按照一定的规则组成的一个表达式,这个表达式的作用主要是匹配字符串的.
• 正则表达式的作用:匹配字符串的
• 在大多数编程语言中都可以使用
• 正则表达式的组成:是由元字符或者是限定符组成的一个式子

(一) 元字符

1.元字符 .

. 表示任意一个除了\n以外的字符

2.元字符 []

[]表示任意的单个字符。

• [0] 就是0
• [0-9] 表示0-9之间的任意一个数字
• [a-z] 表示二十六个小写字母中任意一个字母
• [a-zA-Z] 表示二十六个大小写字母中的任意一个字母
• [0-9a-zA-Z] 表示所有的数字和字母中的任意一个
• [] 另一个含义就是 把正则表达式中元字符的意义干掉
• 元字符’.'表示任意一个除了\n以外的字符 但是[.] 就是表示一个点

3.元字符 |

| 表示或的意思 优先级非常低 最后才计算

• [0-9] | [a-z] 表示要么是0-9之间的一个数字，要么是二十六个小写字母中的一个字母

4.元字符 （)

() 作用 提升优先级 提取组 。最后的例子中会用到组的概念。

5.元字符 限定符 {}

{} 既是元字符也是限定符。

• {n} 表示前面的表达式必须出现n次
• {n,} 表示前面的表达式至少出现n次，最多不限
• {n,m} 表示至少出现n次，至多出现m次

6.元字符 限定符 *

• 元字符* 表示前面的表达式出现了0次或多次;
• 等价于{0,}

7.元字符 限定符 +

• 元字符+ 表示至少出现1次
• 等价于{1,}

8.元字符 限定符 ?

• 元字符? 表示出现0次或1次
• 等价于{0,1}
• 元字符?的另一个意思是：终止贪婪模式

9.元字符 \d

• \d 表示数字中的一个
• 等价于[0-9]

10.元字符 \D

• \D 表示非数字 字母或者特殊符号中的一个
• 等价于[^0-9]

11.元字符 \s

• \s表示空白符中的一个

12.元字符 \S

• \S 表示非空白符中的一个

13.元字符 \w

• \w 匹配一个单字字符（字母、数字、下划线） 非特殊符号中的一个
• 即代表正常的字符
• 等价于 [0-9a-zA-Z_]

14.元字符 \W

• \W 表示特殊符号
• 等价于[^0-9a-zA-Z]

15.元字符 \b

• \b 匹配一个单词的边界
• 指单词和空格间的位置
• er\b 可以匹配 never 中的er
• er\b 不可以匹配verbena 中的er

16.元字符 \B

• \B 和上面的相反，匹配非单词边界
• er\B 可以匹配verbena 中的er
• er\B 不可以匹配never 中的er

17.元字符 ^

• 元字符^表示以什么开始
• 元字符^也表示 取非（取反）的意思
• ^[0-9] 以数字开头
• ^[a-z] 以大写字母开始
• [^0-9] 取反，非数字
• [^a-z] 取反 非小写字母

18.元字符 $

• $ 表示的是以什么结束
• [0-9][a-z]$ 表示必须以小写字母结束

(二) 元字符简单练习判断

• [a-z]{3} 表示有三个小写字母
  • ews √
  • 98u X
• [a-z0-9]{1,6} 表示小写字母或者数字最少出现1次，最多六个
  • rws √
  • SAD X
• .{9,} 表示任意除了\n以外的字符 至少出现9次
  • qwertygbfc √
  • SAD X
• [a-z]* 表示任意长度的小写字母
  • qwertygbfc √
  • 123 X
• [a-z0-9]* 表示小写字母和数字不限制长度
  • qwertygbfc √
  • 4324fdffe √
  • 434343 √
• [a-z][0-9]* 表示一次小写字母任意长度的数字
  • 9999 X
  • a9999 √
• ([a-z][0-9])* 表示0次或多次小写字母+数字
  • 9r9r9r √
• [a-z0-9]? 表示数字或字母最多出现1次
  • y √
  • Y999 X

(三) 写正则表达式

根据需求写表达式时，可以先写一个对应的字符串，然后找规律

• 身份证 15位或者18位

  • ([1-9][0-9]{14}) | ([1-9][0-9]{16}[0-9zZ])
  • ([1-9][0-9]{14})([0-9]{2}[0-9zZ])? 优化后的

• 座机号码

  • [0-9]]{3,4}[-][0-9]{8}
  • \d{3,4}[-]\d{8}

• qq号码

  • [1-9][0-9]{4,10}
  • [1-9]\d{4,10}

• 手机号码

  • 简单的： \d{11}
  • 稍微精确点的：/^1[3456789]\d{9}$/
  • 再精确点的：([1][358][0-9][0-9]{8})|([1][4][37][0,9]{8})|([1][7][01367][0-9]{8})
  • 后续如果有新的手机号开头，可以再往里面加入，比如现在有同事是199开头的，索性在第一组里面直接加入9 即([1][3589][0-9][0-9]{8})|([1][4][37][0,9]{8})|([1][7][01367][0-9]{8})

• 邮箱

  • [0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}

之前有写过一些常用的js表达式，因此常用的正则这里不再一一列举，链接如下：
常用正则表达式

(四) 创建正则表达式对象

1.通过构造函数创建对象

可以用/正则表达式/的方式

let reg=new RegExp(/\d{5}/);//正则表达式的对象

也可以用"\正则表达式"的方式

let reg=new RegExp("\\d{5}");//正则表达式的对象

 let reg=new RegExp(/\d{5}/);//正则表达式的对象
 let str="我的电话是10086";
 //调用方法验证字符串是否匹配
 let flag=reg.test(str);
 console.log(flag);

2.字面量的方式创建对象

//字面量的方式创建正则表达式
let reg=/\d{8}/;
let flag=reg.test("今天是：20200914");
console.log(flag);

3.简单的正则匹配结果判断练习

通过一些简单的判断练习看看自己元字符的学习的是否牢固。

   console.log(/[a-zA-Z]+/.test("hello"));//true

   console.log(/./.test("除了回车换行以为的任意字符"));//true
   console.log(/.*/.test("0个到多个"));//true
   console.log(/.+/.test("1个到多个"));//true
   console.log(/.?/.test("哈哈"));//true
   console.log(/[0-9]/.test("9527"));//true
   console.log(/[a-z]/.test("what"));//true
   console.log(/[A-Z]/.test("Are"));//true
   console.log(/[a-zA-Z]/.test("干啥子"));//false
   console.log(/[0-9a-zA-Z]/.test("9ebg"));//true
   console.log(/b|(ara)/.test("abra"));//true
   console.log(/[a-z]{2,3}/.test("arfsf"));//true

    console.log(/\d/.test("998"));//true
    console.log(/\d*/.test("998"));//true
    console.log(/\d+/.test("998"));//true
    console.log(/\d{0,}/.test("998"));//true
    console.log(/\d{2,3}/.test("998"));//true
    console.log(/\D/.test("eat"));//true
    console.log(/\s/.test("  "));//true
    console.log(/\S/.test("嘎嘎 "));//true
    console.log(/\w/.test("_"));//true
    console.log(/\W/.test("_"));//false

(五) 案例

1.经典的输入密码验证强弱度

/**
 *
 *密码强度：
 *只有数字|只有字母|只有特殊符号  ----1级
 *数字、字母| 数字、特殊符号 | 字母 特殊符号  --有两种 2级
 *数字字母和特殊符号 三种都有 3级
 * 
 */
function my$(id) {
  return document.getElementById(id);
}
//获取文本框键盘抬起事件
my$("pwd").onkeyup=function () {
  //输入框内容长度小于6不做等级判断
  my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value):0);

}

function getLvl(pwd) {
  let level=0;
  if(/\d/.test(pwd)){
    level++;
  }
  if(/[a-zA-z]/.test(pwd)){
    level++;
  }
  if(/[^0-9a-zA-Z]/.test(pwd)){
    level++;
  }

  return level;
}

2.验证用户输入的是不是中文

• 首先明确-正则的中文正则范围是[\u4e00-\u9fa5]。
• 可以通过unescape("\u4e00") -查出第一个中文是 “一”
• 通过unescape("\u9fa5") -查出最后一个中文是 “龥”
• 如果想知道某个中文对应的编码，可以通过escape(“嘿嘿”) 结果："%u563F%u563F"

document.getElementById("userName").onblur=function () {
	let reg=/^[\u4e00-\u9fa5]{2,6}$/;
	if(reg.test(this.value)){
		this.style.backgroundColor="green";
	}else{
		this.style.backgroundColor="red";
	}
}

(六) 正则其他方法的使用

首先需要知道：

• 正则表达式中 g:表示的是全局模式匹配
• 正则表达式中 i:表示忽略大小写

1.match

除了上面所列的可以用test来检验正则以外，还可以通过match方法来匹配出相应的字符串。match其实是string中的一个方法。

• 拿到如下字符串中所有的通信运行商号码。（如果不加’g’的话只能拿到第一个）

 let str="中国移动10086，中国联通10010，中国电信10000";
 let arr=str.match(/\d{5}/g);  
 console.log(arr);

• 拿到如下字符串中所有的邮箱

 var str = "123123@xx.com,fangfang@valuedopinions.cn 2863333669312@qq.com 2、emailenglish@emailenglish.englishtown.com 2866694444312@qq.com...";
 var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
 console.log(array);

• 提取这里的日（这里就用到组的概念）

        var str="2017-11-12";
        var array=str.match(/(\d{4})[-](\d{2})[-](\d{2})/g);
        console.log(array);
       // 正则表达式对象.$3
       // 从左往右数( 可以看见天所在的组是第三个() 即直接用RegExp.$3可以获取到天
        console.log(RegExp.$3);

• 提取邮箱中的用户名、域名

         var email="jintianhenkaixin@qq.com.cn";
        email.match(/([0-9a-zA-Z_.-]+)[@]([0-9a-zA-Z_-]+)(([.][a-zA-Z]+){1,2})/);
        console.log(RegExp.$1);//用户名
        console.log(RegExp.$2);//qq
        console.log(RegExp.$3);//域名

2.replace

这个是字符串string中的方法，在这里提是因为，这个方法中也可以传入正则表达式。

• 替换中文

 var str="今天很开心，很开心，很开心很开心~";
str=str.replace(/开心/g,"难过");
console.log(str);

• 去除字符串中的空白（字符串中有个trim方法，但是只能去除字符串前后的，并不能去除字符串当中的空白）

   var str1="  哟呵    ,下雨了  ";
   str1=str1.trim();
   console.log("==="+str1+"===");//只能去除前后的

   var str = "  哟呵    ,下雨了  ";
   str = str.replace(/\s+/g, "");
   console.log("===" + str + "===");

• 如下字符串中的所有的h不论大小写都替换成S

   var str="HhpphH";//SSppSS
   str=str.replace(/[h]/gi,"S");
   console.log(str);

   //用正则表达式对象的方式
    var reg = new RegExp(/[h]/gi);
    var str1 = "HhpphH";//SSppSS
    str1 = str1.replace(reg, "S");
    console.log(str1);

3.exec

exec每次只能匹配一个。

• 还是上面的匹配出所有的通信商号码 这里用exec的方式

   var str = "中国移动:10086,中国联通:10010,中国电信:10000";
   //把里面所有的数字全部显示出来
   //var array = str.match(/\d{5}/g);
   //正则表达式对象.exec方法传入字符串
   var reg=/\d{5}/g;
   // var array=reg.exec(str);
   // console.log(array);
//    console.log(reg.exec(str));
//    console.log(reg.exec(str));
//    console.log(reg.exec(str));

   var result=reg.exec(str);
   while(result!=null){
     console.log(result[0]);
     result=reg.exec(str);
   }