WEB前端/JS中的正则表达式教程

正则表达式是所有程序员的效率和验证利器;

推荐一个可视化的正则工具:https://regexper.com/

RegExp 对象用于规定在文本中检索的内容。

什么是 RegExp?

RegExp 是正则表达式的缩写。

当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。

您可以规定字符串中的检索位置,以及要检索的字符类型,等等。

定义 RegExp

RegExp 对象用于存储检索模式。

通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象,其模式是 “e”:

var patt1=new RegExp("e");

当您使用该 RegExp 对象在一个字符串中检索时,将寻找的是字符 “e”。

RegExp 对象的方法

RegExp 对象有 3 个方法:test()、exec() 以及 compile()。

test()

test() 方法检索字符串中的指定值。返回值是 true 或 false。

例子:
var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free")); 

由于该字符串中存在字母 “e”,以上代码的输出将是:

true

exec()

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。

例子 1:
var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free")); 

由于该字符串中存在字母 “e”,以上代码的输出将是:

e
例子 2:

您可以向 RegExp 对象添加第二个参数,以设定检索。例如,如果需要找到所有某个字符的所有存在,则可以使用 “g” 参数 (“global”)。

如需关于如何修改搜索模式的完整信息,请访问我们的 RegExp 对象参考手册

在使用 “g” 参数时,exec() 的工作原理如下:

  • 找到第一个 “e”,并存储其位置
  • 如果再次运行 exec(),则从存储的位置开始检索,并找到下一个 “e”,并存储其位置
var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null) 

由于这个字符串中 6 个 “e” 字母,代码的输出将是:

eeeeeenull

compile()

compile() 方法用于改变 RegExp。

compile() 既可以改变检索模式,也可以添加或删除第二个参数。

例子:
var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

由于字符串中存在 “e”,而没有 “d”,以上代码的输出是:

truefalse

~~~~~~~~~~~~~

简单类

原则上正则的一个字符对应一个字符,我们可以用[]把它们括起来,让[]这个整体对应一个字符。如

alert(/ruby/.test("ruby"));//true

alert(/[abc]/.test("a"));//true

alert(/[abc]/.test("b"));//true

alert(/[abc]/.test("c"));//true

alert("a bat ,a Cat,a fAt bat ,a faT cat".match(/[bcf]at/gi));//bat,Cat,fAt,bat,faT,cat

负向类

也是在那个括号里做文章,前面加个元字符进行取反,表示匹配不能为括号里面的字符。

alert(/[^abc]/.test("a"));//false

alert(/[^abc]/.test("b"));//false

alert(/[^abc]/.test("6"));//true

alert(/[^abc]/.test("gg"));//true

范围类

还是在那个中括号里面做文章。有时匹配的东西过多,而且类型又相同,全部输入太麻烦,我们可以用它。特征就是在中间加了个横线。

组合类

还是在那个中括号里面做文章。允许用中括号匹配不同类型的单个字符。

alert(/[a-f]/.test("b"));//true

alert(/[a-f]/.test("k"));//false

alert(/[a-z]/.test("h"));//true

alert(/[A-Z]/.test("gg"));//false

alert(/[^H-Y]/.test("G"));//true

alert(/[0-9]/.test("8"));//true

alert(/[^7-9]/.test("6"));//true

alert(/[a-m1-5\n]/.test("a"))//true

alert(/[a-m1-5\n]/.test("3"))//true

var a = "\n\

"

alert(/[a-m1-5\n]/.test(a))//true

alert(/[a-m1-5\n]/.test("r"))//false

~~~

1. 什么是正则表达式 #

在常见的字符串检索或替换中,我们需要提供一种模式表示检索工替换的规则
正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串
判断正则是否能匹配给定参数字符串

2. JS正则中的特殊字符 #

需要转义的特殊字符

