归纳包含以下内容: 正则表达式简介、工具使用、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控制台

参考资料