美文网首页Web前端之路前端程序员
正则表达式：从Copy到手写

正则表达式：从Copy到手写

作者: 僵尸粉YJ | 来源:发表于2018-05-30 15:55 被阅读21次

    1. RegExp对象

    JavaScript有两种方式实例化RegExp对象

    • 字面量
    • 构造函数
    字面量
    const reg = /all/;
console.log(reg);   // /all/
'This is all I have.'.replace(reg, 'ALL');    // This is ALL I have.
    构造函数
    const reg = new RegExp('all');
console.log(reg);   // /all/
'This is all I have.'.replace(reg, 'ALL'); // This is ALL I have.

    2. 元字符

    • 原义文本字符
    • 元字符
    原义文本字符

    代表它本来含义的字符。比如正则表达式为 /abc/、/123/；它们分别匹配的是 abc、123 ，

    元字符

    在正则表达式中，有特殊含义的非数字字符。如：\b \d \w . + () 等。部分元字符的含义并不唯一，在不同的书写方式，含义可能不同。

    元字符表：http://tool.oschina.net/uploads/apidocs/jquery/regexp.html

    3. 工具推荐

    不是所有正则表达式都像前面写的那么简单，因为正则表达式语法有些复杂，我们在写的时候多多少少也会有些错误，或者阅读别人写的正则表达式的时候也难理解。

    如果把下面的正则表达式转换成下图，会有助于我们理解正则表达式的含义。

    ^http(|s):\/\/[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+\/$

    图解

    给大家推荐一个工具 https://regexper.com

    4. 量词

    字符 含义
    + 出现一次或多次(至少出现一次)
    ? 出现零次或一次(最多出现一次)
    * 出现零次或多次(任意次)
    {n} 出现n次
    {n, m} 出现n到m次
    {n,} 至少出现n次 
    // \d表示匹配数字
// 匹配一个数字
'1234567890'.replace(/\d/, 'a'); // a234567890
// 匹配一个或多个数字(至少匹配一个)
'1234567890'.replace(/\d+/, 'a'); // a
'1234567890'.replace(/\d?/, 'a'); // a234567890
'1234567890'.replace(/\d*/, 'a'); // a
'1234567890'.replace(/\d{3}/, 'a'); // a4567890
'1234567890'.replace(/\d{2,4}/, 'a'); // a567890
'1234567890'.replace(/\d{3,}/, 'a'); // a
'12'.replace(/\d{3,}/, 'a'); // 12

    使用工具 https://regexper.com/ 图解

    \d{2,6}

    \d{2,6}

    5. 贪婪模式和非贪婪模式

    从上面 4. 量词 的例子中，'1234567890'.replace(/\d+/, 'a'); 输出的是 a 而不是 a234567890；'1234567890'.replace(/\d{2,4}/, 'a'); 输出的是 a567890 而不是 a34567890。

    贪婪模式：正则表达式尽可能多的匹配，一直到匹配失败

    非贪婪模式：正则表达式尽可能少的匹配，一旦匹配成功就不再匹配

    因为默认情况下，正则表达式都是使用贪婪模式做匹配的。如果想要让正则表达式使用非贪婪模式匹配，在量词后面加个 ? 即可。

    '1234567890'.replace(/\d{2,4}/, 'a');  // a567890
'1234567890'.replace(/\d{2,4}?/, 'a'); // a34567890

'1234567890'.replace(/\d+/, 'a');      // a
'1234567890'.replace(/\d+?/, 'a');     // a234567890

    6. 类

    • 正则表达式中，可以使用 [] 来构建一个类，正则表达式中的类是指符合某些特性的对象

    字符类

    正则表达式 [abcd] 是把 a、b、c、d 归为一类，该表达式可以匹配这类字符

    '12345a6b7c8D9e'.replace(/[abcd]/g, '|');   // 12345|6|7|8D9e

    范围类

    正则表达式提供了 [a-z] 来表示从 a 到 z 的任意字符（包含 a 和 z）

    '1a2b3c4q5z'.replace(/[a-z]/g, '|');   // 1|2|3|4|5|
'1a2b3c4T5Z'.replace(/[a-z]/g, '|');   // 1|2|3|4T5Z
'1a2b3c4T5Z'.replace(/[a-zA-Z]/g, '|');   // 1|2|3|4|5|
'1a2b3c4q5z'.replace(/[0-9]/g, '|');   // |a|b|c|q|z

    [a-zA-Z0-9]

    [a-zA-Z0-9]

    预定义类

    字符 等价于 含义
    \d [0-9] 数字字符
    \D [^0-9] 非数字字符
    \w [a-zA-Z0-9_] 字母、数字、下划线（单词字符）
    \W [^a-zA-Z0-9_] 非字母、数字、下划线（非单词字符）
    \s [\t\n\x0B\f\r] 空白字符
    \S [^\t\n\x0B\f\r] 非空白字符
    . [^\n\r] 除了换行、回车之外的任意字符

    7. 边界

    字符 含义
    ^ 以xxx开头
    $ 以xxx结尾
    \b 单词边界
    \B 非单词边界 
    'img/png/img-1.png'.replace(/img/g, 'image'); // image/png/image-1.png
'img/png/img-1.png'.replace(/^img/g, 'image'); // image/png/img-1.png

'img/png/img-1.png'.replace(/png/g, 'jpg'); // img/jpg/img-1.jpg
'img/png/img-1.png'.replace(/png$/g, 'jpg'); // img/png/img-1.jpg

'This is all I have.'.replace(/is/g, 'IS'); // ThIS IS all I have.
'This is all I have.'.replace(/\bis\b/g, 'IS'); // This IS all I have.
'This is all I have.'.replace(/\Bis\b/g, 'IS'); // ThIS is all I have.

    9. 分组

    作用

    • 与 | 使用
    • 与量词使用
    • 反向引用

    与 | 使用

    /http(|s):\/\//

    /http(|s):/// 
    /http(|s):\/\//.test('https://');   // true
/http(|s):\/\//.test('http://');    // true
/a(b|c)d/.test('ad');               // false
/a(b|c)d/.test('abd');              // true
/a(b|c)d/.test('acd');              // true

    与量词使用

    如何匹配 test 出现两次 testtest ？

    /test{2}/.test('testtest');    // false
/test{2}/.test('testt');          // true
/(test){2}/.test('testtest');  // true

    反向引用

    含有分组的正则表达式匹配成功时，将子表达式匹配到的内容，保存到内存中一个以数字编号的组里，可以简单的认为是对一个局部变量进行了赋值，这时就可以通过反向引用方式，引用这个局部变量的值。

    很多情况下，我们可能需要将某种格式的字符串转换成另一种格式的字符串。例如：将 05/28/2018 转换成 2018-05-28；将Markdown语法的超链接 [Test](https://www.test.com/) 转换成HTML的超链接 <a href="https://www.test.com/">Test</a>

    '05/28/2018'.replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$3-$1-$2');
// => 2018-05-28
'[Test](https://www.test.com/)'.replace(/\[(.+)\]\((http(|s):\/\/.+)\)/, '<a href="$2">$1</a>');
// => <a href="https://www.test.com/">Test</a>

    忽略分组

    有时候我们在写正则表达式的时候会多次使用分组，但有一些分组是不需要反向引用的，比如正则表达式 /http(|s):\/\// 中的分组，我们不需要进行反向引用，这时候我们应该使用 (?:) 来忽略分组

    不忽略分组：

    /http(|s):\/\//

    /http(|s):///

    忽略分组：

    /http(?:|s):\/\//

    /http(|s):///

    10. 前瞻后顾

    • 正则表达式是从头部(左)向尾部(右)开始匹配的，文本的尾部方向称为“前”，文本的头部方向称为“后”
    • 前瞻：正则表达式在匹配到规则的时候，向前检查是否符合断言
    • 后顾：正则表达式在匹配到规则的时候，向后检查是否符合断言
    名称 正则 含义
    正向前瞻 exp(?=assert) 向前检查符合断言的
    负向前瞻 exp(?!assert) 向前检查不符合断言的
    正向后瞻 (?<=assert)exp 向后检查符合断言的
    负向后瞻 (?<!assert)exp 向后检查不符合断言的 
    'ab1cde2fg'.replace(/[a-z](?=\d)/g, 'X'); // aX1cdX2fg
'ab1cde2fg'.replace(/[a-z](?!\d)/g, 'X'); // Xb1XXe2XX

'ab1cde2fg'.replace(/(?<=\d)[a-z]/g, 'X'); // ab1Xde2Xg
'ab1cde2fg'.replace(/(?<!\d)[a-z]/g, 'X'); // XX1cXX2fX

    11. 修饰符

    • global: 是否全文搜索，默认 false
    • ignoreCase: 是否大小写敏感，默认 false
    • multiline: 是否多行搜索，默认 false
    • lastIndex: 是当前表达式匹配内容的最后一个字符的下一个位置
    • source: 正则表达式的文本字符
    'aaaaa'.replace(/a/, 'A');      // Aaaaa
'aaaaa'.replace(/a/g, 'A');     // AAAAA

'aAQq'.replace(/[a-z]/g, 'X'); // XAQX
'aAQq'.replace(/[a-z]/gi, 'X'); // XXXX

/[a-z]/.test('AA');    // false
/[a-z]/i.test('AA');    // true

`img/png/img-1.png
img/png/img-1.png
img/png/img-1.png`.replace(/^img/g, 'image');
// => image/png/img-1.png
//    img/png/img-1.png
//    img/png/img-1.png
`img/png/img-1.png
img/png/img-1.png
img/png/img-1.png`.replace(/^img/gm, 'image');
// => image/png/img-1.png
//    image/png/img-1.png
//    image/png/img-1.png
const reg = /\d/gim;
console.log(reg.source);    // \d

    12. RegExp对象中 test() 和 exec()

    test()

    用于测试参数字符串中是否存在匹配正则表达式模式的字符串；如果存在则返回true，否则返回false

    const reg = /\w/;
reg.test('|'); // false
reg.test('a'); // true
reg.test('a'); // true

    当使用 g 全文搜索时，test 函数会出现如下问题：

    test

    上述问题其实是正则表达式对象的 lastIndex 属性在作怪

    test

    如果正则表达式使用了全文搜索 g ，又想避免上述问题，应在执行 test 函数前先将 lastIndex 置 0

    const reg = /\w/g;
reg.test('ab'); // true
reg.lastIndex = 0;
reg.test('ab'); // true
reg.lastIndex = 0;
reg.test('ab'); // true

    exec()

    使用正则表达式模式对字符串执行搜索，并将匹配到的结果以数组形式返回，如果没有匹配，返回null

    exec

    结果数组属性

    • index：匹配字符的第一个字符的位置
    • input：被匹配的字符串

    返回的数组

    • 第一个元素是与正则表达式匹配的内容
    • 第二个元素是与第一个子表达式相匹配的内容
    • 第三个元素是与第二个子表达式相匹配的内容（以此类推）

    现有如下字符串数组，我们使用 exec 从每个元素中提取图片的路径

    const arr = [
    '[测试1](https://www.test1.com/img/img-1.png)',
    '[测试1](http://www.test1.com/img/img-1.jpg)',
    '[测试2](https://static.test2.com/image/haha/img-1.png)'
]

    正则表达式：

    const reg = /\[.+\]\(http(|s):\/\/[a-zA-Z0-g_-]+(\.[a-zA-Z0-9_-]+)+\/((.+\/)+.+\.(png|jpg))\)/;
    exec 
    const res = reg.exec(arr[2]);
    exec

    上述正则表达式使用了较多的分组，我们在阅读图形的时候可能造成干扰，忽略不必要的分组。

    const reg2 = /\[.+\]\(http(?:|s):\/\/[a-zA-Z0-g_-]+(?:\.[a-zA-Z0-9_-]+)+\/((?:.+\/)+.+\.(?:png|jpg))\)/;
    exec 
    reg2.exec(arr[2]);
    exec

    相关文章

      网友评论

        本文标题：正则表达式：从Copy到手写

        本文链接：https://www.haomeiwen.com/subject/kqxxsftx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        Web前端之路

        前端

        程序员

        关于我们|服务条款|联系我们|正则表达式：从Copy到手写|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！