正则表达式

2020-04-08 本文已影响0人 darkTi

一、作用

用来匹配符合某种规则的字符串

二、创建方式

1、字面量方式创建（简单、直观，最常用）

let reg = /+86\d{11}/g

2、构造函数方式创建（麻烦，但正则规则可通过字符串拼接，有些场景不得不用）

let reg = new RegExp('+86\d{11}', 'g')

最后的g代表全局，还有几个修饰符：
①g：global，全文搜索，不添加的话搜索到第一个结果停止搜索；
②i：ingore case，忽略大小写，默认大小写敏感；
③m：multiple lines，多行搜索

三、简单用法

1、正则的方法

let reg = /\+86\d{11}/
reg.test('+8615225633220')   //true

2、字符串方法

let str = 'hello1 nct, hello2 wayv'
str.search(/hello\d/)  //0
str.match(/hello\d/g) //["hello1", "hello2"]   匹配符合规则的字符串，以数组格式返回
str.replace(/hello\d/g, 'hi')  //"hi nct, hi wayv"
str.split(/\s/)  //["hello1", "nct,", "hello2", "wayv"]  按规则分隔字符串，以数组格式返回

四、专用字符

1、这些字符在正则中都具有特殊意义，不能直接写在正则中，需要在前面加\转义一下

