正则基本使用

最新推荐文章于 2023-03-18 19:16:48 发布

常威在打来福~

最新推荐文章于 2023-03-18 19:16:48 发布

阅读量252

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_41166682/article/details/125886437

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

正则基本使用

参考链接：https://www.bilibili.com/video/BV12J41147fC?p=1

1.使用正则有什么区别？

\d: 查找数字

let str = "zhengze2022cms9988";
let nums = [...str].filter(a => !Number.isNaN(parseInt(a)));
console.log(nums.join("")); // 20229988

console.log(str.match(/\d/g).join("")); // 20229988

2.字面量创建正则表达式：/ /

eval(): 用于变量时

let str = "zhengze.com";
console.log(/h/.test(str)); // test检测  true
let a = "h";
console.log(/a/.test(str)); // 实际检测的还是a,而不是h， 结果为：false
console.log(eval(`/${a}/`).test(str))   // eval:把字符串变成js表达式   结果为：true

3.replace替换

console.log("abc.com".replace("c", search => {
    return "1";
})) // ab1.com 注意：没有使用全局替换，只会替换第一个
console.log("abc.com".replace(/\w/g, search => {
    return "1";
})) // 111.111

4.选择符的使用

let str = "zhengze123";
console.log(/abc|@/.test(str)); // false
console.log(/abc|@|e/.test(str)); // true 满足其中一个即为true

5.原子表与原子组中的选择符

[]: 有或的意思

(): 是个整体，根据整体进行查找

let reg = /[123456]/;
let str = '936';
console.log(str.match(reg)); // ['3', index: 1, input: '936', groups: undefined]

let reg = /(12|34)/;
let str = '8899222'; // 12|34整体查询
console.log(str.match(reg)); // null
=====>
reg = /(12|34)/;
str = '889922342';
console.log(str.match(reg)); // ['34', '34', index: 6, input: '889922342', groups: undefined]

6.转义

.点号： 1.除换行外任何字符(包括特殊字符_-@空格，不包含换行符\n) 2. 表示.普通点

d : \d数字 0~9 \d+：多个数字 \D：除了数字

w: \w 包含字母数字下划线_ \w+:多个（字母数字下划线_）

new RegExp()对象中需要再转义

let price = 9.99;
console.log(/\d+.\d+/.test(price)); // 999也为true
====>
console.log(/\d+\.\d+/.test(price)); // true 999为false

let reg = new RegExp("\\d+\\.\\d+");
// let reg = new RegExp("\d+\.\d+"); console.log("\d" === "d") 相当于d+.d+,需要再转义为\d+\.\d+
console.log(reg.test(price));

7.字符边界约束

^:起始 $:结束

let str = "abc123abc";
console.log(/\d/.test(str)); // true 只要包含数字为true
====>
console.log(/^\d$/.test(str)); // false 数字开始数字结束

let str = "abcdefgh";
console.log(/[a-z]{3,5}/.test(str)) // true
====>
console.log(/^[a-z]{3,5}$/.test(str)) // false 只能为3-6位

8.数值与空白元字符

let str = " zhengze8   12swz34   567 ";
console.log(str.match(/\d+/)); // 没有加全局g遇到空白字符停止查找 ['8', index: 8, input: ' zhengze8   12swz34   567 ', groups: undefined]

console.log(str.match(/[^\s]+/g).join("")); // 去掉空格
console.log(str.replace(/\s/g, "")); // 去掉空格

9.点元字符的使用

let str = "zhengze-_@&*^()";
console.log(str.match(/.+/));  // zhengze-_@&*^() 1.匹配全部字符，包括特殊字符(@&*^())

let url = "https://www.baidu.com";
console.log(url.match(/https?:\/\/\w+\.\w+\.\w+/)); // https://www.baidu.com 2.转义，匹配普通字符点.

10.i与g模式修正符

let str = "ZhengZe";
console.log(str.match(/z/));  // null
====>
console.log(str.match(/z/i)); // ['Z', index: 0, input: 'ZhengZe'] 只匹配一个
console.log(str.match(/z/ig)); // ['Z', 'Z'] 匹配全部

11.m多行匹配修正符

m:分行匹配

