归纳包含以下内容： 正则表达式简介、工具使用、RegExp对象、元字符、字符类、范围类、JS预定义类、量词、JS正则的贪婪模式和非贪婪模式、分组、前瞻、JS对象属性、test和exec方法、字符串对象方法

JS-RegExp
JS-RegExp

正则表达式简介

Regular Expression，即正则表达式。使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。

工具使用

在线显示正则表达式的图形工具:   regexper官网

以下为Sublime使用的三种演示：

首先，在sublime中，使用快捷键ctrl+h打开replace窗口，再点击“*”，这样就可以在Sublime的输入框中输入正则表达式来查找字段

Sublime输入框
Sublime输入框
  • 将is这个单词替换成IS

待处理字段：

1
2
//将is这个单词替换成IS
this is a boy

在输入框中输入：

Sublime输入框
Sublime输入框

正则表达式图形表示：

Regexper图示
Regexper图示

成功处理字段：

1
2
3
//test.txt
//将is这个单词替换成IS
this IS a boy
  • 去掉含有jpg后缀的http地址中的http://

待处理字段：

1
2
3
4
//去掉含有jpg后缀的http地址中的http://
http://www.baidu.com/abc.jpg
http://www.baidu.com/abc.png
https://www.baidu.com/abc.jpg

在输入框中输入：

Sublime输入框
Sublime输入框

正则表达式图形表示：

Regexper图示
Regexper图示

备注：
注意符号/要使用\来转义，即\/
. 表示any character，任意字符
+表示不限量
()内是第一个分组

成功处理字段：

1
2
3
4
//去掉含有jpg后缀的http地址中的http://
www.baidu.com/abc.jpg
http://www.baidu.com/abc.png
https://www.baidu.com/abc.jpg
  • 日期替换，将日期格式如2013-01-13替换成01-13-2013

待处理字段：

1
2
3
4
//日期替换，将日期格式如2013-01-13替换成01-13-2013
2014-11-12
2015/04/06
23771/34/22

在输入框中输入：

Sublime输入框
Sublime输入框

正则表达式图形表示：

Regexper图示
Regexper图示

成功处理字段：

1
2
3
4
//日期替换，将日期格式如2013-01-13替换成01-13-2013
11-2014-12
04-2015-06
23771/34/22

RegExp对象

有两种方法实例化RegExp对象，即字面量和构造函数。

  • 字面量
1
2
var reg=/\bis\b/g;
'He is a boy.This is a dog'.replace(reg,'IS');

JSBin图示

  • 构造函数
1
2
var reg=new RegExp('\\bis\\b','g');
'He is a boy.This is a dog'.replace(reg,'IS');

备注： \要转义

JSBin图示
JSBin图示

元字符

正则表达式由两种基本字符类型组成：

  • 原意文本字符
  • 元字符

元字符是在正则表达式中有特殊含义的非字母字符：*+?$^.|(){}[]

字符 含义
\t 水平制表符
\v 垂直制表符
\n 换行符
\r 回车符
\0 空字符
\f 换页符
\cX 与X对应的控制字符（Ctrl+X）

字符类

  • 一般情况下正则表达式一个字符对应字符串一个字符
    例如：表达式ab\t的含义是
    Regexper图示
    Regexper图示
  • 我们可以使用元字符[]来构建一个简单的类
    所谓类是指符合某些特性的对象，一个泛指，而不是特指某个字符
    表达式[abc]，即把字符a或b或c归为一类，表达式可以匹配这类的字符
    字符类取反：[^abc]
    JSBin图示
    JSBin图示

范围类

  • [a-z]，闭区间
  • [a-zA-Z]，可连写
    JSBin图示
    JSBin图示

JS预定义类

  • 预定类
字符 等价类 含义
. [^\r\n] 除了回车符和换行符之外的所有字符
\d [0-9] 数字字符
\D [^0-9] 非数字字符
\s [\t\v\f\r\n] 空白符
\S [^\t\v\f\r\n] 非空白符
\w [a-zA-Z_0-9] 单词字符（字母、数字下划线）
\W [^a-zA-Z_0-9] 非单词字符

备注：空白符为[ \t\n\x0B\f\r]，空字符为\0，\0代表查找NULL字符
验证：

JSBin控制台
JSBin控制台
  • 边界
字符 含义
^ 以xxx开始
$ 以xxx结束
\b 单词边界
\B 非单词边界

举例：

  • \b，\B的使用

    JSBin图示
    JSBin图示

  • ^$的使用

    JSBin图示
    JSBin图示

  • 多行匹配，/m影响的是^$的分割方式

    JSBin图示
    JSBin图示

量词

字符 含义
? 0次或1次（最多一次）
+ 1次或1次以上（至少一次）
* 0次或多次 (任意次)
{n} 出现n次
{n,m} 出现n次到m次
{n,} 至少出现为n次
{0,m} 最多出现m次

举例：

1
\d?\d+\d*\d{6}\d{3,6}\d{3,}\d{0,6}
RegExper图示
RegExper图示

JS正则的贪婪模式和非贪婪模式

  • 贪婪模式
    量词为{n,m}时，正则表达式尽可能多得往m匹配
  • 非贪婪模式
    在量词{n,m}后面加上?

举例：

JSBin控制台
JSBin控制台

分组

  • 分组
    使用()来实现分组：
    Byron{3}指的是n出现3次；
    (Byron){3}指的是Byron出现3次
