javascript正则

原创已于 2023-11-26 11:21:13 修改 · 483 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #正则表达式 #前端

于 2019-03-04 20:10:34 首次发布

大前端技术同时被 2 个专栏收录

344 篇文章

订阅专栏

大前端面试必知必会

7 篇文章

订阅专栏

`关于正则里详细内容请看我另一篇文章`

传送门https://blog.youkuaiyun.com/yexudengzhidao/article/details/85453154

参考MND链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions#special-questionmark

总结：

正则表达式归纳：

元字符 /s、/d、/w 、. 等等
量词：*、 +、? 或 {}
贪婪模式与非贪婪模式（默认为贪婪模式）
先行断言、后行断言，正向否定匹配、反向否定匹配

\b
\b 是正则表达式中的单词边界锚点，用于匹配单词的开头或结尾。例如，\bword\b 匹配 “word”，但不匹配 “words” 或 “password”。 \b\w+\b 匹配包含字母、数字、下划线的单词。

const regex = /\bword\b/;
console.log(regex.test("This is a word."));  // true
console.log(regex.test("These are words."));  // false

const regex = /\b\w+\b/;
console.log(regex.test("Word123"));  // true
console.log(regex.test("Not_a_word"));  // false

常用方法：

正则对象身上：test、exec
字符串身上：replace、match、search等

一. 使用 RegExp 对象

1. 使用 test()

test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

2. 使用 exec()

exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
注意：这个exec在设置全局匹配的过程中会有一个lastIndex指针在移动。如果想从头匹配，则将reg.lastIndex = 0

实例：匹配出字符串中所有的内容，注意正则对象要设置为全局匹配。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		let reg = /ab\d+/g
		let str = 'ab123deab45fdab00f';
		// let res = reg.exec('ab123deab45fdab00f')
		// res = reg.test('abcdeabcf')

		// console.log(res);
		// reg.lastIndex = 0;
		// res = reg.exec('ab123deab45fdab00f')
		// console.log(res);
		// let res = null;
		while ((res = reg.exec(str))!= null){
			console.log(res[0])
		}

	</script>

</body>
</html>

在这里插入图片描述

RegExp的$1、$2、$3。。属性

RegExp 是javascript中的一个内置对象，为正则表达式。

RegExp.$1是RegExp的一个属性，指的是与正则表达式匹配的第一个子匹配(以括号为标志)字符串，以此类推，RegExp.$2，RegExp.$3，…RegExp.$99总共可以有99个匹配

如果你直接在控制台打印RegExp.$1, 出现的一定是一个空字符串: “”。那么, 我们在什么时候可以使用RegExp.$1呢?

其实RegExp这个对象会在我们调用了正则表达式的方法后, 自动将最近一次的结果保存在里面, 所以如果我们在使用正则表达式时, 有用到分组, 那么就可以直接在调用完以后直接使用RegExp.$xx来使用捕获到的分组内容, 如下:

const r = /^(\d{4})-(\d{1,2})-(\d{1,2})$/
r.exec('2019-10-08')
 
console.log(RegExp.$1)  // 2019
console.log(RegExp.$2)  // 10
console.log(RegExp.$3)  // 08

二. 使用字符串方法

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

1. search() 方法

使用正则表达式

	var str = "Visit Runoob!"; 
	var n = str.search(/Runoob/i);

结果为：6

使用字符串
search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：

	 var str = "Visit Runoob!"; 
	 var n = str.search("Runoob");

2.match()方法，直接匹配出结果

let s = 'key1, val33 ue; ke232y'
rs = s.match(/\d+/g)
console.log(rs)

结果为：[ ‘1’, ‘33’, ‘232’ ]

let s = 'key1, val33 ue; ke232y'
rs = s.match(/\d+/)
console.log(rs['index'])

结果为：3

说明：

match() 方法将检索字符串 stringObject，以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。

如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外，返回的数组还含有两个对象属性。index 属性声明的是匹配文本的起始字符在 stringObject 中的位置，input 属性声明的是对 stringObject 的引用。

如果 regexp 具有标志 g，则 match() 方法将执行全局检索，找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串，则返回 null。如果找到了一个或多个匹配子串，则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同，它的数组元素中存放的是 stringObject 中所有的匹配子串，而且也没有 index 属性或 input 属性。

注意：在全局检索模式下，match() 即不提供与子表达式匹配的文本的信息，也不声明每个匹配子串的位置。如果您需要这些全局检索的信息，可以使用 RegExp.exec()。

例如：

let s = 'key1, val33 ue; ke232y'
let reg = /\d+/g
rs = reg.exec(s)
// console.log(rs)


// rs = reg.exec(s)
// console.log(rs)
while (rs != null) {
    console.log(rs)
    rs = reg.exec(s)
}

结果为：
[ ‘1’,
index: 3,
input: ‘key1, val33 ue; ke232y’,
groups: undefined ]
[ ‘33’,
index: 9,
input: ‘key1, val33 ue; ke232y’,
groups: undefined ]
[ ‘232’,
index: 18,
input: ‘key1, val33 ue; ke232y’,
groups: undefined ]

总结：match 和 exec

如果在全局下，match匹配到一个或多个，则返回一数组；在非全局性，只匹配第一个出现的，而且返回详细信息。

无论在全局下还是非全局下，exec都返回详细信息，并且exec在全局下会默认有一个lastIndex 指针在移动。

3. replace() 方法

使用正则表达式
使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :

	var str = document.getElementById("demo").innerHTML; 
	var txt = str.replace(/microsoft/i,"Runoob");

使用字符串
replace() 方法将接收字符串作为参数：

	var str = document.getElementById("demo").innerHTML; 
	var txt = str.replace("Microsoft","Runoob");

实例：replace替换所有(注意也要设置全局匹配)

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		let reg = /ab\d+/g
		let str = 'ab123deab45fdab00f';
		// let res = reg.exec('ab123deab45fdab00f')
		// res = reg.test('abcdeabcf')
		// console.log(res);
		// reg.lastIndex = 0;
		// res = reg.exec('ab123deab45fdab00f')
		// console.log(res);
		// let i = 3
		// let res = null;
		// while ((res = reg.exec(str))!= null){
			// console.log(res[0])
		// }
		// res = str.search(reg)
		// console.log(res)
		// res = str.search(reg)
		// console.log(res)
		res = str.replace(reg, 'kkk')
		console.log(res)
	</script>
</body>
</html>

在这里插入图片描述

三. 贪婪匹配与非贪婪匹配

正则中默认为贪婪匹配，
在这里插入图片描述

四. es6中新增 y 修饰符

以下摘自阮老师《ECMAScript 6 入门》,
ES6 还为正则表达式添加了 y 修饰符，叫做“粘连”（sticky）修饰符。

y 修饰符的作用与 g 修饰符类似，也是全局匹配，后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于， g 修饰符只要剩余位置中存在匹配就可，而 y 修饰符确保匹配必须从剩余的第一个位置开始，这也就是“粘连”的涵义。

	var s = 'aaa_aa_a';
	var r1 = /a+/g;
	var r2 = /a+/y;
	r1.exec(s) // ["aaa"]
	r2.exec(s) // ["aaa"]
	r1.exec(s) // ["aa"]
	r2.exec(s) // null

【注意】 y 修饰符号隐含了头部匹配的标志 ^ 。

	/b/y.exec('aba')
	// null

上面代码由于不能保证头部匹配，所以返回 null 。 y 修饰符的设计本意，就是让头部匹配的标志 ^ 在全局匹配中都有效。