let str = `
	js,100元 #
    vue,200元 #
    baidu.com # 百度
    react,300元 #
`
console.log(str.match(/\s*.+\s+#$/gm).join("")); 
/* js,100元 #
   vue,200元 #
   react,300元 #  */
// *:0个或多个

12.汉字与字符属性

\p:检测每个字符属性

{L}：匹配字母

{P}: 匹配标点符号

/u 表示按unicode(utf-8)匹配（主要针对多字节比如汉字）
/i 表示不区分大小写（如果表达式里面有 a，那么 A 也是匹配对象）
/s 表示将字符串视为单行来匹配，匹配空格、\n

let str = "zhengze2022.背着书包上学堂，加油！";
console.log(str.match(/\p{L}/gu)); // ['z', 'h', 'e', 'n', 'g', 'z', 'e'] 不加u匹配不到
console.log(str.match(/\p{P}/gu)); // ['.', '，', '！']
console.log(str.match(/\p{sc=Han}/gu)); // ['背', '着', '书', '包', '上', '学', '堂', '加', '油']  {sc=Han}sc:语言 Han:汉字

13.原子表基本使用

let str = "zhengze";
console.log(str.match(/eg/g)); // null
console.log(str.match(/[eg]/g)); ['e', 'g', 'e']

let reg = /[eg]/g
while(res = reg.exec(str)) {
	console.log(res);
    /*
        ['e', index: 2, input: 'zhengze', groups: undefined]
        ['g', index: 4, input: 'zhengze', groups: undefined]
        ['e', index: 6, input: 'zhengze', groups: undefined]
    */
} // 查看具体index信息

14.排除匹配 [^]

let str = "zhengze";
console.log(str.match(/[^ze]/gi)); ['h', 'n', 'g']

15.原子表字符不解析

let str = "(zhengze).+";
console.log(str.match(/[.+]/gi)); // ['.', '+']

16.原子组的使用

let date = "2022-5-1";
let reg = /^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/g;
====>
let reg = /\d{4}([\/\-])\d{1,2}\1\d{1,2}$/g;
console.log(date.match(reg));

17.原子组的不记录组 (?😃

let date = "2022-05-01";
let reg = /\d{4}([\/\-])\d{1,2}\1\d{1,2}/;
console.log(date.match(reg)); // ['2022-05-01', '-', index: 0, input: '2022-05-01', groups: undefined]

=====>
date = "2022-05/01";
reg = /\d{4}(?:[\/\-])\d{1,2}([\/\-])\d{1,2}/;
console.log(date.match(reg)); // ['2022-05/01', '/', index: 0, input: '2022-05/01', groups: undefined]

18.批量使用正则

every(): 当里面所有为true则为true

let str = "aaa025A";
let regs = [
    /^[a-z0-9]{6,10}$/i,
    /[A-Z]/, // 必须包含大写字母
    /[0-9]/
];
regs = [
    /^[A-Z](\w+){5,9}$/, // 首字母大写
    /[0-9]/ // 必须包含数字
]
let state = regs.every(e => e.test(str));
console.log(state); // true

19.禁止贪婪 ?

+:匹配1个或多个

*:匹配0个或多个

let str = "zeeee";
console.log(str.match(/ze*/)); // zeeee ,匹配0个或多个e
console.log(str.match(/ze*?/)); // z ,匹配最小边界 0个e

console.log(str.match(/ze+/)); // zeeee ,匹配1个或多个e
console.log(str.match(/ze+?/)); // ze ,匹配最小边界 1个e

console.log(str.match(/ze{2,}/)); // zeeee,匹配e最小2无上限
console.log(str.match(/ze{2,}?/)); // zee,匹配最小边界2个e

20.字符串正则方法split拆分

let str = "2022/05/01";
console.log(str.split(/[-\/]/)); // ['2022', '05', '01']

21.$&的使用

$&匹配的内容

let str = "百度一下，你就知道";
let body = document.querySelector('body');
body.innerHTML = str.replace(/百度/g, `<a href="https://www.baidu.com/">$&</a>`);
console.log(str.replace(/百度/g, `<a href="https://www.baidu.com/">$&</a>`));

22.使用原子组别名 (?)

别名与值会加入 groups 里

let str = "<a id='bd' href='https://www.baidu.com/'>百度</a>";
let reg = /<a.*?href=(['"])(.*?)\1>(.*?)<\/a>/i;
console.log(str.match(reg));
====>
reg = /<a.*?href=(['"])(?<link>.*?)\1>(?<content>.*?)<\/a>/i;
console.log(str.replace(reg, "$<link>")); // （验证）使用别名

23.断言匹配(?=)、(?<=)、(?!)、(?<!)

相当于判断，需要判断后面跟随(?=愿景)条件才能匹配成功。

前面匹配：(?<=xxx)

xxx后面没有: (?!)xxx

xxx前面没有: xxx(?<!)

let str = "百度（Baidu）是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。";
let reg = /百度(?=愿景)/g;
let body = document.querySelector('body');
body.innerHTML = str.replace(reg, `<a href="https://www.baidu.com/">$&</a>`);
console.log(str.replace(reg, `<a href="https://www.baidu.com/">$&</a>`));

reg = /(?<=。)百度/g; // 匹配到第二个百度，匹配前面是。句号的
reg = /百度(?![（）])/g; // 匹配到第二个百度，匹配后面没有（）小括号的
reg = /(?<!。)百度/g; // 匹配到第一个百度，匹配前面不是。句号的