JavaScript 正则表达式

小虎

于 2020-10-28 10:22:36 发布

阅读量215

点赞数

分类专栏： JavaScript 文章标签： JavaScript 正则表达式

本文链接：https://blog.youkuaiyun.com/xuweisen/article/details/109304029

版权

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了正则表达式的创建、测试方法以及各种字符类的使用技巧，包括匹配控制、特殊字符转义等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是正则表达式

正则表达式(regular expression)是一个描述字符模式的对象。ECMAScript 的 RegExp 类

表示正则表达式，而 String 和 RegExp 都定义了使用正则表达式进行强大的模式匹配和文本

检索与替换的函数。

则表达式主要用来验证客户端的输入数据。用户填写完表单单击按钮之后，表单就会

被发送到服务器，在服务器端通常会用 PHP、 ASP.NET 等服务器脚本对其进行进一步处理。

因为客户端验证，可以节约大量的服务器端的系统资源，并且提供更好的用户体验。

二、创建正则表达式

可选参数：g

i 忽略大小写

g 全局匹配

m 多行匹配

1.两种创建方式

var box = new RegExp('box'); //第一个参数字符串

var box = new RegExp('box', 'ig'); //第二个参数可选模式修饰符

var box = /box/; //直接用两个反斜杠

var box = /box/ig; //在第二个斜杠后面加上模式修饰符

2.测试正则表达式

RegExp 对象包含两个方法：test()和 exec()，功能基本相似，用于测试字符串匹配。

test()方法在字符串中查找是否存在指定的正则表达式并返回布尔值，如果存在则返回 true，不存在则返回 false。

exec()方法也用于在字符串中查找指定正则表达式，如果 exec()方法执行成功，则返回包含该查找字符串的相关信息数组。如果执行失败，则返回 null。

eg:

var pattern = /box/i; //创建正则模式，不区分大小写

var str = 'This is a Box!'; //创建要比对的字符串

alert(pattern.test(str)); //通过 test()方法验证是否匹配

alert(pattern.exec(str)); //匹配了返回数组，否则返回 null

3.使用字符串的正则表达式方法

match(pattern) 返回 pattern 中的子串或 null

replace(pattern, replacement) 用 replacement 替换 pattern

search(pattern) 返回字符串中 pattern 开始位置（第一个匹配的位置）

split(pattern) 返回字符串按指定 pattern 拆分的数组

eg；

var pattern = /box/gi; //创建正则模式

var str = 'This is a box and Box he!'; //创建要比对的字符串

alert(str.match(pattern));

RegExp 对象的静态属性

input $_ 当前被匹配的字符串

lastMatch $& 最后一个匹配字符串

lastParen $+ 最后一对圆括号内的匹配子串

