首页 > web前端 > js教程 > 深入理解JS正则表达式之预定义类与边界的解析

深入理解JS正则表达式之预定义类与边界的解析

不言
发布: 2018-07-11 09:37:45
原创
1890 人浏览过

这篇文章主要介绍了关于深入理解JS正则表达式之预定义类与边界的解析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

预定义类

正则表达式提供预定义类来匹配常见的字符类

字符 等价类 含义
. [^rn] 除了回车符和换行符以外的所有字符
d [0-9] 数字字符
D [^0-9] 非数字字符
s [tnx0Bfr] 空白符
S [^tnx0Bfr] 非空白符
w [a-zA-Z_0-9] 单词字符(字母、数字、下划线)
W [^a-zA-Z_0-9] 非单词字符

使用预定义类可以快速匹配目标,如:匹配一个ab 数字 任意字符,使用字符类、范围类需要书写大量的代码,而使用预定义类只需要这样写:

/ab\d/
登录后复制

边界

正则表达式还提供了几个常用的边界匹配字符

字符含义
^以xxx开始
$以xxx结束
b单词边界
B非单词边界

当我们只想匹配一段话中中的部分单词而不是单词中的字母时,边界往往很有用

单词边界与非单词边界

有时,我想匹配一句话中的is单词,而不想匹配在单词中的is字母,此时,使用单词边界可以轻松解决这个问题:

let text = 'This is a boy'

let reg1 = /is/g

let reg2 = /\bis\b/g

text.replace(reg1, 'IS')    // 没有使用单词边界\b区分,结果为:ThIS IS a boy

text.replace(reg2, 'IS')    // 使用了单词边界进行区分,结果为:This IS a boy
登录后复制

而当我只想匹配作为单词结尾的is时,该怎么办?此时可以机智的混用单词边界与非单词边界:

let text = 'This is a boy'

let reg3 = /\Bis\b/g

text.replace(reg3, 'IS')    // ThIS is a boy
登录后复制

^ 和 $ —— 开始与结尾

很多使用,我们会想匹配开头或结尾的字符,使用^$可以完美的解决这个问题:

let text = '@123@abc@'

let reg1 = /@/g

text2.replace(reg1, 'Q')    // 没有使用^和$,匹配了所有的@,结果为:Q123QabcQ

let reg2 = /^@/g

text.replace(reg2, 'Q')     // 使用^匹配开头的@,结果为:Q123@abc@

let reg3 = /@$/g

text.replace(reg3, 'Q')     // 使用$匹配结尾的@,结果为:@123@abcQ
登录后复制

tips:实际使用中^需要写在匹配项的前方,而$需要卸载匹配项的后方

在多行的情况下使用^和$

在多行的情况下,使用m进入多行模式才能匹配到每行的开头和结尾匹配字符:

let text = '@123\n@456\n@789'

let reg1 = /^@\d/g

text.replace(reg1, 'Q')      
/*
    由于换行实际上只是一个换行符字符,在正常模式下,依然看做一段字符
    结果为:
    Q23
    @456
    @789
*/

let reg2 = /^@\d/gm

text.replace(reg2, 'Q')
/*
    添加了m进入多行模式:
    结果为:
    Q23
    Q56
    Q89
*/
登录后复制

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网! 

 相关推荐:

深入理解JS正则表达式之范围类的解析

深入理解JS正则表达式之元字符和字符类的解析

以上是深入理解JS正则表达式之预定义类与边界的解析的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板