怎么做网站的轮播图,企业网站建站 合肥,网页设计免费模板素材,房山成都网站建设JavaScript 中的前瞻断言#xff08;lookahead#xff09;和后瞻断言#xff08;lookbehind#xff09;相信用过的小伙伴就知道它的威力了#xff0c;在一些特定的需求场景下#xff0c;可以做到四两拨千斤的作用#xff0c;今天让我们来盘点一下在 JavaScript 正则表达…JavaScript 中的前瞻断言lookahead和后瞻断言lookbehind相信用过的小伙伴就知道它的威力了在一些特定的需求场景下可以做到四两拨千斤的作用今天让我们来盘点一下在 JavaScript 正则表达式中这两个秘密武器吧。 前瞻断言和后瞻断言在其他语言的正则表达式中也存在这个特性不是 JavaScript 的专属 概念定义
不管是前瞻断言还是后瞻断言最终目的都是寻找在指定的模式pattern下这个指定模式(pattern)下前面或者后面的字符子串 得到的结果永远是这些 前面或者后面的字符子串 而不是这个指定的模式pattern本身 前瞻或后瞻在匹配的时候不会实际匹配和捕获字符只是检查某个位置前后是否符合指定条件并不会改变正则的 lastIndex在检查完之后正则表达式的其他部分继续进行匹配。 前瞻断言 在中文互联网上 lookahead 被翻译成 前瞻断言、先行断言等 前瞻断言是用于在检查后面的子串是否匹配某个模式 前瞻断言包括正向前瞻和负向前瞻断言。
正向前瞻X(?pattern)如果 X 后面的子串符合 pattern模式 就匹配 X。负向前瞻X(?!pattern) 如果 X 后面的子串不符合 pattern模式 就匹配 X。
后瞻断言 在中文互联网上 lookahead 被翻译成 后瞻断言、后行断言等 后瞻断言是用于在检查前面的子串是否匹配某个模式 后瞻断言包括正向后瞻断言和负向后瞻断言。
正向后瞻(?pattern)X匹配 X 前面满足pattern 的子串。负向后瞻(?!pattern)X匹配 X 前面不满足 pattern 的子串。
这里有点需要注意的是 前瞻断言是检查后面的子串是否匹配后瞻断言是检查前面的子串是否匹配。
这个规则感觉就是主打一个叛逆…
直接上代码
前瞻断言
正向前瞻
利用正向前瞻实现金额字符串格式化为带有千分位分隔符的格式。 例如 12345 转化为 12,345 解释一下上述的正则表达式
\B匹配非单词边界。确保逗号不会被添加在开头(?(\d{3})(?!\d))匹配符合右侧有一个或多个三位数字且这些三位数字不是字符串的结尾。 这个正则同时使用了正向前瞻和负向前瞻。刚开始可能比较绕可以看看下面的可视化原理慢慢消化一下 通过上述正则匹配到的结果再使用 replace 方法用来替换为逗号 即可实现金额的千分位
负向前瞻
我们可以用负向前瞻来过滤一些不符合条件的字符子串。例如下面我们需要匹配出不是金额的数字。 /\d\b(?!元)/g 正则语法的意思是 “搜索 字符中的数字但前提是后面没有 元 这个字符”。 \b 是用于匹配一个单词的边界。这里使用 \b 就是为了匹配完整的数字。不然上面的测试用例里面的 15 中 的数字 1 也符合属于数字而且1后面也没有跟 元 这个字符 单词边界指的是在单词字符字母、数字或下划线和非单词字符如空格、标点符号或其他字符之间的位置同时字符串的开头或结尾也存在单词的边界。 后瞻断言
正向后瞻
正向后瞻是如果当前匹配项前面有特定的匹配子串的话当前匹配项就会被匹配否则就跳过。 这里匹配 $ 后面的金额 我们可以用正向后瞻断言去匹配出来。只有这个数字前面的内容满足 $ 就会匹配上并返回到最终的结果中去。 负向后瞻
如果你刚看完上面的正向后瞻的示例代码此时你想在上面的基础上只匹配金额前面只有一个$ 的 这时候我们就可以用负向后瞻去做进一步约束。 这里使用 负向后瞻并不是最优解这里只是为了做代码演示构造的场景。 可以从可视化正则里面看出负向后瞻就是只要当前匹配项前面不是 $$的时候才进行匹配所以 $$34 就会被忽略掉
不过为了应用这个例子我这里是故意这样处理的实际上为了满足只匹配一个 $ 的金额数字的话我们可以直接在上面的 正则加上 \s 即可 即 /(?\s\$)\d/g
兼容性
前瞻断言的兼容性是最好的基本上是全绿的状态直接无脑冲就行了。 当我查caniuse 的时候有被震惊到第一次遇到这种兼容性这么好特性。要是前端所有的标准属性有这兼容性就好了好了有点扯远了哈。 后瞻断言的兼容性差一些除了在 Safari 浏览器中兼容性稍微差点其他的都支持度很不错。 小结
相信通过上面的介绍你已经掌握了使用 前瞻断言和后瞻断言的精髓了相信我使用它可以让你写正则的速度嗖嗖的下班早早的。
如果这篇文章对你有帮助欢迎点赞、关注➕、转发 ✔