( [ { \ ^ $ | ) ? * + .

特殊字符说明

特殊字符 说明
$ 匹配输入字符串的结尾位置。请使用 \$
( ) 标记一个子表达式的开始和结束位置,请使用\( \)
* 匹配前面的子表达式零次或多次,请使用 \*
+ 匹配前面的子表达式一次或多次,请使用 \+
. 匹配除换行符\n之外的任何单字符,请使用 \.
[] 标记一个中括号表达式的开始,请使用 \[ 或 \]
? 匹配前面的子表达式零次或一次,请使用 \?
\ 将下一个字符标记为或特殊字符,请使用 \\
^ 匹配输入字符串的开始位置,请使用 \^
{} 标记限定符表达式的开始。请使用 \{
¦ 指明两项之间的一个选择,请使用

3. 预定义的特殊字符 #

字符 描述
\t 制表符
\n 制表符
\r 回车符
\f 换页符
\v 垂直制表符
\0 空字符
\x0B 垂直tab

4. 范围符号 #

符号 含义 示例
[] 字符范围 [a-z] [0-9] [a-z0-9]
[^] 字符范围以外 [^a-z]
^ 行首 ^zfpx
$ 行尾 zfpx$
\b 零宽单词边界 \bhello
\B 非\b \Bhello

5. 预定义类 #

字符 等同于 含义 示例
. [^\n\r] 任意字符 /…/.test(‘abc’)
\d [0-9] 数字0-9 /\d\d\d/.test(‘123’)
\D [^0-9] 非\d,即不是数字0-9 /\D\D\D/.test(‘abc’)
\w [a-zA-Z_0-9] 数字0-9、字母a-z及a-z、下划线 /\w\w/.test(‘a_’)
\W [^a-zA-Z_0-9] 非\W /\W\W/.test(‘@#’)
\s [\t\n\x0B\f\r] 空格、TAB、换页符、换行符 /\sabc/.test(‘ abc’)
\S [^\t\n\x0B\f\r] 非\s /\Sd/.test(‘a d’)

6. 分组 #

符号 含义 示例
(x) 分组,并记录匹配到的字符串 /(abc)/
\n 表示使用分组符(x)匹配到的字符串 /(abc)\1/.test(‘abcabc’)
(?:x) 仅分组不捕获 /(?:abc)(def)\1/.test(‘abcdefdef’);

7.重复 #

符号 含义 示例
a*,a+ 重复次数>=0,重复次数>=1 贪婪算法 /abc*.test(‘abccc’)/
a*? a+? 同a*,a+ 非贪婪算法 /abc*/.test(‘ab’)
a? 出现0次或1次 /a?bc/.test(‘ab’)
a¦b a或者b /a¦b/.test(‘a’)
a{n},a{n,},a{n,m} 重复n次,重复>=n次,重复n<=x<=m /a{2}/.test(‘aa’)

8.前瞻 #

正则 名称 描述
(?=exp) 正向前瞻 匹配后面是exp的位置
(?!exp) 负向前瞻 匹配后面不是exp的位置
(?:exp) 整体匹配 只匹配不想被捕获的时候使用,不能使用 反向引用

var result = 'abbcdefbg'.match(/b+?(?=g)/g); // ['b'] 前面符合正则
var result = 'abbcdefbg'.match(/b+(?!g)/g); // ['bb'] 前面不符合正则

9.标志位 #

/abc/img.test('ABC'); //true
RegExp('abc','img');

/abc/g.global //true
/abc/i.ignoreCase //true
/abc/m.multiline //true
/abc/g.source //true 返回正则的内容
符号 含义
global 匹配所有的情况
ignoreCase 忽略大小写
multiline 跨行匹配

10.RegExp对象方法 #

方法 含义 示例
compile 可以改变正则的内容 var reg = /abc/;reg.compile(‘def’);reg.test(‘def’);//true
exec 用正则匹配字符串获取匹配结果 /abc/.exec(‘abcdef’); // “abc”
test 如果匹配返回true /ab/.test(‘ab’)
toString 返回正则内容 /ab/.toString()

exec

var str = "school school";
var patt = new RegExp("school",'g');
var result;
while ((result = patt.exec(str)) != null)  {
    console.log(result);
    console.log(patt.lastIndex);
}

11.字符串的正则方法 #

方法 含义 示例
search 查找正则匹配对应的索引 ‘abcdefabc’.search(/(abc)\1/)
replace 替换 ‘aabbbcc’.replace(/b+?/); //aa1bbcc
match 匹配 ‘aabbbccbbb’.match(/b+/g) //
split 分割字符串 ‘aabbbcc’.split(/b+/); // [“aa”,”cc”]

match

var path = '/users/:id/:name';
console.log(path.match(/:(\w+)/));
console.log(path.match(/:(\w+)/g));

replace

console.log('/users/:id/:name'.replace(/:\w+/g,'(\\w+)'));

12.扩展阅读 #

~~~~

未经允许不得转载:WEB前端开发 » WEB前端/JS中的正则表达式教程

赞 (0)