JavaScript的exec()和search()方法

本文简单介绍了正则表达式的元字符,和 JavaScript 提供的两个和正则表达式有关的方法:RegExp.prototype.exec()String.prototype.replace()

正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。

正则表达式为了描述一个规则,往往需要用到大量的元字符,这些元字符要记下来并灵活运用,需要耗费很多的精力,而一般实际开发中却很少用到正则表达式。此外为了保证复杂正则表达式是符合需求的,需要进行大量的字符串测试。所以这也是遇到需要用到复杂正则表达式实现的需求时,程序员表示非常难受(awsl)的原因。

尽管可能会用得比较少,但在某些场景下,使用正则表达式是最好的选择,而且面试也可能会问到,所以还是要好好掌握一些比较基本的用法的。

正则表达式的元字符

因为不是本文的重点,而且知识点过多,这里只会 简单描述一部分的元字符。如果你想系统地学习,可以阅读文末提供的参考资料。

字符 含义
\ 转义字符
^ 匹配输入开始
$ 匹配输入结束
* 匹配前一个表达式 0到多次。等价于{0,}
+ 匹配前一个表达式 1到多次。等价于{1,}
? 匹配前一饿表达式 0或1次。等价于{0,1}
. 匹配换行符外的任何单字符
(reg) 捕获组,会捕获括号里面的匹配项 reg。
(?:reg) 匹配 'reg' 但不捕获匹配项。当我们需要将一段表达式作为一个整体,但又不想它被捕获的时候,就可以这样写。比如 (?:ab)+
x(?=y) 专业术语为 “先行断言”。当 x 后面有 y 时,才匹配 x。匹配的子串将不会包含 y。
(?<=x)y “后行断言”,和上一条同理。
x(?!y) “正向否定查找”。匹配一个 x 后面没有 y 的 x
x|y 匹配 x 或 y
{n} 匹配前面一个字符(也可以是圆括号围起来的一个子串) n 次,n必须为正整数。
{n, m} 匹配前面的字符 n - m 次。m 可以省略,表示匹配 n 次或更多。m 必须 大于或等于 n。如果 n 为 0,就是匹配前面字符0次,相当于这个子串被忽略。
[xyz] 字符集合。匹配方括号内的任意字符。我们也可以通过 - 来指定字符范围,比如 [a-d] 等价于 [abcd],[1-4] 等价于 [1234],[\u4e00-\u9fa5] 则是匹配一个汉字。.* 在方括号内没有特殊含义,不需要进行转义。
[\xyz] 匹配没有包含在方括号里任何字符的字符。
[\b] 匹配一个退格符
\b 匹配一个词的边界,匹配位于边界的单词字符。。\b 并不能匹配一个字符。如 \bm 可以匹配 moonoo\b 不能匹配 moon。
\B 匹配非单词边界。如 \Boo 匹配 'noonday' 的 oo。
\d 匹配一个数字,等价于 [0-9]
\D 匹配非数字。一般大写表示对应小写的特殊字符的反面。
\s 匹配空白符
\S 匹配非空白符
\w 匹配一个单字符(字母、数字或下划线),等同于 [A-Za-z0-9_],注意这个是匹配不了汉字的。
\W 与 \w 相反
\count 这里的 count 代指一个正整数,等同于第n个子捕获匹配的子字符串(捕获的数目以左括号计数)。这个其实挺有趣的。如 /a(b)(c)d\2\1/ 等同于 /a(b)(c)dcb/
分支条件

正则表达式默认使用 贪婪匹配,即匹配尽可能多的字符。但有时候我们希望可以匹配尽可能少的字符,即 懒惰匹配,我们可以在限定符(*、+、?、{n,m}这些指定重复数量的特殊字符)的后面添加 ? 表示。如 a*? 表示匹配 a 重复任意次,但尽可能少。

使用复杂的正则表达式会遇到的问题是,无法保证写出的正则表达式是适用于所有对应的情况,这就需要我们做足够多的测试。此外,正则表达式不是很好理解,需要做一些注释才能直到它做了什么事,一些语言允许在正则表达式使用注释语法,但 js 并不支持。

如果是新手,建议使用 RegExp.prototype.exec() 方法一个个进行测试来加深理解。

ES6 中,正则表达式的功能得到了加强,并提供了更多的方法,本文不会讨论这些新方法。

标志符

  • g:全局搜索。可以进行多次正则匹配,而不是在发现第一个匹配项时立即停止。
  • i:忽略大小写
  • m:多行搜索
  • y:粘连修饰符。除了第一次匹配,剩余的字符串必须从头开始匹配。ES6 新增的标志符
  • u:Unicode模式,可以处理四个字节的 UTF-16 编码。ES6 新增的标志符

使用到正则表达式的 javaScript 原生方法

