前端基础学习之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);
   }

相关标签：常用js 前端学习基础记录 regex js 正则表达式字符串 javascript

上一篇：学习日志1

下一篇： day07

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

(一) 元字符

1.元字符 .

2.元字符 []

3.元字符 |

4.元字符 （)

5.元字符 限定符 {}

6.元字符 限定符 *

7.元字符 限定符 +

8.元字符 限定符 ?

9.元字符 \d

10.元字符 \D

11.元字符 \s

12.元字符 \S

13.元字符 \w

14.元字符 \W

15.元字符 \b

16.元字符 \B

17.元字符 ^

18.元字符 $

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

(三) 写正则表达式

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

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

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

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

(五) 案例

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

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

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

1.match

2.replace

3.exec

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

4.元字符（)

5.元字符限定符 {}

6.元字符限定符 *

7.元字符限定符 +

8.元字符限定符 ?