欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

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

(一) 元字符

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.经典的输入密码验证强弱度

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

/**
 *
 *密码强度:
 *只有数字|只有字母|只有特殊符号  ----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"

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

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 = "aaa@qq.com,aaa@qq.com aaa@qq.com 2、aaa@qq.com aaa@qq.com";
 var array = str.match(/\aaa@qq.com\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="aaa@qq.com";
        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);
   }

上一篇: 学习日志1

下一篇: day07