全面详解JS正则中匹配技巧及示例

 更新时间:2023年01月04日 11:25:35   作者:摸鱼的汤姆  
这篇文章主要为大家介绍了全面详解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正则匹配技巧的资料请关注脚本之家其它相关文章!

相关文章

  • js与C#进行时间戳转换

    js与C#进行时间戳转换

    最近在做一个项目,需要JS时间戳转成C#里的时间,再把C#里的时间戳转成JS的时间,就仔细研究了下js与C#进行转换的注意要点,这里记录下来,有需要的小伙伴自己拿走。
    2014-11-11
  • 基于layui的table插件进行复选框联动功能的实现方法

    基于layui的table插件进行复选框联动功能的实现方法

    今天小编就为大家分享一篇基于layui的table插件进行复选框联动功能的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript实现移动端拖动元素

    JavaScript实现移动端拖动元素

    这篇文章主要为大家详细介绍了JavaScript实现移动端拖动元素,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • webpack 处理CSS资源的实现

    webpack 处理CSS资源的实现

    这篇文章主要介绍了webpack 处理CSS资源的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 为什么JavaScript中0.1 + 0.2 != 0.3

    为什么JavaScript中0.1 + 0.2 != 0.3

    这篇文章主要给大家介绍了关于为什么JavaScript中0.1 + 0.2 != 0.3的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 原生JavaScript实现Tooltip浮动提示框特效

    原生JavaScript实现Tooltip浮动提示框特效

    这篇文章主要为大家详细介绍了原生JavaScript设计和实现Tooltip浮动提示框特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 微信小程序开发之实现别踩白块游戏

    微信小程序开发之实现别踩白块游戏

    这篇文章主要为大家详细介绍了如何通过微信小程序开发一个简单的别踩白块游戏,文中的示例代码讲解详细,感兴趣的小伙伴可以和小编一起学习一下
    2023-02-02
  • 浅谈JavaScript工具链不完全指南

    浅谈JavaScript工具链不完全指南

    经过这么多年的发展,JavaScript 早已经不是当年那个不太起眼的脚本语言。如今的 JavaScript 可以说是风光无限,在 Web 前端、移动端、服务端甚至物联网设备上都大展身手,到处都有它的身影。
    2021-05-05
  • Javascript和jQuery的深浅拷贝详解

    Javascript和jQuery的深浅拷贝详解

    这篇文章主要为大家详细介绍了Javascript和jQuery的深浅拷贝,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • webpack打包优化的几个方法总结

    webpack打包优化的几个方法总结

    这篇文章主要介绍了webpack打包优化的几个方法总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02

最新评论