全面详解JS正则中匹配技巧及示例
作者:摸鱼的汤姆 发布时间:2024-03-24 15:07:39
引言
在做项目的时候难免会遇到很多奇葩解析字符串的需求,简单的字符串通过内置方法就能解析出来,如果遇到复杂的就不好办了,那我们如何解决复杂字符串解析那?只能借助正则帮我们解决这个问题。下面介绍一些关于正则的案例和匹配技巧,废话不多说,直接开整。
组名匹配
()表示捕获分组,() 会把每个分组里的匹配的值保存起来
// 将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)
来源:https://juejin.cn/post/7119410872623038501
猜你喜欢
- python中字典的key不能是可变类型。字典可存储任意类型对象,其中值可以取任何数据类型,但键必须是不可变的,如字符串、数字或元组。语法格
- 什么是MobileNet模型MobileNet是一种轻量级网络,相比于其它结构网络,它不一定是最准的,但是它真的很轻MobileNet模型是
- code:f = open('yesterday','r',encoding='utf-8'
- 本文实例讲述了php 使用 __call实现重载功能。分享给大家供大家参考,具体如下:<?php/** * Created by Ph
- jQuery的选择器是CSS 1-3,XPath的结合物。jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查
- 平时写的一些 Python 的代码,需要在其他模块里面复用。最粗狂的方法就是直接 copy 过去。但这种方式太麻烦,copy 一堆代码,导致
- 一 Protobuf介绍Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标
- 为了安全起见,需要经常对数据库作备份,或者还原。对于 MySQL 而言,最方便的方法可能就是用 phpMyAdmin 的导出、导入功能了,但
- 参数Parameters解析响应时间resolveTimeout 数据类型:长整型。简单地说就是程序对目标主机的名字解析解析的一个过程时间。
- 如何巧用三元表达式一开始我并不喜欢阅读别人的代码,话说程序员最讨厌的事:写代码要写文档、写代码要写注释、别人的代码没有文档、别人的代码没有注
- 查看当前用户拥有的系统权限 select * from user_sys_privs; 系统权限 系统管理员授予-----sys用户 cre
- keepAlive的使用在开发的过程中如果碰到经常浏览需要缓存的页面,而且页面很长需要记录滚动的位置这时就需要用到keepAlive。一共有
- 案例故事:百度网盘非会员大量上传文件,会弹出:“上传文件数量超出500个现在,开通超级会员后可继续上传”,其实是限制拖入500张相片,并非限
- 要说2017年什么技术最火爆,无疑是google领衔的深度学习开源框架Tensorflow。本文简述一下深度学习的入门例子MNIST。深度学
- 身边的人竟然不玩“跳一跳了”,都迷上了一个叫“冲顶大会”的东西,考了很多各学科的冷知识,文学、数学、地理、生物、动漫、八卦…小编网上找到一些
- mysqlcheck客户端工具可以检查和修复MyISAM表,还可以优化和分析表。实际上,它集成了mysql工具中check、repair、a
- python闭包关于闭包, 很多blog中都这样解释 :对于一个嵌套定义的函数,外层的函数的返回值是内层函数,而在内层函数中又引用了外层函数
- 1. /*+ALL_ROWS*/ 表明对语句块选择基于开销的优化方法,并获得最佳吞吐量,使资源消耗最小化. 例如: SELECT /*+AL
- 官方文档:https://2.python-requests.org//en/master/工作中涉及到一个功能,需要上传附件到一个接口,接
- 本文实例讲述了微信小程序学习笔记之文件上传、下载操作。分享给大家供大家参考,具体如下:前面介绍了微信小程序登录API与获取用户信息操作。这里