JavaScrip 正则表达式及字符串相关方法

JavaScrip 正则表达式及字符串相关方法

这个是之前学正则表达式的笔记，里面的知识比较通用。这里记录JavaScrip中正则表达式的使用。

正则表达式是一些用来匹配和处理文本的字符串。
正则表达式是你所定义的模式模板(pattern template），计算机根据正则表达式，来检查字符串是否符合规则

使用场景

• 搜索 匹配文本
• 替换 匹配并替换

正则表达式的创建

构造函数方式

语法:let 变量 = new RegExp(“正则表达式”,”匹配模式”)
更加灵活，第一个参数可以传变量

字面量方式

语法:let 变量 = /正则表达式/匹配模式

匹配模式

i 忽略大小写
g 全局匹配模式

正则方法 reg.test(str)

检查字符串str是否符合reg规则，返回布尔值

//正则表达式规则:字符串是否含有a
let reg = new RegExp("a")
let str = "a"
reg.test(str)

字符串可以使用正则的方法

str.split() 按规则拆分

• 可以将一个字符串拆分成一个数组，参数为拆分规则,可以是正则表达式
• 不修改原字符串，返回值为数组
• 默认是全局匹配

//根据任意数字将字符串拆分
let str="1a2b3c4d5e6f"
let result = str.split(/[0-9]/)
//输出[a,b,c,d,e,f]

str.search(搜索的内容) 按规则查找

• 搜索字符串中是否含有指定内容，类似indexOf()，区别是参数可以是正则表达式
• 搜索字符串中是否含有指定内容,返回第一次(即使是全局匹配也会 失效)出现的索引或者-1

string.match(条件) 按规则提取

• 根据正则表达式，从一个字符串中将字符串提取出来，返回值是数组
• 默认返回符合条件的第一个内容，匹配所有可以使用string.matchAll()方法
• 要找所有内容，开启全局匹配模式
• 可以为一个正则表达式设置多个匹配模式，顺序无所谓

let str="1a2b3c4d5e6f7A"
let result = str.match(/[a-z]/gi)
//输出[a,b,c,d,e,f,A]

ES2020 String.prototype.matchAll()

String.prototype.matchAll()方法，可以一次性取出所有匹配。
返回的是一个遍历器（Iterator），而不是数组。

const string = 'test1test2test3';
const regex = /t(e)(st(\d?))/g;

for (const match of string.matchAll(regex)) {
  console.log(match);
}
// ["test1", "e", "st1", "1", index: 0, input: "test1test2test3"]
// ["test2", "e", "st2", "2", index: 5, input: "test1test2test3"]
// ["test3", "e", "st3", "3", index: 10, input: "test1test2test3"]

string.replace(匹配的内容，替换的内容) 将匹配的内容进行替换

• 可以将字符串中指定内容替换为新内容，被替换的内容可以是正则表达式。
• 默认只替换第一个
• 不影响原来的字符串，返回新的字符串

可以使用它去空格

//会去掉全部的空格
str = str.replace(/\s/g,"")
//去掉开头的空格
str = str.replace(/^\s*/,"")
//去掉结尾的空格
str = str.replace(/\s*$/,"")
//去掉开头和结尾的空格
str = str.replace(/^\s*|\s*$/g,"")

ES6之后的正则扩展方法 RegExpObject.exec(string) 分别获取匹配结果

• 返回一个数组，其中存放匹配的结果，如果没有找到匹配则返回值为null。
• 加了()表示子匹配，匹配外部大正则的情况下同时匹配()里的内容
• 不管是否/g开启全局，只返回匹配的第一个。如果要返回匹配的多个可以使用while(reg.exec(str))或者使用String.prototype.matchAll()方法。

第一个元素是匹配的文本，第二个值第一个(.*?)返回值，第三个值第二个(.*?)返回值。通过数组下标访问匹配的值。

let str = '<a href="http://www.baidu.com">百度</a>'
const reg = /<a href="(.*)">(.*)<\/a>/
const result = reg.exec(str)
console.log(result)
/*
[
    "<a href=\"http://www.baidu.com\">百度</a>",
    "http://www.baidu.com",
    "百度"
]
*/

命名捕获分组groups

通过?<对捕获到的元素进行命名>,返回的数组中有一个groups属性。通过属性名来获取匹配的值。

let str = '<a href="http://www.baidu.com">百度</a>'
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/
const result = reg.exec(str)
console.log(result)
/*
[
    "<a href=\"http://www.baidu.com\">百度</a>",
    "http://www.baidu.com",
    "百度"
    groups:{
    "url": "http://www.baidu.com",
    "text": "百度"
	}//可以通过groups.url访问
]
*/

反向断言

正向断言(?=):x只有在y前面才匹配，必须写成/x(?=y)/
正向断言的否定(?!):x只有不在y前面才匹配，必须写成/x(?!y)/

匹配的是x，y只是定位符

//在%号前的数字被匹配，%号本身只是用于定位的不匹配
/\d+(?=%)/.exec('100% of US presidents have been male')  // ["100"]
/\d+(?!%)/.exec('that’s all 44 of them')                 // ["44"]

反向断言(?<=)：x只有在y后面才匹配，必须写成/(?<=y)x/
反向断言的否定?<!):x只有不在y后面才匹配，必须写成/(?<!y)x/

/(?<=\$)\d+/.exec('Benjamin Franklin is on the $100 bill')  // ["100"]
/(?<!\$)\d+/.exec('it’s is worth about €90')                // ["90"]

特殊字符串

[] 匹配多个字符中的某一个

[]中字符的关系是|或的关系

字符	描述
[]	必须匹配[]其中的某个字符
[-]	表示字符区间(集合),如大写字母[A-Z]
[^]	取反操作，不匹配[]中的某字符