【JS基础】初步学习在js中使用正则表达式

前言

关于正则表达式的介绍，推荐看这篇文章正则表达式30分钟入门教程，博客就只记录本人日常可能会用到的东西。

初步学习，只会记录一些很基础的哈。因为本人不太想去记这些规则，太懒了~

---

创建正则

首先正则的一般写法是：/正则表达式主体/修饰符(可选)，创建出来后可以把他当成一个对象。

let obj = /world/;
console.log(typeof obj);  // object

除了字面量的写法，还可以使用new的写法，第一个参数是个字符串，里面写正则规则，第二个是修饰符。

let obj = new RegExp('world', 'g') // g表示全局匹配

---

字符类型的匹配方法

意思就是字符类型的变量里有哪些方法是可以联动正则

search

这个方法是通过规则去匹配，匹配到了就返回第一个字符的下标，匹配不到返回-1

let str = "hello world";
let n = str.search(/world/); // 用了简单的正则匹配
console.log(n); // 6 从下标6开始匹配到

像上面这种简单的，也可以直接用字符串去匹配

let str = "hello world";
let n = str.search("world");
console.log(n); // 6 从下标6开始匹配到

replace

这个方法是将匹配到的字符替换成指定字符。

let str = "hello world";
let str1 = str.replace(/world/, 'csdn');
console.log(str1);  // hello csdn

同样，上面这种简单的匹配也可以通过字符串去匹配。

let str = "hello world";
let str1 = str.replace("world", 'csdn');
console.log(str1);  // hello csdn

这个方法的第二个参数支持回调，如参默认为匹配到的字符，然后必须要返回替换的字符

let str = "hello world";
let str1 = str.replace(/world/, s=>{
    return '做一些处理'
});
console.log(str1);  // hello 做一些处理

match

这个方法我理解是search的详细版，返回的是一个数组，里面有一些信息，如果匹配失败了返回null

let str = '123456'
console.log(str.match(/45/)); 

---

正则的匹配方法

意思是正则对象里，有哪些方法是匹配相关的。

test

测试指定内容是否匹配正则，匹配到了返回true，反之。

let str = 'hello world'
let reg = /world/;
console.log(reg.test(str), /world/.test(str));  // true，true

---

转义

特殊符号冲突

正则里面有些符号是有含义的例如.，表示除了换行外的任何字符，可是有时候我们就是想用正常的点符号咋办，可以在前面加上\

let str = '123.456'
console.log(str.search(/\./)); // 3

正则创建问题

字面量创建的方式前后都有个/符号，new的话就直接写字符串，但是一般正则的规则不会像只有字符串这么简单，例如匹配数字的符号\d

let reg1 = /\d/ // 字面量写法没问题
let reg2 = new RegExp('\d') // 意思就变成了只是d
console.log(reg1.test('12.'), reg2.test('12.'), reg2.test('ad')); // true false true

为什么会这样，因为在字符串中'\d' === 'd'，真离谱哈哈，所以可以多加个\转义表示

let reg2 = new RegExp('\\d') 
console.log(reg2.test('12.')); // true 

---

记一些规则符号

一些简单的规则符号记住就行了，分类是我自己定义的，理解意思就行了

修饰符

全局匹配/g

表示全局匹配，且只要匹配上了就不会继续匹配

忽略大小写/i

原子表[]和原子组()

原子表用[]表示，我目前理解的是里面放的字符都是或者的关系

let str = '123456'
console.log(str.match(/[34]/)); // 类似 /3|4/

原子组用()表示，会匹配两种情况，一种是只有()内部的，一种是内部外部都匹配，所以匹配到了会返回一个数组（包含两种情况）。

let str = '123456'
console.log(str.match(/34|45/)); // 这个只会去匹配一次
console.log(str.match(/(34|45)/)); // 这个34|45匹一次后还会再34|45匹配一次

配合转义字符

表示数字\d，表示非数字\D

表示空格\s，表示非空格\S

表示字母，数字，下划线\w，反之\W

表示重复前面子项n次\n（\1，\2）

其他字符

任何符号.

以什么为开头^ ，以什么为结尾$

或者 |

用|表示

let str = '123456'
console.log(/2|4/.test(str)); // 匹配 2 或者 4

量词

符号	含义
*	表示0次或0次以上
+	表示等于或多于
?	表示0次或1次
{}	表示出现的次数

---

在正则中使用变量

let oldNam = '被替换的字段'
let newNam = '替换的字段'
let reg = new RegExp('\\${' + oldNam + '}', 'gi') // 找出【${被替换的字段}】 
data = data.replace(reg, '${' + newNam + '}') // 把所有【${被替换的字段}】 换成【${替换的字段}】 

---

一些实用的正则例子

匹配<tr ...data-type="footer"...</tr>的标签：

tinyEditData.match(/<tr[^>]*?data-type="footer".*?<\/tr>/gi) // i是忽略大小写

匹配<tbody data-type="header">...<\/tbody>的标签

str.match(/<tbody data-type="header">(.+?)<\/tbody>/) // 分组匹配

str.match(/<tbody data-type="body">.+?<\/tbody>/gi) // 只匹配包含的