首先,javascript中涉及到正则表达式的函数总共有6个,可分为两种:

1、第一种是作为字符串对象的方法,即以

String.fun();

形式调用,这里包括 split、search、match、replace 这四个函数。

2、第二种是作为正则表达式对象的方法,即以

RegExp.fun();

形式调用,这里包括 exec、test 这两个函数。

我们知道,正则表达式从结构上划分的话可以简单的划分为三部分:分隔符、表达式 和 标志符。

如正则表达式

/^abc$/is

中,前后两个斜杠就是分隔符,分隔符中间的内容为表达式,第二个分隔符后的is就是标志符。

本文重点讨论g标志符在js的几个正则表达式相关函数中的作用。g标志符是正则表达式标志符中点击率较高的一个标志符,其作用为让该正则表达式进行全局匹配。

什么时候该进行全局匹配,什么时候不该进行全局匹配,哪些函数支持全局匹配标志g,哪些函数又不支持?手册上没有清楚的讲述这些琐碎的知识点,那就动手写测试代码,让程序说话。

1)split:将一个字符串分割为子字符串,然后将结果作为字符串数组返回。

<script>
var p = /ab/,
pg = /ab/g,
str = 'abcabcabc'; // split 函数
var a = str.split(p);
console.log(a); // ['','c','c','c']
console.log(p.lastIndex); //
var ag = str.split(pg);
console.log(ag); // ['','c','c','c']
console.log(pg.lastIndex); //
</script>

可以看到使用g标志和不使用g标志的结果一模一样,所以可以认为g标志在split函数中是无意义的。

2)search:返回与正则表达式查找内容匹配的第一个子字符串的位置。

<script>
var p = /ab/,
pg = /ab/g,
str = 'abcabcabc'; // search 函数
a = str.search(p);
console.log(a); // 0,'ab'字符串第一次出现的位置
console.log(p.lastIndex); //
ag = str.search(pg);
console.log(ag); // 0,'ab'字符串第一次出现的位置
console.log(pg.lastIndex); //
</script>

可以看到使用g标志和不使用g标志的结果一模一样,所以可以认为g标志在search函数中是无意义的。

3)match:使用正则表达式模式对字符串执行查找,并将包含查找的结果作为数组返回。

<script>
var p = /ab/,
pg = /ab/g,
str = 'abcabcabc'; // match 函数
a = str.match(p);
console.log(a); // ['ab'],如果没有设置全局标志g,数组的0元素包含整个匹配,而第 1 到 n 元素包含了匹配中曾出现过的任一个子匹配。
console.log(p.lastIndex); //
ag = str.match(pg);
console.log(ag); // ["ab", "ab", "ab"],这块手册上说的很清楚,当正则含有g标志时,全局查找,结果数组的元素0到n中包含所有匹配。
console.log(pg.lastIndex); //
</script>

可以看到对于match函数,使用g标志和不使用g标志差别很大。好在手册中对其说明也比较详细。

4)replace:返回根据正则表达式进行文字替换后的字符串的复制。

<script>
var p = /ab/,
pg = /ab/g,
str = 'abcabcabc'; // replace 函数
a = str.replace(p,'#');
console.log(a); // #cabcabc
console.log(p.lastIndex); //
ag = str.replace(pg,'#');
console.log(ag); // #c#c#c
console.log(pg.lastIndex); //
</script>

可以看到有g标志跟没g标志的结果完全不同,没有g标志的情况下只替换第一个匹配项。

5)exec:用正则表达式模式在字符串中运行查找,并返回包含该查找结果的一个数组。

<script>
var p = /ab/,
pg = /ab/g,
str = 'abcabcabc'; // exec 函数
a = p.exec(str);
console.log(a); // ['ab']
console.log(p.lastIndex); //
ag = pg.exec(str);
console.log(ag); // ['ab']
console.log(pg.lastIndex); //
</script>

exec函数手册上也说的很清楚,如果为正则表达式设置了全局标志,exec 从以 lastIndex 的值指示的位置开始查找。如果没有设置全局标志,exec 忽略 lastIndex 的值,从字符串的起始位置开始搜索。每次查找返回一个数组,数组元素除了0,1,2 ...外还包含3个属性 input、index 和 lastIndex。Input 属性包含了整个被查找的字符串。Index 属性中包含了整个被查找字符串中被匹配的子字符串的位置。LastIndex 属性中包含了匹配中最后一个字符的下一个位置。

6)test:返回一个 Boolean 值,它指出在被查找的字符串中是否存在模式。

<script>
var p = /ab/,
pg = /ab/g,
str = 'abcabcabc'; // test 函数
a = p.test(str);
console.log(a); // true
console.log(p.lastIndex); //
ag = pg.test(str);
console.log(ag); // true
console.log(pg.lastIndex); //
</script>

test函数在有g标志时查找从正则表达式对象的lastIndex属性值(此例中该处为0)开始查找,找到一个匹配的串以后更新lastIndex属性值,如果查找完整个串都没找到匹配项,设置lastIndex属性值为0。