( [ { \ ^ $ | ) ? * + .

五、字符匹配

1、匹配某一字符串

let reg = /wayv/
reg.test('hello wayv')  // true

当然了，除了用正则匹配外，遇到这种在一个字符串中查找某一字符串是否存在，也可以直接用indexOf

let str = 'hello1 nct, hello2 wayv'
str.indexOf('nct')   //7   存在的话，会返回此目标字符串的第一个字符所在的index
str.indexOf('nt')   // -1  "nt"不存在

2、范围匹配，[]这种匹配的都是一个字符串

[abc123]匹配一个字符，是a b c d 1 2 3中的任意一个（字母和数字可以写在一起，其他符号也可以写进去，但是要转义）；
[0-9] 匹配一个是0到9的数字；
[a-zA-Z]匹配一个不限制大小写的字母；
[^abc123] 表示一个不是字符a或b或c或1或2或3的字符；

let reg = /[8a\$]/
reg.test('$')   //true

let reg = /不是[67890]0后/
reg.test('我不是00后')  //true
reg.test('我不是80后')  //true
reg.test('我是00后')  //false  因为少个“不”字

六、预定义匹配

.等价于[^\r\n]（\r，回车return，\n，换行newline），匹配一个处回车和换行以外的任何字符，（相当于所有字符）；
\d等价于[0-9]，匹配一个数字字符；
\D等价于[^0-9]，匹配一个非数字字符；
\s等价于[空格\t\n\r\v\f]（\t是tap），匹配一个空白字符；
\S等价于[^空格\t\n\r\v\f]，匹配一个非空白字符，（会匹配特殊字符和字母数字）；
\w等价于[a-zA-Z_0-9]，匹配一个字母、数字、下划线（但是像@#%$等等这些都不匹配\w）；
\W等价于[^a-zA-Z_0-9]，匹配一个非单词字符，（相当于\W会匹配特殊字符和\s的空白字符，\W的范围会包含\s）；

let reg = /\W/
reg.test('&')  //true
reg.test('i')  //false

//匹配一个可以是 nct+数字+任意字符 的字符串
let reg = /nct[\d]./
reg.test('nct55')  //true
reg.test('kkknct5 011')  //true
reg.test('nct5')  //false

七、量词

1、可以设定匹配字符串的数量

? 前面的字符出现0次或者1次（次数：0或1）；
+前面的字符出现1次或者多次（次数：1或多次，就是必须得有个字符）；
* 前面的字符出现0次或者多次（次数：0或多次，有没有字符都可以，很随意啦）；
{n}前面的字符出现n次；
{n,m} 前面的字符出现n到m次；
{n,} 前面的字符出现至少n次；

//  主要区分"?"，"+"，"*"的区别
let str1 = 'http://baidu.com';
/https?:\/\/.+/.test(str1)  //true   "s?"没有s或者只有一个s
/https+:\/\/.+/.test(str1)  //false  “s+” 有1个或者多个s
/https*:\/\/.+/.test(str1)  //true  

let str2 = 'https://baidu.com';
/https?:\/\/.+/.test(str2) //true
/https+:\/\/.+/.test(str2) //true
/https*:\/\/.+/.test(str2) //true

let str3 = 'httpssssss://baidu.com';
/https?:\/\/.+/.test(str3) //false
/https+:\/\/.+/.test(str3) //true
/https*:\/\/.+/.test(str3) //true

八、字符串的边界限制

/^nct/ 字符串以nct开头（注意与[^nct]的区别！！！！）；
/wayv$/ 字符串以wayv结尾；
/\bnct\b/ 匹配是单词的nct（左右两侧是字符串开头、
结尾、中横线、空格）；
/\Bnct\B/ 匹配不是单词的nct；

let str = 'hello1 whello9orld hello2 12-hello8-3456 nct hello3 wayv'
str.match(/\bhello\d\b/g)  //["hello1", "hello2", "hello8", "hello3"]
str.match(/^hello/g)  //["hello"]
str.match(/^hello\d/g)  //["hello1"]
str.match(/hello\d$/g)   //null
str.match(/wayv$/g)   //["wayv"]

九、案例

1、匹配手机号，判断用户的输入是否符合手机号规则；
规则：以1开头长度为11的数字；

let reg = /^1\d{10}$/
reg.test('15866523580')  //true
reg.test('15866523580 ')  //false

切记：验证是为了防止用户误操作，不是越严格越好

2、匹配邮箱，判断用户的输入是否符合邮箱规则；
规则：字符串中间包含一个@，@后面的内容包含个.；

let reg = /^[^@\s]+@[^@\s]+\.[^@\s]+$/    //[^@\s]表示这个字符不能是@或空白字符
reg.test('8989uhh@163.com')  //true
reg.test('8989uhh@163.中国')  //true
reg.test('898 9uhh@163.com')  //false

3、匹配用户名，判断用户的输入是否是合法用户名；
规则：合法用户名至少8位至多15位，包含大写、小写、数字、下划线至少两种；（有时候不一定非要把规则写在一条正则里，可以分层次来判断，先判断一方面条件，通过了这个条件再判断其他的）

function validUsername(name){
//先判断是否符合8到15位字母数字下划线
    if(!/^\w{8,15}$/.test(name)) return false
//通过了上个条件，再判断是否至少包含两种类型，反过来想就是，不能全是数字字母下划线
    if(!/(^[a-z]+$) | (^[A-Z]+$) | (^\d+$) | (^_+$)/.test(name)) return false
    return true   
}

十、贪婪模式与非贪婪模式

1、'123456789'.match(/\d{3,5}/g) 的结果是什么？

贪婪模式.png
为什么不是['123','456','789']呢，因为match会默认用贪婪模式，就是尽可能多的去匹配；如果不想要贪婪模式，那么就在量词后面加上？即可，即'123456789'.match(/\d{3,5}?/g)

非贪婪模式.png
2、示例

`aa"hello world" or "nct"`.match(/".+"/g)   //[""hello world" or "nct""]

`aa"hello world" or "nct"`.match(/".+?"/g)   //[""hello world"", ""nct""]

十一、分组

1、就是把一些字符作为一个整体；

//匹配 wayvvv ，而不是 wayvwayvwayv
/wayv{3}/
//用括号把wayv括住，表示是一个整体，这样匹配的才是 wayvwayvwayv
/(wayv){3}/
//匹配的是 “hello world” 和 “hi world”
/(hello)|(hi) wolrd/
//这个是把带数字的hello替换成hi，要保留的部分用括号括住，后面用$1、$2...代替
'hello8 nct, hello9 wayv, hello dream'.replace(/hello(\d)/g, 'hi$1')

image.png

//把div标签换成span标签
'<div>this is a div</div>'.replace(/(<\/?)div(>)/g,'$1span$2') 
//"<span>this is a div</span>"

十二、前瞻

1、nct(?=dream) 表示匹配后面是dream的nct；
2、nct(?!dream) 表示匹配后面不是dream的nct；

/nct(?=dream)/.test('nctdream')  //true
/nct(?=dream)/.test('nctdre')  //false
/nct(?!dream)/.test('nctdream')  //false
/nct(?!dream)/.test('nctwayv')  //true