1
/Byron{3}(Byron){3}/
RegExper图示
RegExper图示
  • 或
    使用|来实现或
    Byron|Casper和Byr(on|Ca)sper
1
/Byron|Casper(Byr(on|Ca)sper)/
RegExper图示
RegExper图示
  • 反向引用
    使用$符：将2016-07-13转换为07/13/2016
1
'2014/02/23'.replace(/(\d{4})\/(\d{2})\/(\d{2})/g,'$2-$3-$1');
RegExper图示
RegExper图示
  • 忽略分组
    不希望捕获某些分组。只需要在分组内加上?:
1
/(?:Byron).(123)/
RegExper图示
RegExper图示

前瞻

  • 前瞻就是正则表达式匹配到规则的时候，向前检查是否符合断言。“前”指的是从文本头部到文本尾部的方向
  • 后顾和前瞻方向相反，javascript中不支持
  • 符合断言称为正向匹配或肯定匹配；不符合断言称为负向匹配或否定匹配
名称 正则
正向前瞻 exp(?=assert)
负向前瞻 exp(?!assert)

举例：

JSBin控制台
JSBin控制台

JS对象属性

  • global ：全局匹配，默认值为false
  • ignoreCase ：忽略大小写，默认值为false
  • multiline ：多行匹配，默认值为false
  • lastIndex ：当前表达式匹配内容的最后一个字符的下一个位置

  • source ：正则表达式的文本字符串

    备注：global、ignore case、multiline为只读
    举例：

JSBin控制台
JSBin控制台

test和exec方法

  • test()
    RegExp.prototype.test(str)

    • 用于测试字符串参数中是否存在匹配正则表达式模式的字符串。可以发现，在全局调用下，即对于reg2，在第三次test匹配时出现了false，这是因为在全局调用下lastIndex不为0。
      JSBin界面
      JSBin界面
    • 每次都实例化reg2可以使test匹配时不出现false,但这花费内存开销。所以当我们想用到test本义时，不用加上/g来进行全局匹配
      JSBin控制台
      JSBin控制台

  • exec()

    RegExp.prototype.exec(str)

    • 使用正则表达式模式对字符串执行搜索，并将更新全局RegExp对象的属性以反映匹配结果

    • 如果没有匹配的文本则返回null，否则返回一个结果数组：

      • index 声明匹配文本的第一个字符位置
      • input 存放被检索的字符串string

    • 两种调用方式：

      1. 非全局调用
        • 调用非全局的RegExp对象的exec()时，返回数组
        • 第一个元素是与正则表达式相匹配的文本
        • 第二个元素是与RegExpObject的第一个子表达式相匹配的文本（如果有的话）
        • 第三个元素是与RegExpObject的第二个子表达式相匹配的文本（如果有的话），以此类推
        • 在非全局调用下，lastIndex不生效，会被正则忽略，默认为0
          这里写图片描述
      2. 全局调用
        • 非全局调用类似，不同的是lastIndex生效
          这里写图片描述

字符串对象方法

  • search()
    String.prototype.search(reg)

    • search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串
    • 方法返回第一个匹配结果的index，查找不到返回-1；
    • search()方法不执行全局匹配，它将忽略/g，并且总是从字符串的开始进行检索

    JSBin控制台

    备注：对于字符串或数字，search()方法会尝试转化为正则表达式

  • match()
    String.prototype.match(reg)

    • match()方法将检索字符串，以找到一个或多个与regexp匹配的文本
    • regexp是否具有标志g对结果影响很大

    • 两种调用方式

      1. 非全局调用

        • 如果regexp没有标志g，那么match()方法就只能在字符串中执行一次匹配：
          (1) 如果没有找到任何匹配的文本，将返回null；
          (2) 否则它将返回一个数组，其中存放了与它找到的匹配文本有关的信息
        • 返回数组的第一个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的子表达式匹配的文本

        • 除了常规的数组元素之外，返回的数组还含有2个对象属性：
          (1) index声明匹配文本的起始字符在字符串的位置；
          (2) input声明对stringObject的引用

          这里写图片描述

          备注：与exec()的非全局调用方法类似，只是match()方法是String.prototype.match(reg)，exec()方法是RegExp.prototype.match(str)

      2. 全局调用

        • 如果regexp具有标志g，则match()方法将执行全局检索，找到字符串中的所有匹配子字符串：
          (1) 没有找到任何匹配的字串，则返回null；
          (2) 如果找到了一个或多个匹配字串，则返回一个数组

        • 数组元素中存放的是字符串中所有的匹配子串，而且也没有index属性或input属性

          这里写图片描述

  • split()
    String.prototype.split(reg)

    • 使用字符串或正则表达式来将原字符串分割成字符数组
      JSBin界面
      JSBin界面

      备注： split()方法将字符串转换为对应正则表达式

  • replace()
    String.prototype.replace

    • String.prototype.replace(str,replaceStr)
    • String.prototype.replace(reg,replaceStr)

    • String.prototype.replace(reg,function)

      • function会在每次匹配替换的时候调用，有四个参数

        1. 匹配字符串 (match)
        2. 正则表达式分组内容，没有分组则没有改参数 (group1,group2……)
        3. 匹配项在字符串中的index (index)
        4. 原字符串 (origin)

        JSBin控制台

参考资料