综上,可以看出,六个函数中只有split和search使用或者不使用g标志结果都一样。而其他四个函数都有影响,其中test函数影响最小,只是影响lastIndex属性的值,但这点正好会导致一些很难察觉的问题,比如

<script>
var pg = /ab/g,
str = 'abc'; a = pg.test(str);
console.log(a); // true
a = pg.test(str);
console.log(a); // false </script>

同样的代码第一次结果为true,第二次结果为false,原因就是g标志改变了lastIndesx属性的值,而带g标志的test查找时又依靠lastIndex。

好了,就这些了,有总结的不对的地方,还请指正。

js中几个正则表达式相关函数使用时g标志的作用的更多相关文章

  1. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

  2. [JavaScript] js中全局标识正则表达式的lastIndex属性

    在JavaScript中使用正则表达式时,遇到一个坑:第一次匹配是true,第二次匹配是false. 因为在带全局标识"g"的正则表达式对象中,才有“lastIndex” 属性,该 ...

  3. js中常用的正则表达式

    我一般对正则的使用方式如下,该方法会返回一个boolean值,然后对这个返回值来进行判断 // 判断是否是整数 function isInt(num) { var reg = new RegExp(& ...

  4. js中字符串支持正则表达式的方法

    设一个字符串var myName = "fangming";则支持正则表达式的方法有:split(分割),replace(替换),search(查找),match(元素参数的数组) ...

  5. js 中常用的正则表达式

    主要有以下几种: 匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了哦 获取日期正则表达式:\d{4}[年|\-|\.]\d{1,2}[ ...

  6. js中常用的正则表达式总结

    去除所有空格: str = str.replace(/\s+/g,""); 去除两头空格: str = str.replace(/^\s+|\s+$/g,"") ...

  7. RegExp正则表达式(三)–js中正则表达式的定义

    在js中,RegExp正则表达式的定义有两种方式:一种是普通方式,另一种是构造函数方式.无论是那种定义正则表达式的方式,它们都会返回RegExp对象. 普通方式定义正则表达式的格式 语法: var 变 ...

  8. 二、js中基础知识

    该篇文章主要是强化一下自己javaScript的基础,让写代码变得更轻松些.基础好的请忽略.    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解 ...

  9. 小结JS中的OOP(中)

    此篇文章主要是提炼<JavaScript高级程序设计>中第六章的一些内容. 一:JS中OOP相关的概念 开始之前先总结JS中OOP相关的一些概念: 构造函数:JS中的构造函数就是普通的函数 ...

随机推荐

  1. ios中三种多线程的技术对比

    1.NSThread 使用较少 在NSThread调用的方法中,同样要使用autoreleasepool进行内存管理,否则容易出现内存泄露. 使用流程:创建线程-->启动线程 2.NSOpera ...

  2. 用Swift重写公司OC项目(Day2)--创建OC与Swift的桥接文件,进而调用OC类库

    昨天把项目中的图标以及启动转场图片弄好了,那么今天,我们可以开始慢慢进入到程序的编写当中了. 由于swift较新,所以类库还不够完善,但是不用担心,苹果早就出了解决方案,那就是使用桥接文件,通过桥接文 ...

  3. iOS耳机操作

    iOS在7之后增加的麦克风权限的申请,代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 AVAudioSession *avSession = [AVAudioSession shar ...

  4. AppDelegate中的方法解析

    // 当应用程序启动完毕的时候就会调用(系统自动调用) -(BOOL)application:(UIApplication *)application didFinishLaunchingWithOp ...

  5. Teamwork——Week4 团队项目之NABC

    项目框架——NABC模型 一.N(Need需求) 我们组主要的用户对象是第三小组——UI小组的同学们,因此我们的用户需求就是他们的数据需求. 1)提供给UI小组整理好的数据库,和前一组讨论好数据结构. ...

  6. jQuery图片无缝轮播插件;

    图片轮播这种效果在web开发中看常见,网上的插件也有很多,最近在整理项目的过程中,把之前的图片轮播效果整合了一下,整理成一个可调用的插件以做记录,也方便更多前端爱好者来学习使用:图片的轮播原理很简单, ...

  7. strlen和mb_strlen区别

    转自:http://blog.sina.com.cn/s/blog_5f0d5bd90100mzcl.html <?php//测试时文件的编码方式要是UTF8$str='中文a字1符';echo ...

  8. 揭开NodeJS的神秘面纱!

    一.NodeJS是什么? Node是一个服务器端JavaScript解释器.Node.js是一套用来编写高性能网络服务器的JavaScript包. 二.Node的目标是什么? Node 公开宣称的目标 ...

  9. android listview和button,ImageButton等有事件的控件的总结

    public ImageButton(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defSty ...

  10. 【Exception】 java.lang.NoSuchMethodError: android.app.AlertDialog$Builder.setOnDismissListener

    f(Build.VERSION.SDK_INT >10) builder =newAlertDialog.Builder(getActivity(), R.style.Theme.Sherloc ...