全面详解JS正则中匹配技巧及示例
作者：摸鱼的汤姆
引言
在做项目的时候难免会遇到很多奇葩解析字符串的需求，简单的字符串通过内置方法就能解析出来，如果遇到复杂的就不好办了，那我们如何解决复杂字符串解析那？只能借助正则帮我们解决这个问题。下面介绍一些关于正则的案例和匹配技巧，废话不多说，直接开整。
组名匹配
()表示捕获分组，() 会把每个分组里的匹配的值保存起来
// 将1999-12-31时间格式转化为/1999/12/31
const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;
const matchObj = RE_DATE.exec('1999-12-31');
const year = `${matchObj[1]}/${matchObj[2]}/${matchObj[3]}`; //1999/12/31
- 首先我们看一下
(\d{4}) - 其中
()说明这是一个组 - 里面的
\d{4}表示出现4次的数组，这样后面的两个组我想我不用介绍你就会知道了
具名组匹配
具名匹配使用?<GtoupsItemName> 这种形式给每一个组添加名称
// 1999-12-31 -> 1999/12/31
const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const matchObj = RE_DATE.exec('1999-12-31');
const year = `${matchObj.groups.year}/${matchObj.groups.month}/${matchObj.groups.day}`;
console.log(year) // 1999/12/31
(?<year>\d{4})将第一个组命名为year,一次类推其他的也是如此。
关于组上一部分已经介绍的很清楚，具名组就是在表达式的前面加入<组名称>，然后按照matchObj.groups.year形式读取
解构赋值
let {groups: {one, two}} = /^(?<one>.*):(?<two>.*)$/u.exec('foo:bar');
console.log(one,two) // foo,bar
^(?<one>.*)匹配到:左边的任意字符串并赋值给one,:右边的就是two了- 解构赋值就是将匹配到的字符串，赋值到对应的具名组上
替换
通过具名匹配，使用$<组名>引用具名组，倒到替换效果
// 1999-01-02 -> 02/01/1999
let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
let str = '1999-01-02'.replace(re, '$<day>/$<month>/$<year>')
console.log(str) // 02/01/1999
前瞻后顾
前瞻后顾根据匹配条件匹配出之前或者之后的内容，具体分为下面几种情况，当然这几种情况根据自己匹配字符串的情况去使用
// 前瞻： A(?=B) //查找B前面的A // 后顾： (?<=B)A //查找B后面的A // 负前瞻： A(?!B) //查找后面不是B的A // 负后顾： (?<!B)A //查找前面不是B的A
- url解析
https://open.weibanzhushou.com/open-api/chat/message/list?num=aa&key=123aa
最后输出 num=aa&key=123aa
const reg1 = /(http|https)\:\/\/+(.+\?)(?=(\w))/g let str = 'https://open.weibanzhushou.com/open-api/chat/message/list?num=aa&key=123aa'; str = str.replace(reg1,'') console.log(str); // num=aa&key=123aa
(http|https)协议匹配\:\/\/特殊符号的转义主要匹配://+(.+\?)匹配url中path(?=(\w))匹配url中参数前面是否符合1,2,3三点
捕获分组
() 会把每个分组里的匹配的值保存起来，使用$n(n是一个数字，表示第n个捕获组的内容)
- 过滤html标签
str = " asdasd<p>aas</p>asd</br>asda<div>asad</div>asd";
// 最后输出[' asdasd', 'aas', 'asd', 'asda', 'asad', 'asd ']
const reg1 = /(\<|\<\/)\w{1,}\>/g;
// 等同于 /(\<|\<\/)\w*\>/g
// 等同于 /(\<|\<\/)\w+\>/g
str = str.replace(reg1,'-');
console.log(str.split('-')); //[' asdasd', 'aas', 'asd', 'asda', 'asad', 'asd ']
(\<|\<\/)将前半部分分为两种情况,第一种是<,另外一种是</\w{1,}\>匹配多次后半部分标签比如p>
- 千分位分隔符 10000->10,000 ，关于分组中的
$&的使用
const reg1 = /\d{1,3}(?=(\d{3}))/;
let num = '10000';
num = num.replace(reg1,'$&,');//10,000
补充$&,&n知识点
- $&
表示表示匹配到的字符串
const origin = 'abc1abc' const newStr = origin.replace(/\d/g, '<<$&>>'); // newStr = 'abc<<1>>abc
- $n
索引是从1开始. 如果不存在第 n个分组, 那么将会把匹配到到内容替换为字面量. 比如不存在第3个分组, 就会用"$3"替换匹配到的内容
const origin = '2022-07-08'
const newStr = origin.replace(/(\d{4})-(\d{2})-(\d{2})/g, '$1/$2/$3');
console.log(newStr)
总结
上面就可以看出正则在我们JS中也很重要，有时候可能一个小问题就需要用到，就像上面格式化时间，用到正则直接可以解决，但是也不排除正则是解析字符串的唯一方法，当然每个人的想法不一样，但是都需要自己去尝试实现。
以上就是全面详解JS正则中匹配技巧及示例的详细内容，更多关于JS正则匹配技巧的资料请关注脚本之家其它相关文章！