leftContext $` 最后一次匹配前的子串

rightContext $' 在上次匹配之后的子串

multiline $* 用于指定是否所有的表达式都用于多行的布尔值

var pattern = /(g)oogle/;

var str = 'This is google！';

pattern.test(str); //执行一下

alert(RegExp.input); //This is google！

alert(RegExp.leftContext); //This is

alert(RegExp.rightContext); //！

alert(RegExp.lastMatch); //google

alert(RegExp.lastParen); //g

alert(RegExp.multiline); //false

RegExp.input 和 RegExp['$_']一样

RegExp 对象的实例属性

global Boolean 值，表示 g 是否已设置

ignoreCase Boolean 值，表示 i 是否已设置

lastIndex 整数，代表下次匹配将从哪里字符位置开始还支持手动设置，直接赋值操作。

multiline Boolean 值，表示 m 是否已设置

Source 正则表达式的源字符串形式

var pattern = /google/ig;

alert(pattern.global); //true，是否全局了

alert(pattern.ignoreCase); //true，是否忽略大小写

alert(pattern.multiline); //false，是否支持换行

alert(pattern.lastIndex); //0，下次的匹配位置

alert(pattern.source); //google，正则表达式的源字符串

var pattern = /google/g;

var str = 'google google google';

pattern.test(str); //google，匹配第一次

alert(pattern.lastIndex); //6，第二次匹配的位

三．获取控制

字符类：单个字符和数字

. 匹配除换行符外的任意字符

[a-z0-9] 匹配括号中的字符集中的任意字符

[^a-z0-9] 匹配任意不在括号中的字符集中的字符

\d 匹配数字

\D 匹配非数字，同[^0-9]相同

\w 匹配字母和数字及_

\W 匹配非字母和数字及_

字符类：空白字符

\0 匹配 null 字符

\b 匹配空格字符

\f 匹配进纸字符

\n 匹配换行符

\r 匹配回车字符

\t 匹配制表符

\s 匹配空白字符、空格、制表符和换行符

\S 匹配非空白字符

字符类：锚字符

^ 行首匹配

$ 行尾匹配

\A 只有匹配字符串开始处

\b 匹配单词边界，词在[]内时无效

\B 匹配非单词边界

\G 匹配当前搜索的开始位置

\Z 匹配字符串结束处或行尾

\z 只匹配字符串结束处

字符类：重复字符

x? 匹配 0 个或 1 个 x

x* 匹配 0 个或任意多个 x

x+ 匹配至少一个 x

(xyz)+ 匹配至少一个(xyz)

x{m,n} 匹配最少 m 个、最多 n 个 x 可以写成x{m,}表示至少m个和 x{m}表示只能是m个

字符类：替代字符

this|where|logo 匹配 this 或 where 或 logo 中任意一个

字符类：记录字符

(string) 用于反向引用的分组

\1 或$1 匹配第一个分组中的内容

\2 或$2 匹配第二个分组中的内容

\3 或$3 匹配第三个分组中的内容

var pattern = /goo\sgle/; //\s表示空格匹配

var str = 'goo gle';

alert(pattern.test(str));

var pattern = /google\b/; //\b表示到达边界

var str = 'google';

alert(pattern.test(str));

var pattern = /google|baidu|bing/; //|表示匹配或选择模式

var str = 'this is a bing'; //匹配概念，不是相等，包含意思

alert(pattern.test(str));

var pattern = /google{4,8}$/; //表示e的4-8次

var str = 'googleeee';

alert(pattern.test(str));

var pattern = /(google){4,8}$/; //分组，可以看着一个字符

var str = 'googlegooglegooglegoogle'; //表示google4-8次

alert(pattern.test(str));

var pattern = /8(.*)8/;

var str = 'This is a 8google8';

str.match(pattern);

alert(RegExp.$1); //RegExp.$1表示获取模式中第一个分组对应的匹配字符串

var pattern = /8(.*)8/;

var str = 'This is a 8google8';

document.write(str.replace(pattern, '$1')); //$1表示分组获取字符串匹配到的内容

var pattern = /(.*)\s(.*)/;

var str = 'google baidu';

alert(str.replace(pattern, '$2 $1')); //位置交换

贪婪惰性

+ +?

? ??

* *?

{n} {n}?

{n,} {n,}?

{n,m} {n,m}?

var pattern = /[a-z]+/; //这里使用了贪婪模式

var str = 'abcdefj';

alert(str.replace(pattern, '1')); //所有的字符串变成了1

var pattern = /[a-z]+?/; //使用惰性模式

var str = 'abcdefj';

alert(str.replace(pattern, '1')); //只有第一个字符变成了1，后面没有匹配

var pattern = /[a-z]+?/g; //开启全局，并且使用惰性模式

var str = 'abcdefj';

alert(str.replace(pattern, '1')); //每一个字母替换成了1

var pattern = /8(.*)8/; //使用了贪婪，

var str = '8google8 8google8 8google8'; //匹配到了google8 8google8 8google

document.write(str.replace(pattern, '$1'));

//结果：google8 8google8 8google

var pattern = /8(.*?)8/g; //使用了惰性，开启全局

var str = '8google8 8google8 8google8';

document.write(str.replace(pattern, '$1'));

//这次结果正确了

//google

var pattern = /8([^8]*)8/g; //另一种惰性，屏蔽了8的匹配，也就是两边包含字符

var str = '8google8 8google8 8google8';

document.write(str.replace(pattern, '$1'));

//google

var pattern = /^[a-z]+\s[0-9]{4}$/;

var str = 'google 2012';

alert(pattern.exec(str)); //返回一个包含字符串的数组

var pattern = /^[a-z]+/; //只匹配到字母

var str = 'google 2012';

alert(pattern.exec(str)); //只返回google的字符串数组

var pattern = /^([a-z]+)\s([0-9]{4})$/; //使用了分组

var str = 'google 2012';

var a = pattern.exec(str);

//alert(a.length); //3

alert(a[0]); //a[0]，返回匹配到的整个字符串

alert(a[1]); //a[1]，返回匹配到的第一个分组的字符串

alert(a[2]); //a[2]，返回匹配到的第二个分组的字符串

var pattern = /(\d+)([a-z])/; //这个叫做捕获性分组，所有的分组都捕获返回

var str = '123abc';

var a = pattern.exec(str);

//a[0]返回123a

//a[1]返回123

//a[2]返回a

var pattern = /(\d+)(?:[a-z])/; //非捕获性分组，只要在不需要捕获返回的分组加上?:

var str = '123abc';

alert(pattern.exec(str));

var pattern = /(a?(b?(c?)))/; //嵌套分组，从外往内获取

var str = 'abc';

alert(pattern.exec(str));

//第一步：a[0]，整个匹配到的字符串abc

//第二步：a[1]，匹配第一个分组(a?(b?(c?))), abc

//第三步：a[2]，匹配第二个分组(b?(c?)， bc

//第三步：a[3]，匹配第三个分组(c?)， c

var pattern = /goo(?=gle)/; //goo后面必须是gle才能返回goo，这里一定要注意，返回的是goo，而不是google

var str = 'google';

alert(pattern.exec(str)); //返回的是goo，而不是google，这是前瞻性捕获

var pattern = /\[/; //用\符号来转义正则里的特殊字符，才能匹配

var str = '[';

alert(pattern.test(str));

var pattern = /^\d+/gm; //限定了首匹配，并且开启换行模式

var str = '1.baidu\n2.google\n3.bing';

alert(str.replace(pattern, '#'));

var pattern = /[1-9][0-9]{5}/;

var str = 'This is 224000 !'; //必须是6位，必须是数字，第一位不能为0

alert(pattern.test(str));

var pattern = /^[\w\-]+\.zip|gz|rar/; //\w+，加上^来限定首字符开始匹配

var str = '2-13.zip'; //文件名：字母_数字 . zip,gz,rar,7z

alert(pattern.test(str));

var pattern = /\s/g;

var str = '111 222 333 555';

alert(str.replace(pattern, ''));

var pattern = /^\s+/;

var str = ' goo gle '; //去掉头尾空格

var result = str.replace(pattern, '');

pattern = /\s+$/;

result = result.replace(pattern, '');

alert('|' + result + '|');

var pattern = /^\s+(.+?)\s+$/; //(.+)是贪婪模式，惰性模式

var str = ' goo gle ';

var result = pattern.exec(str)[1];

alert('|' + result + '|');

var pattern = /^\s+(.+?)\s+$/;

var str = ' goo gle ';

var result = str.replace(pattern, '$1'); //使用的分组

alert('|' + result + '|');

var pattern = /^([\w\.\-]+)@([\w\-]+)\.([a-zA-Z]{2,4})$/;

var str = ' yc60.com@gmail.com';

alert(pattern.test(str));

window.οnlοad=function(){

var pattern = /^([\w\.\-]+)@([\w\-]+)\.([a-zA-Z]{2,4})$/;

var str = ' yc60.com@gmail.com';

alert(pattern.test(str));

}

(?=p)和(?!p)、 (?<=p)和(?<!p) 区别

"hello".replace(/(?=l)/g, '#'); 匹配l前位置

"he#l#lo"

"hello".replace(/(?!l)/g, '#'); 匹配非l前位置

"#h#ell#o#"

"hello".replace(/(?<=l)/g, '#'); 匹配l后位置

"hel#l#o"

"hello".replace(/(?<!l)/g, '#'); 匹配非l后位置

"#h#e#llo#"