本文介绍了JavaScript中的正则表达式基础，特别是位置匹配的概念，如^、$、、B以及正向和负向先行断言、后行断言。通过实例解析了如何使用这些匹配方式，包括数字千位分隔符的实现和提取HTML标签内文本的方法。
JS正则表达式-基础(三)
1.位置匹配
位置是相邻字符之间的位置，可以理解成空字符 “”。比如，下图中箭头所指的地方
“hello” == “” + “h” + “” + “e” + “” + “l” + “” + “l” + “” + “o” + “”
如何匹配位置呢？
在 ES5 中，共有 6 个锚： ^、$、\b、\B、(?=p)、(?!p)
其中 (?=p) 和 (?!p)
二者的学名分别是 positive lookahead 和 negative lookahead。
中文翻译分别是正向先行断言和负向先行断言。
ES5 之后的版本，会支持 positive lookbehind 和 negative lookbehind。
具体是 (?<=p) 和 (?<!P)
①^、$解释
^（脱字符）匹配开头，在多行匹配中匹配行开头。
$（美元符号）匹配结尾，在多行匹配中匹配行结尾。
②\b、\B解释
\b 是单词边界，具体就是 \w 与 \W 之间的位置，也包括 \w 与 ^ 之间的位置，和 \w 与 $ 之间的位置。
举个例子：
var result = "<html> title_01.html <html>".replace(/\b/g, '#');
console.log(result);
// => "<#html#> #title_01#.#html# <#html#>"
我们知道，\w 是字符组 [0-9a-zA-Z_] :的简写形式，即 \w 是字母数字或者下划线的中任何一个字 符。而 \W 是排除字符组 [^0-9a-zA-Z_] 的简写形式，即 \W 是 \w 以外的任何一个字符。
所以在两个交接处替换为了#
③ (?=p)，(?!p)，(?<=p)，(?<!p)的解释
首先是(?=p),它匹配p之前的位置
举个例子：
var result = "xxxxpxxxx".replace(/(?=p)/g, '#');
console.log(result);
// => "xxxx#pxxxx"
可以看到，p之前的位置被#号所替换
而(?!p)是(?=p)的反面意思
再举个例子：
var result = "xxxxpxxxx".replace(/(?!p)/g, '#');
console.log(result);
// => "#x#x#x#xp#x#x#x#x#"
这里可以看到除了p之前的位置，其他位置都被 #号所替换
接下来就是(?<=p)，(?<!p)
很好理解，这里(?<=p)其实就是(?=p)相反意思。
(?=p)是取p之前的那个空位嘛，(?<=p)就是取p之后的那个空位
举个例子:
var result = "xxxxpxxxx".replace(/(?<=p)/g, '#');
console.log(result);
// => "xxxxp#xxxx"
同理。(?<!p)其实就是(?!p)相反意思。
(?!p)是取除了p之前位置的所有空位嘛，(?<!p)就是取除了p之后位置的其他所有空位
举个例子:
var result = "xxxxpxxxx".replace(/(?<!p)/g, '#');
console.log(result);
// => "#x#x#x#x#px#x#x#x#"
2.位置的特性
之前不是说过，位置就是字符之间的空字符串嘛。
"hello" == "" + "h" + "" + "e" + "" + "l" + "" + "l" + "" + "o" + "";
也等价于：
"hello" == "" + "" + "hello"
因此，把 /^hello$/ 写成 /^^hello$$$/，是没有任何问题的：
也就是说字符之间的位置，可以写成多个。
3.作用与案例
那这些(?=p)，(?!p)，(?<=p)，(?<!p)有什么作用呢？
首先是两个(?=p)，(?!p)
数字的千位分隔符表示法：
比如把 “12345678”，变成 “12,345,678”。
var result = "12345678".replace(/(?!^)(?=\d{3}+$)/g, ',')
console.log(result);
// => "12,345,678"
这里的
+号表示至少出现一次，不要理解成拼接
其次是(?<=p)，(?<!p)
取两个匹配值之间的内容：
比如我想提取出<title>tragedy<title>的字符
这时候该怎么办呢？
传统的提取方法
var reg = "/<title>(.*?)</title>/g"
// 输出:<title>tragedy</title>
但我只想要title标签里的内容，这时候就可以用到(?<=p)，(?=p)
一个是之后，一个是之前。形成一个闭环
var reg = "/(?<=<title>)(.*?)(?=</title>)/g"
// 输出：tragedy
至于(?<!P)大家可以自由探索，通常是配合使用的
参考文档：JS正则表达式迷你书 第1版
想了解更多 ==> 个人博客：Couno’Blog
扫一扫
809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
