day_21 js之正则表达式
2022/1/5 6:09:09
本文主要是介绍day_21 js之正则表达式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、正则表达式:字符串的校验(验证) --- 字符串
正则的创建
字面量创建 /匹配的字符串/
实例化对象 new RegExp('匹配的字符串')
// 双斜杠 --- 判断字符串中是否有字符能匹配 good
const reg1 = /good/
// regular expression 简写
// 实例化对象
const reg2 = new RegExp('good')
console.log(reg1,reg2);
// /good/ /good/
二、正则的修饰符
i ignore 忽略大小写
var reg1 = /tmd/i
g global 全局的
const reg2 = /tmd/g
// 构造函数的第一个参数表示匹配的字符,第二个参数表示修饰符
const reg3 = new RegExp('tmd','gi')
const str = 'hello tmd hei Tmd tmd'
// replace 默认只会替换第一个
console.log(str.replace('tmd','**'));
console.log(str.replace(/tmd/ig,'**'));
console.log(str.replace(reg3,'**'));
三、正则的方法
text() 返回布尔值
exec() 返回的是一个数组 --- 总是匹配一个,如果匹配不到就返回null
补充知识点
[ ] -> true
const reg = /tmd/ig const str = 'hello tmd Tmd' // test正则的方法 测试字符串中是否有匹配正则的内容 -- 布尔值 一般次正则不需要全局匹配 console.log(reg.test(str)); // true / // 返回的是一个数组 --- 总是匹配一个,如果匹配不到就返回null console.log(reg.exec(str)); // ['Tmd', index: 10, input: 'hello tmd Tmd', groups: undefined]
四、正则的内容
正则的语法
| 或者
[] 或者(区间) [0-9] [1-9] [a-z] [A-Z] [0-9a-zA-Z]
空格也会被匹配 --- 一般正则不写空格
正则的元字符
次数匹配
* 0次或者多次 {0,}
? 0次或者1次 {0,1}
+ 1次或者多次 {1,}
{m,n} m次到n次
{m,} 至少m次
{m} m次
^ 以...开头
$ 以...结尾
^ $ 同时使用可以把正则规定死
. 匹配任意字符
五、转义字符
转义使用 \
// 匹配 \/ const reg = /\ \// console.log(reg.test(' \/')); // 匹配 . const reg2 = /\./ // 匹配[ const reg3 = /\[/ console.log(reg3.test('[]]')); // true console.log(reg2.test('hq')); // false // + ? * {} 匹配的次数,需要前面有匹配的东西 // const reg4 = /+/ // 报错 /+/: Nothing to repeat const reg4 = /\+/ console.log(reg4.test('+')); // true
六、简写
\d 数字
\D 非数字
\w 数字,字母,下划线 [0-9a-zA-Z_]
\W 非数字,字母,下划线
\s 匹配空白字符
\S 匹配非空白字符
空白字符和空字符不一样
空字符 .{0}
七、中文
中文匹配
[\u4e00-\u9fa5]
const reg = /^[\u4e00-\u9fa5]{3,6}$/ console.log(reg.test('你好啊')); // true
八、字符串使用到正则的方法
charAt() 访问角标对应的值
charCodeAt() 访问角标对应的值的ASCII值
String.fromCharCode() 把ASCII值转成对应的字符
includes() 判断数组中是否存在某个值
indexOf() 判断数组中是否存在某个值,返回第一次出现的下标,找不到就
返回-1
lastIndexOf() 判断数组中是否存在某个值,返回最后一次出现的下标
slice(i,i) 截取数组中的部分值,返回一个新的数组
substring(i,i) //截取(1,2)角标 第2个到第3个
substr(i,数量) // (2,2) 第2个开始截2个
toUpperCase()大写 toLowerCase()小写
concat() + 拼接数组,返回一个新的数组
split() 把字符串切割成数组
replace(old,new) 替换(默认只会替换第一个)
trim() 去掉首尾的空格
能接受正则的方法
replace(要查找的,替换的) 默认只会替换一次,因此需要正则
search() 一般和indexOf是一样的,但是search还可以接受正则
match() 找到满足条件的字符,默认只会找到第一个,全局匹配才能找到所有的,如果找不到就返回null
split() 把字符串切割成数组,也可以接受正则的写法
// 替换敏感词 function replaceMinGan(str,arr,n){ n = n || '**'; // const mgc = ['tmd','md','wc']; const word = arr.join('|'); const reg = new RegExp(word,'ig') return str.replace(reg,n) } const mgc = ['tmd','md','wc'] const res = replaceMinGan('wc,正则真tmd简单啊,Wc',mgc) console.log(res); // **,正则真**简单啊,**
const str2 = 'good day day up' console.log(str2.search('day')); // 5 search = indexOf console.log(str2.search(/da*y/gi)); // 5 search 可以使用正则,但是indexOf不能使用正则 console.log(str2.match(/da*y/gi)); // 找到满足条件的字符 ['day', 'day']
const str3 = 'good good study day day up' // 贪婪匹配 console.log(str3.split(/ +/)); // ['good', 'good', 'study', 'day', 'day', 'up']
九、常见的正则练习
// 邮箱 123@qq.com 123@qq.cn 123@qq.com.cn
// 必须有@,@前面必须有内容,.com或者.cn或者.com.cn结尾
const reg = /^[\w,\+]+@\w+\.(com|cn|com\.cn)$/ console.log(reg.test('1,+23@q.com.cn')); // true
// 身份证号 18位 17位数字+数字或者X
// 身份证 6位 4位出生年份 2月份 2日期 3数字 ,数字或者X
// 身份证号 18位 17位数字+数字或者X const reg2 = /^\d{17}[\dX]$/ console.log(reg2.test('22222219990929191X')); // true // 身份证 6位 4位出生年份 2月份 2日期 3数字 ,数字或者X const reg3=/^\d{6}(19|20)\d{2}(0|1)\d(0|1|2|3)\d{4}[\dX]$/ console.log(reg3.test('22222219991929191X')); // true
// 删除所有的空格
// 删除所有的空格 const str = ' good good study day day up ' // const arr = ['',' ',' '] ... // 替换 console.log(str.replace(/ +/g,'')); // goodgoodstudydaydayup 替换成空 就相当于把它删了
// 删除首尾空格
console.log(str); console.log(str.replace(/^ +| +$/g,'')); // good good study day day up
// 删除多余的空格
console.log(str.replace(/ +/g,' ')); // good good study day day up
这篇关于day_21 js之正则表达式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-31Vue CLI多环境配置学习入门
- 2024-12-31Vue CLI学习入门:一步一步搭建你的第一个Vue项目
- 2024-12-31Vue3公共组件学习入门:从零开始搭建实用组件库
- 2024-12-31Vue3公共组件学习入门教程
- 2024-12-31Vue3学习入门:新手必读教程
- 2024-12-31Vue3学习入门:初学者必备指南
- 2024-12-30Vue CLI多环境配置教程:轻松入门指南
- 2024-12-30Vue CLI 多环境配置教程:从入门到实践
- 2024-12-30初学者的vue CLI教程:快速开始你的Vue项目
- 2024-12-30Vue CLI教程:新手入门指南