正则表达式无论在那一门语言中都发挥着「极大」的作用,有时候使用正则表达式能把几十行的代码缩减到几行。今天我们系统学习下 JS 所支持的正则表达式。
在 js 中创建正则两种方式:
1、通过字面量 /xxx/flag
性能好,适合正则表达式一直不变的情况,大多数使用的都是这种;
2、new RegExp('xxx', flag)
这种方式性能不如第一种,适合正则表达式变化的情况。
在 js 中有两种方式使用正则:
1、使用正则表达式提供的方法
test: 验证一个字符串是否满足正则,返回 true 或 false,主要用来查找字符串中是否包含了某个子字符串。举例:
const useTest = () => {
const text = 'I am suyan. You can learn fe with suyan';
let reg = /suyan/;
let ret = reg.test(text);
console.log('test: ', ret); // true
ret = reg.test(text);
console.log('test: ', ret); // true
ret = reg.test(text);
console.log('test: ', ret); // true
}
useTest();
如果把上面的正则表达式变为 /suyan/g,添加一个标识 g,上面的结果完全不同,这是因为带 flag g 的正则表示是一种「带状态的查询」,会记录上一次的查找位置,下次查询会基于上次查询之后的位置进行查询:
const useTest = () => {
const text = 'I am suyan. You can learn fe with suyan';
let reg = /suyan/;
let ret = reg.test(text);
console.log('test: ', ret); // true
ret = reg.test(text);
console.log('test: ', ret); // true
ret = reg.test(text);
console.log('test: ', ret); // false
}
useTest();
exec: 执行一个查询,找到返回一个数组,否则返回 null
同样需要注意带 flag g 和不带的情况,使用 g 的情况可以查找整个字符串中满足条件的子字符串:
const useExec = () => {
// 不带标识符 g
const text = 'I am suyan. You can learn fe with suyan';
let reg = /suyan/;
let ret = reg.exec(text);
console.log('exec: ', ret);
/**
exec: [
'suyan',
index: 5,
input: 'I am suyan. You can learn fe with suyan',
groups: undefined
]
*/
// 带有标识符 g 或 y,reg2 将是有状态的,可以遍历获取所有匹配结果
// 不带标识是无状态的,使用 while 将出现死循环
const reg2 = /suyan/g;
let arr;
while((arr = reg2.exec(text)) !== null) {
// lastIndex 匹配上一次结果的索引
console.log(`Found ${arr[0]}, next starts at ${reg2.lastIndex}`);
}
// Found suyan, next starts at 10
// Found suyan, next starts at 39
}
useExec();
2、字符串提供的方法
字符串也提供了一些方法,可通过正则的方式来操作字符串:
match:这个方法同正则表达式的 exec 方法,只不过它是字符串的方法,举例:
const useMatch = () => {
const text = 'I am suyan. You can learn fe with suyan';
// 不带 g 将返回第一个匹配到的结果
const reg = /suyan/;
ret = text.match(reg);
/**
match: [
'suyan',
index: 5,
input: 'I am suyan. You can learn fe with suyan',
groups: undefined
]
*/
console.log('match: ', ret);
// 带有 g 标记将返回一个匹配结果的数组
// 设置了 g 标签将不会返回组
const reg2 = /suyan/g;
ret = text.match(reg2);
// match2: [ 'suyan', 'suyan' ]
console.log('match2: ', ret);
}
matchAll:该方法正则必须带有 flag g,否则会报异常
如果查找到结果会返回一个迭代器,可通过 for-of 来遍历结果,举例:
const matchAll = () => {
// matchAll 必须带有 g 表示
const text = 'I am suyan. You can learn fe with suyan';
let ret = text.matchAll(/suyan/g);
for (const item of ret) {
console.log('matchAll: ', item);
}
/**
matchAll: [
'suyan',
index: 5,
input: 'I am suyan. You can learn fe with suyan',
groups: undefined
]
matchAll: [
'suyan',
index: 34,
input: 'I am suyan. You can learn fe with suyan',
groups: undefined
]
*/
}
replace(pattern, replacement),pattern 可以是字符串,也可以是正则表达式,replacement 可以是字符串,也可以是一个函数。返回值是一个新的字符串,替换后原字符串不会发生变化。
当 pattern 为字符串时,只有第一个符合条件的字符串才会被替换:
const text = 'I am suyan. learn fe with suyan';
// 如果是字符
let ret = text.replace('suyan', 'wsy');
// I am wsy. You can learn fe with suyan
console.log('replace: ', ret);
当 pattern 为正则表达式时,不带 flag g 只会替换第一个符合条件的字符串:
// 不带 g 将替换第一个符合条件的子字符串
const reg = /suyan/;
ret = text.replace(reg, 'wsy');
// I am wsy. learn fe with suyan
console.log('replace: ', ret);
当 pattern 为正则表达式时,带 flag g 会替换所有符合条件的字符串:
// 带有 g 标记将替换所有符合条件的子字符串
const reg2 = /suyan/g;
ret = text.replace(reg2, 'wsy');
// I am wsy. learn fe with wsy
console.log('replace: ', ret);
search: 该方法会返回第一个匹配的 index,如果未找到返回 -1
const text = 'I am suyan. You can learn fe with suyan';
let reg = /suyan/;
let ret = text.search(reg);
// 5
console.log('search: ', ret);
split: 可以把一个字符串拆分成一个数组,可使用正则表达式,例子中以数字拆分一个字符串:
const text = 'I8am1suyan2You3with';
let reg = /\d/;
let ret = text.split(reg);
// [ 'I', 'am', 'suyan', 'You', 'with' ]
console.log('split: ', ret);
本节内容先到这里,我们下节内容学习如何写一个正则表达式,大家加油!!
长按关注
素燕《前端小课》
帮助 10W 人入门并进阶前端
官网:https://lefex.gitee.io/