方法 描述
exec 一个在字符串中执行查找匹配的RegExp方法,它返回一个数组(未匹配到则返回null)。
test 一个在字符串中测试是否匹配的RegExp方法,它返回true或false。
match 一个在字符串中执行查找匹配的String方法,它返回一个数组或者在未匹配到时返回null。
search 一个在字符串中测试匹配的String方法,它返回匹配到的位置索引,或者在失败时返回-1。
replace 一个在字符串中执行查找匹配的String方法,并且使用替换字符串替换掉匹配到的子字符串。
split 一个使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的String方法。

这些方法为 String 或 RegExp 对象的方法。

RegExp.prototype.exec()

正则表达式的 exec() 方法,是为 捕获组 而设计的。

const pattern = /a(bc(1))(de)/g
const text = `-abc1de-`;
const matches = pattern.exec(text);

exec() 方法如果匹配成功,会返回一个 数组。这个数组除了数字索引外,还有一些其他的属性。如果匹配失败,会返回 null。

  • matches[n],n为索引值。matches[0] 是与整个模式匹配的字符串。如果模式中有捕获组(圆括号括起来的),matches[1] 到 matches[len-1] 为捕获组匹配到的字符串。如果捕获组有嵌套的情况,顺序为深度优先遍历的顺序。
  • input:该属性为被传入的字符串,等于 text。
  • index:整个模式匹配的字符串位于传入字符串的位置,等同于 text.indexOf(matches[0])
  • groups:具名组对象。ES2018 引入了 具名组匹配,支持如 /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/, 匹配成功后, matches.groups.year 的值就是 matches[1]。

如果正则表达式带上了 g 标志,每一次执行 exec() 方法,pattern(RegExp 对象) 的 lastIndex 都会变化,如果匹配成功,为匹配字符串的后一个索引位置。这个 lastIndex 指定了输入字符串的匹配起始值。刚创建的 RegExp 对象的 lastIndex 为 0,你可以对其进行修改。如果没有匹配到,lastIndex 会被设置为 0。

String.prototype.replace

replace() 方法返回一个由替换值(replacement)替换一些或所有匹配的模式(pattern)后的新字符串。

str.replace(regexp|substr, newSubStr|function)

第一个参数可以是字符串或正则表达式,如果提供的是字符串,只会替换第一个子字符串。如果想替换所有子字符串,需要提供一个指定了 g 的正则表达式。

第二个参数可以是字符串或函数。

如果是字符串,可以使用一些特殊的 字符序列

字符序列 替换文本
$$ $(用于转义)
$& 匹配整个模式的子串,与 RegExp.lastMatch(非标准特性) 的值相等。
$` 当前匹配的子串 左边 的内容,与RepExp.leftContext(非标准属性,请勿在生产环境中使用) 的值相同。
$' 当前匹配的子串 右边 的内容,与 RegExp.rightContentx(非标准属性) 的值相同。
$n 这里 n 取值为 1 - 99。位数只有1个的话,可以加上前导零,如 $04 等同于 $4$n 其实等价于 RegExp.prototype.exec() 返回的数组,但不同点在于, $0 是无效的,得使用 $&。n 超出了捕获组的索引范围,会替换为 "$n"(即失去特殊转换的效果)。

下面的写法,可以交换两个单词的位置。

'bar foo'.replace( /(...) (...)/, '$2 $1' )
// -> 'foo bar'

如果第二个参数也可以是函数,这个函数接收多个参数:

function (match[,p1, p2, ..., pn], offset, string)
  • match:匹配的子串,等同于前面提到的 $&
  • p1-p2:为捕获组对应的匹配字符串(如果设置了捕获组)。
  • offset:模式匹配项位于输入字符串的位置
  • string:输入的原始字符串。
  • 函数的返回值:返回值即为替换的文本。

我们可以用它来实现 简单的模版引擎(只能替换文本):

const pattern = /\{\{\s*(.*?)\s*\}\}/g,
const data = {
    name: '李田所',
    age: 24,
    job: '学生'
}
const text = `我是{{name}},今年{{ age }}岁,是个{{ job}}。`;


const renderResult = text.replace(pattern, function(match, p1, offset, string) {
    return data[p1]
})
console.log(renderResult)
// -> 我是李田所,今年24岁,是个学生。

参考

  1. 正则表达式30分钟入门教程
  2. 正则表达式 - MDN
  3. Array - MDN
  4. ES6入门
  5. RegExp.prototype.exec() - MDN
  6. String.prototype.replace() - MDN
  7. 废弃和过时的JavaScript特性
  8. 浅谈模板引擎
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,504评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,434评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,089评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,378评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,472评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,506评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,519评论 3 413
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,292评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,738评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,022评论 2 329
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,194评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,873评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,536评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,162评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,413评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,075评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,080评论 2 352

推荐阅读更多精彩内容