1,声明
其声明和其他的基本类型类似,都可以用字面量声明,或者包装类声明:
console.log(/abc/g); // /abc/g
console.log(new RegExp("abc", "g")); // /abc/g
二者各有各的优势,字面量声明,更符合常规用法,而包装类可以更清晰的声明包含变量的正则表达式:
const matchStr = "matchStr";
console.log(new RegExp(matchStr, "g")); // /matchStr/g
//但也不是说字面量声明就不可以包含变量,你可以这么做:
console.log(eval(`/${matchStr}/g`)); // /matchStr/g
//也将会被解析为一个正则表达式。eval会将其字符串参数转换为js表达式,且其上下文指向当前上下文
2,基本语法
或:
console.log(/ab|cd/.test("ab")); //true
console.log(/ab|cd/.test("cd")); //true
转义:
// 例如'/'为正则的边界符,如果需要在正则中使用该符号,需要这么做:
/\//;
//在包装类中,需要对转义符进行转义,才能正常使用,因此需要这样:
console.log(new RegExp("\\/")); // 最终会转译为:/\//
//常见的需要转义的字符如下:
/\/|\^|\||\$|\(|\)\<|\{|\}|\.|\*|\+|\?|\\/;
边界约束:
//起始边界约束
console.log(/^a/.test("ab")); // true
console.log(/^a/.test("ba")); // false
console.log(/a/.test("ba")); // true
//结束边界约束
console.log(/a$/.test("ba")); // true
console.log(/a$/.test("ab")); // false
console.log(/a/.test("ab")); // true
元字符:
//数字与非数字:
console.log(/\d/.test("1")); // true
console.log(/\D/.test("1")); // false
//大小写字母及下划线,与非大小写字母或下划线
console.log(/\w\w\w/.test("a_A")); // true
console.log(/\W/.test("a_A")); // false
//空白和非空白(空白包括了换行、缩进、空格、制表等和空格相关的)
console.log(/\w\s\w\s\w\s\w/.test("b\ta\nc c")); // true
console.log(/\S/.test(" ")); // false
//全匹配(除换行):
console.log(/./.test("a")); // true
console.log(/./.test(" ")); // true
console.log(/./.test("_")); // true
console.log(/./.test("&")); // true
console.log(/./.test("1")); // true
数量限制:
//零个或一个
console.log(/^\w?$/.test("")); // true
console.log(/^\w?$/.test("a")); // true
console.log(/^\w?$/.test("abc")); // false
//任意数量(零个、一个、多个)
console.log(/^\d*$/.test("")); // true
console.log(/^\d*$/.test("1")); // true
console.log(/^\d*$/.test("123")); // true
//一个或多个
console.log(/^\s+$/.test("")); // false
console.log(/^\s+$/.test(" ")); // false
console.log(/^\s+$/.test("\n\t")); // false
//自定义数量
console.log(/^\d{1,2}$/.test("")); // false
console.log(/^\d{1,2}$/.test("1")); // true
console.log(/^\d{1,2}$/.test("12")); // true
console.log(/^\d{1,2}$/.test("123")); // false
//若省略,则代表无穷多
console.log(/a{1,}/.test("aaaaaaaaa")); // true
console.log(/a{1}/.test("aaaaaaaaa")); // true
//禁止贪婪
//在上述语法中,每一项的匹配都是贪婪的,也就是会尽可能多的匹配到符合自身要求的字符
//禁止贪婪则能让其在符合条件的基础上,尽可能少的去匹配字符
console.log("aaababab".match(/^(\w*)b/));
//['aaababab', 'aaababa', index: 0, input: 'aaababab', groups: undefined]
console.log("aaababab".match(/^(\w*?)b/));
//['aaab', 'aaa', index: 0, input: 'aaababab', groups: undefined]
原子组:
原子组主要是配合match方法使用。match在匹配正则的时候,若没有显式的在原子组内声明"?:",则会将原子组内的匹配内容捕获,如:
console.log("abcacb".match(/.(acb)/)[1]); // acb
在一个正则表达式中,可以使用任意数量的原子组,可以将每一个原子组的内容都捕获:
console.log("abcacbcccddd".match(/abc(acb)(ccc)(ddd)/));
// ['abcacbcccddd', 'acb', 'ccc', 'ddd', index: 0, input: 'abcacbcccddd', groups:undefined]
如果在原子组内声明了"?:",则会忽略对其的捕获:
console.log("abcacbcccddd".match(/abc(acb)(ccc)(?:ddd)/));
// ['abcacbcccddd', 'acb', 'ccc', index: 0, input: 'abcacbcccddd', groups: undefined]
这种写法并非多次一举,比如当你不确定某些整体的内容是否会出现时,你可能需要使用原子组将其变为一个整体,再使用" ? "或者" * ",但是你并不关心他的结果,不需要捕获,如:
console.log("abcabcwanted".match(/(?:abc)*(wanted)/));
// ['abcabcwanted', 'wanted', index: 0, input: 'abcabcwanted', groups: undefined]
原子表:
如果使用了原子表,则只需要符合表内任意一种表达式个体,匹配结果就为true,类似于或语法:
console.log(/[abcd]*/.test("dacb")); // true
但是需要注意的是,原子表会将正则拆分成最小的个体,比如在此例中的abcd,就不再是"abcd"了,而是"a"|"b"|"c"|"d"
console.log(/^[abcd]$/.test("abcd")); // false
断言匹配:
//匹配内容之前必须为XXX
console.log(/(?<=limit)abc/.test("limitabc")); // true
console.log(/(?<=limit)abc/.test("limabc")); // false
//匹配内容之后必须为XXX
console.log(/abc(?=limit)/.test("abclimit")); // true
console.log(/abc(?=limit)/.test("abclim")); // false
//匹配内容之前不能是XXX
console.log(/(?<!limit)abc/.test("limitabc")); // false
console.log(/(?<!limit)abc/.test("limabc")); // true
//匹配内容之后不能是XXX
console.log(/abc(?!limit)/.test("abclimit")); // false
console.log(/abc(?!limit)/.test("abclim")); // true
模式修正符:
常用的几个模式修正符如下所示:
i | 表示在和模式进行匹配进不区分大小写 |
m | 将模式视为多行,使用^和$表示任何一行都可以以正则表达式开始或结束 |
s | 如果没有使用这个模式修正符号,元字符中的"."默认不能表示换行符号,将字符串视为单行 |
g | 全局匹配,本意是对字符串进行完整匹配 |
以上只是对正则表达式的语法做了粗浅的介绍,正则表达式在不同组合、不同模式下会产生不同的效果,仅仅纸上谈兵是不够的,都需要自己多手动尝试。
3,基本练习
1,获取字符串中的数字字符,并以数组形式输出。如:12ak3222ljfl444223ql99kmf678,输出:[12, 3222, 444223, 99, 678]。
const reg = /(\d+)/g;
console.log("12ak3222ljfl444223ql99kmf678".match(reg));
//['12', '3222', '444223', '99', '678']
2,将字符串转换为驼峰形式。
const reg = /(-\w)/g;
console.log(
"get-element-by-id".replace(reg, (match) => {
return match.slice(1).toUpperCase();
})
);
//getElementById
3,和谐字符校验,输入的字符不能包含和谐字符 "csdn"。要求:校验必需使用断言
const reg = /^(?!.*csdn.*)[\w\W]*/g; // /[\w\W]*(?<!.*csdn.*)$/g 也同样可以
console.log(reg.test("acsdnbc"));
4,github提交规范校验。要求:feat(1234 section): Added new features 或 fix(222 section): fixed issue
const reg = /^(feat|fix)\((?:(\d+)\s+([^\(\)]+))\):\s*([\w\W]*)$/;
console.log("fix(123 section): make some bug".match(reg));
// ['fix(123 section): make some bug', 'fix', '123', 'section', 'make some bug', index: 0, input: 'fix(123 section): make some bug', groups: undefined]
4,初窥vue源码中的正则表达式
假设你对正则表达式已经有了基本的了解,对其特性也略知一二。现在将会带你以vue中的词法分析、句法分析中出现的正则表达式为例,对其进行逐个分析:
首先是对attribute的解析:
const attribute =
/^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/;
乍一看会很绕,但是没关系,我们将其拆开来看:
const a = /^\s*/; // 以0~n任意空格数开头
const b = /([^\s"'<>\/=]+)/; // 匹配不为原子表中的这几个字符的字符串
const c = /(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/;
//第三个比较复杂,再将其拆分来看
const c1 = /\s*(=)\s*/; //匹配"="
let c2 = /(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+))/;
//c2又分为以下三个部分:
const c21 = /"([^"]*)"+/;
// 匹配双引号包裹的内容,匹配方法用到的是双引号中不为双引号的任意字符,且处理了末尾多引号的情况
const c22 = /'([^']*)'+/;
// 匹配单引号包裹的内容,匹配方法用到的是单引号中不为单引号的任意字符,且处理了末尾多引号的情况
const c23 = /([^\s"'=<>`]+)/;
// 匹配除了原子表中的内容,实际上就是不被单双引号包裹的value
c2 = c21 || c22 || c23;
//再将其组装起来,
//c2:匹配单引号,双引号,或不使用引号的内容
//c:匹配 等号 加上 c2内容,且其整体是可以不存在的(用了?))
因此,其最终的匹配结果为如下几种情况:
class="some-class"、class='some-class'、class=some-class、disabled;
然后是匹配dynamicArgAttribute:
const dynamicArgAttribute =
/^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+?\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/;
依旧还是很长,同样的,我们拆分着看:
const dynamicArgAttribute =
/^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+?\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/;
const a = /^\s*/; // 依旧是经典开头
let b = /((?:v-[\w-]+:|@|:|#)\[[^=]+?\][^\s"'<>\/=]*)/;
//其中包括三个部分,继续拆分:
const b1 = /(?:v-[\w-]+:|@|:|#)/;
//匹配v-开头,加上任意数量的字母、下划线、-;或@:# 。即v-[model|text|on|directives] or @ or : or #
const b2 = /\[[^=]+?\]/;
//匹配[]内的不为等号的1~n的字符,对应着v-model[dynamicName],动态属性名
const b3 = /[^\s"'<>\/=]*/;
//匹配不为上述内容的任意数量的字符,对应着修饰符,v-model[dynamicName].modified
b = b1 + b2 + b3;
//因此,b匹配的内容应该为 v-bind[dynamicName].modified
let c = /(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
//继续拆分
const c1 = /\s*(=)\s*/
//匹配等号及其前后的空白
const c2 = /"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)/
//这个在之前已经讲到过了,也就是匹配单引号,双引号,或不使用引号的内容
//并且,因为c末尾处有符号?,其整体可以为0或1
因此,其最终的匹配结果为:
v-bind[dynamicName].sync = "value"
其中,[ ] 及其内容是必须存在的,而指令符可以为v-开头或者几种缩写形式,修饰符可以为0~n,等号及其后面的内容可以为0或1;
上述两个是在词法分析中比较经典的案例,接下来再来看句法分析中的几个正则表达式:
forAliasRE:
const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
从变量名中不难看出,这两个正则是用来处理v-for指令的。但是和词法分析相比,长度上来看,已经易读许多了。但我们依旧将其拆分来看:
const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
const a = /([\s\S]*?)/
//匹配任意字符,且禁止贪婪(表达式的意思是空白或非空白,二者都可,那么就代表为任意字符全匹配)
//同样的 [\d\D] [\w\W] 也都具有一样的效果。这种写法与 . 相比,可以多匹配换行符
const b = /\s+(?:in|of)\s+/
//匹配前后1~n任意数量的空白,内容为 in 或 of
const c = /([\s\S]*)/
//依旧是一个全匹配
因此,其最终匹配的结果为:(以 v-for = "(item,key,index) in arr" 为例)
(item,key,index),arr。而of和in不参与捕获。
而下一个正则 forIteratorRE 正是处理第一个参数的:
const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
//匹配 "," 之后,不为原子表中的字符,且匹配一次或两次
最终,其会将第一个参数(item,key,index) 的后两个字段加上其之前的逗号都给捕获:
,key 、,index
至于为什么这么做,可以在代码中略知一二:
const iteratorMatch = alias.match(forIteratorRE);
res.iterator1 = iteratorMatch[1].trim();
if(iteratorMatch[2]) {
res.iterator2 = iteratorMatch[2].trim();
}
res.alias = alias.replace(forIteratorRE, "").trim();
最终,vue会将v-for的第一个参数,解析为:
{
alias:'item'
iterator1:'key'
iterator2:'index'
}
最后,再来看看slot属性的正则:
const slotRE = /^v-slot(:|$)|^#/;
这是一个很简单的正则表达式,在此就不做分析,留给大家独立思考。
正则是一个比较常见,且很实用的工具。其语法相对枯燥,但是掌握好正则,绝对会在日常开发中提供大用处。
文中内容均带有个人理解,并不保证权威。若有错误,欢迎随时批评指正。