JavaScript正则表达式的坑很深
Javascript的正则表达式,不能不说方便,简简单单“//”就可以声明一个RegExp对象,配合编辑器的颜色渲染,实在让人舒心。但过于方便的东西,必然也会有一些瑕疵需要我们去注意。
首先要说的是使用RegExp对象来声明正则,因为他是除了eval之外,唯一能将字符串转化为正则对象的方法。但在使用的时候,如果你长时间没写JavaScript,那么很容易将他的参数和上面的“//”混淆。使用RegExp需要注意两点:1、第一个参数只能是正则的内容,并且不包含起始和结束符“/”,修饰符应写在第二个参数里;2、正则表达式的内容需要使用“\”转义的,必须考虑到字符串的转义字符也是“\”,然后……你懂的,代码就显得不那么优美了。
考虑到工作的需要,可以封装一个函数,快速将字符串的正则通过RegExp转化为正则表达式对象。
再来说说'g'修饰符给我们挖的深坑:
为了优化JavaScript的性能,在编码过程中,一般都会对反复使用的RegExp对象进行缓存。而有时候,为了代码整体性的美观(例如:同时使用到test和replace,并且replace必须要加“g”修饰符的时候,为了不重写正则,同时减少缓存的变量),一些调用test的正则表达式也会加上“g”修饰符,然后问题就出现了:
在Chrome中尝试运行如下代码
PS:后面的三代码,是针对错误的三种解决方案
究其原因,还是lastIndex这个参数导致的。由于`g`修饰符会触发RegExp对象使用lastIndex变量缓存上一次匹配成功的位置,而这一属性与字符串参数无关。中途更换字符串不能触发重置lastIndex的操作,只有匹配失败之后,才会重置。
感谢1楼 Suprise 给出的解答
JavaScript正则表达式的坑很深的更多相关文章
- javascript正则表达式入门先了解这些
前言 此内容由学习<JavaScript正则表达式迷你书(1.1版)>整理而来(于2020年3月30日看完).此外还参考了MDN上关于Regex和String的相关内容,还有ECMAScr ...
- JavaScript正则表达式,你真的知道?
一.前言 粗浅的编写正则表达式,是造成性能瓶颈的主要原因.如下: var reg1 = /(A+A+)+B/; var reg2 = /AA+B/; 上述两个正则表达式,匹配效果是一样的,但是,效率就 ...
- 理清JavaScript正则表达式--上篇
在JavaScript中,正则表达式由RegExp对象表示.RegExp对象呢,又可以通过直接量和构造函数RegExp两种方式创建,分别如下: //直接量 var re = /pattern/[g | ...
- 理清JavaScript正则表达式--下篇
紧接:"理清JavaScript正则表达式--上篇". 正则在String类中的应用 类String支持四种利用正则表达式的方法.分别是search.replace.match和s ...
- JavaScript正则表达式详解(一)正则表达式入门
JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...
- JavaScript正则表达式下——相关方法
上篇博客JavaScript 正则表达式上——基本语法介绍了JavaScript正则表达式的语法,有了这些基本知识,可以看看正则表达式在JavaScript的应用了,在一切开始之前,看看RegExp实 ...
- JavaScript 正则表达式上——基本语法
定义 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数 var reg=new RegExp('<%[^%>]+%&g ...
- javascript正则表达式(一)——语法
前言 js中类RegExp类表示正则表达式,具有强大的模式匹配.文本检索和替换功能.正则表达式的模式规则是由一个字符序列组成,包括所有字母和数字在内,大多数的字符都是按照直接量匹配字符,某些特殊字符并 ...
- 5分钟教你学会JavaScript正则表达式
正则表达式在实际开发过程中和技术面试过程中的重要性不言而喻,本文仅仅只是教你如何在几分钟之类学会正则表达式,对于它的原理及运行机制不做介绍. 第一:什么是正则 正则表达式是一种用来描述一定数量文本的模 ...
随机推荐
- 【百度地图API】圣诞节里不会迷路的麋鹿——驾车导航
原文:[百度地图API]圣诞节里不会迷路的麋鹿--驾车导航 任务描述: 可能大家还不知道,圣诞老人是爱迷路的老爷爷! 今年圣诞节又要到了,圣诞老人又要出来送礼物了.可是,他灰常的迷路呢! 还好,他有一 ...
- [WPF]程序全屏
原文:[WPF]程序全屏 代码: 使用:
- 代理模式与Android
代理模式(Proxy) 一. 什么是代理模式 先来看看官方的说法,代理模式就是为其它对象提供一种代理,以控制对这个对象的訪问. 看来这个官方的说法的确有点官方,看了还是让人感觉不点不知所措,还是不 ...
- MVC5+EF6 入门
MVC5+EF6 入门完整教程九 前一阵子临时有事,这篇文章发布间隔比较长,我们先回顾下之前的内容,每篇文章用一句话总结重点. 文章一 MVC核心概念简介,一个基本MVC项目结构 文章二 通过开发 ...
- CKPlayer从Cookie里读取上次播放记录的一个demo
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- [连载]Java程序设计(04)---任务驱动的方法:工资结算系统
任务:或在公司,该公司将其分为三类人员:部门经理.销售员.在发工资的时候,部门经理拿固定月薪8000元.技术人员按每小时100元领取月薪.销售人员依照500元底薪加当月销售额的4%进行提成.设计并实现 ...
- linux内核的冒险md来源释义# 14raid5非条块读
linux内核的冒险md来源释义# 14raid5非条块读 转载请注明出处:http://blog.csdn.net/liumangxiong 假设是非条块内读.那么就至少涉及到两个条块的读,这就须要 ...
- location将地址栏参数拆分成键值对的对象
window.location可获取地址栏的一系列信息,并且每个浏览器都支持该属性,非常方便.而获取到的问号后面的参数可以进行加工转变成我们所想要的键值对. location的属性: 属性名 例子 说 ...
- three.js 源代码凝视(七)Math/Euler.js
商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 - 本博客专注于 敏捷开发 ...
- jQuery无限级联下拉框插件
自己编写jQuery插件 之 无限级联下拉框 因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉 ...