JavaScript_正则使用

正则的核心

• 正则是一种匹配行为，要么匹配字符，要么匹配位置。

第一章：字符匹配

1 横向模糊匹配

• 一个正则可匹配的字符串的长度不是固定的，可以是多种情况的。其实现的方式是使用量词。譬如{m,n}，表示连续出现最少m次，最多n次。比如/vfrank{2,5}hello/

2 纵向模糊匹配

• 纵向模糊指的是，一个正则匹配的字符串，具体到某一位字符时，它可以不是某个确定的字符，可以有多种可能。比如[abc]，表示该字符是可以字符“a”、“b”、“c”中的任何一个。

第二章：正则表达式位置匹配

ES5 中的6个锚字符 ^ $ \b \B (?=p) (?!p)

• ^ 字符匹配开头，在多行匹配中匹配行开头
• $ 匹配结尾，在多行匹配中匹配行结尾
• \b 是单词边界，具体就是\w和\W之间的位置，也包括\w和^之间的位置，也包括\w和$之间的位置
• \B 就是\b的反面的意思，非单词边界。例如在字符串中所有位置中，扣掉\b，剩下的都是\B的。具体说来就是\w与\w、\W与\W、^与\W，\W与$之间的位置
• (?=p) 即p前面的位置
• (?!p) 即不是p前面的位置

    var result = "hello".replace(/(?=l)/g, '#');
    console.log(result);
    // => "he#l#lo"

    var result = "hello".replace(/(?!l)/g, '#');
    console.log(result);
    // => "#h#ell#o#"

• (?<=p) 表示p表达式后面的位置
• (?<!p) 是(?<=p)的反面意思，匹配不是p表达式后面的位置

    var result = "hello".replace(/(?<=h)/g, '#');
    // => "h#ello"

    var result = "hello".replace(/(?<!h)/g, '#');
    // => "#he#l#l#o#"

具体说来就是\w与\w、\W与\W、^与\W，\W与$之间的位置。

正则使用

• 正则可视化工具地址 https://regex101.com/

• 注意点：? 的 贪婪匹配和 惰性匹配

• (x) (?:x)捕获组的使用

• 正则方法replace的一些参数特别用法

特殊字符

特殊含义字符

符号	含义
\	转义符（可以将其后的特殊字符，转义为字面量）
^	匹配输入字符串的开始位置，在方括号表达式中使用，表示不接受该字符集合
$	匹配输入字符串的结尾位置
.	小数点）匹配除换行符之外的任何单个字符。eg: /.n/将会匹配 “nay, an apple is on the tree” 中的 ‘an’ 和 ‘on’，但是不会匹配 ‘nay’。
\d	匹配一个数字
\D	匹配一个非数字字符
\s	匹配一个空白字符，包括空格、制表符、换页符和换行符。
\S	匹配一个非空白字符。
\w	匹配一个单字字符(字母、数字或者下划线 )。等价于[A-Za-z0-9_]
\W	匹配一个非单字字符。等价于[^A-Za-z0-9_]
\b	匹配一个词的边界(eg: /\bm/匹配’moon’中的’m’; /oo\b/并不匹配"moon"中的’oo’，因为’oo’后面有一个’n’)
\B	匹配一个非单词边界(eg: /\B…/匹配"noonday"中的’oo’, 而/y\B…/匹配"possibly yesterday"中的’yes’)
[\b]	匹配一个退格(U+0008)。（不要和\b混淆了。）
\f	匹配一个换页符 (U+000C)
\n	匹配一个换行符 (U+000A)
\r	匹配一个回车符 (U+000D)
\t	匹配一个水平制表符 (U+0009)
\v	匹配一个垂直制表符 (U+000B)
\uxxx	查找以16进制数规定的Unicode字符
[xyz]	匹配方括号中的任意字符，包括转义序列。可以使用破折号（-）来指定一个字符范围。点（.）和星号（*）不必进行转义，但是转义也起作用 eg:[abcd] 和[a-d]是一样的
[^xyz]	它匹配任何没有包含在方括号中的字符。你可以使用破折号（-）来指定一个字符范围。任何普通字符在这里都是起作用的

量词特殊符

符号	含义
*	匹配前一个表达式0次或多次。等价于 {0,}
+	匹配前面一个表达式1次或者多次。等价于 {1,}
?	匹配前面一个表达式0次或者1次。等价于 {0,1}。*如果紧跟在任何量词 、 +、? 或 {} 的后面，将会使量词变为非贪婪的（匹配尽量少的字符）
{n}	n是一个正整数，匹配了前面一个字符刚好发生了n次
{n,m}	n 和 m 都是整数。匹配前面的字符至少n次，最多m次。如果 n 或者 m 的值是0， 这个值被忽略

特殊功能字符

符号	含义
(x)	匹配 ‘x’ 并且记住匹配项 (eg: /<(div)>\w*</\1>/.exec(‘ Vfrank ’))
x|y	匹配’x’或者’y’(eg: /green

捕获组

(x) 和 (?:x)

// 捕获
    let regStr1 = "hello VFrank".match(/(VF\w*)/);
    console.log(regStr1)
    // [
    //     0: "VFrank",
    //     1: "VFrank",
    //     groups: undefined,
    //     index: 6
    //     input: "hello VFrank",
    // ]

// 非捕获
    let regStr2 = "hello VFrank".match(/(?:VF\w*)/);
    console.log(regStr2)
    // [
    //     0: "VFrank"
    //     groups: undefined
    //     index: 6
    //     input: "hello VFrank"
    //     length: 1
    // ]

断言

x(?=y) 和 x(?!y)

• x(?=y) 匹配’x’仅仅当’x’后面跟着’y’

• x(?!y) 匹配’x’仅仅当’x’后面不跟着’y’

正则表达式的方法

test

• 被查找的字符串中是否匹配给出的正则表达式，它返回true或false。

    /\w/.test('vfrank')
    // true

    /vfrank$/.test('hello vfrank')
    // true

    /^vfrank$/.test('hello vfrank')
    // false

match

• 正则表达式模式对字符串执行查找，并将包含查找的所有结果作为数组返回。返回一个数组或者在未匹配到时返回null

    'Hello VFrank'.match(/[A-Z]/g)
    // ["H", "V", "F"]

    'Hello VFrank'.match('VFrank')
    // ['VFrank']
    // [   0: "VFrank",
    //     groups: undefined,
    //     index: 6,
    //     input: "Hello VFrank"
    // ]

    'hello VFrank aVFrank'.match(/\w*VFrank/g)
    // ["VFrank", "aVFrank"]

exec

• 一个在字符串中执行查找匹配的RegExp方法，它返回查找结果的第一个值放在数组中返回 （未匹配到则返回null）。

    /\w*VFrank/g.exec('hello VFrank aVFrank')
    // ["VFrank"]
    // [
    //     0: "VFrank"
    //     groups: undefined,
    //     index: 6,
    //     input: "hello VFrank aVFrank",
    //     length: 1
    // ]

search

• 一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。

   'hello VFrank aVFrank'.search(/VFrank/)
    // 6

replace(regexp|substr, newSubStr|function)

• 一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。

• 方法返回一个由替换值替换一些或所有匹配的模式后的新字符串。模式可以是一个字符串或者一个正则表达式, 替换值可以是一个字符串或者一个每次匹配都要调用的函数。

    // - 字符串作为参数
    // $$	插入一个 "$"。
    // $_	RegExp.input 最近一次目标字符串，简写成RegExp["$_"]
    // $&	RegExp.lastMatch 最近一次匹配的文本，简写成RegExp["$&"]
    // $+	RegExp.lastParen 最近一次捕获的文本，简写成RegExp["$+"]
    // $`	RegExp.leftContext 目标字符串中lastMatch之前的文本，简写成RegExp["$`"]
    // $'	RegExp.rightContext 目标字符串中lastMatch之后的文本，简写成RegExp["$'"]
    // $n	假如第一个参数是 RegExp对象，并且 n 是个小于100的非负整数，那么插入第 n 个括号匹配的字符串。提示：索引是从1开始


    var regex = /([abc])(\d)/g;
    var string = "a1b2c3d4e5";
    string.match(regex);

    console.log( RegExp.input );
    console.log( RegExp["$_"]);
    // => "a1b2c3d4e5"

    console.log( RegExp.lastMatch );
    console.log( RegExp["$&"] );
    // => "c3"

    console.log( RegExp.lastParen );
    console.log( RegExp["$+"] );
    // => "3"

    console.log( RegExp.leftContext );
    console.log( RegExp["$`"] );
    // => "a1b2"

    console.log( RegExp.rightContext );
    console.log( RegExp["$'"] );
    // => "d4e5"

    let reStr = 'Hello I am VFrank'.replace(/(\w+)\s(\w+)/, "$1, $2");
    console.log(reStr);
    // Hello, I am VFrank

    let reStr = 'Hello I am VFrank fas'.replace(/(\w+)\s(\w+)/, "$&");
    console.log(reStr);
    //  Hello I am VFrank fas

    let reStr = '#$%Hello Iam VFrank fas'.replace(/(\w+)\s(\w+)/, "$`");
    console.log(reStr);
    // #$%#$% VFrank fas

    let reStr = '#$%Hello Iam VFrank fas'.replace(/(\w+)\s(\w+)/, "$'");
    console.log(reStr);
    // #$% VFrank fas VFrank fas

// - 指定函数作为参数
// - function replacement(match, p1, p2, p3, offset, string)
// - match 匹配的子串
// - p1,p2,p3 ...假如replace()方法的第一个参数是一个RegExp 对象，则代表第n个括号匹配的字符串。
// - offset 匹配到的子字符串在原字符串中的偏移量。
// - string 被匹配的原字符串。

    function replacer(match, p1, p2, p3, offset, string) {
        return [p1, p2, p3].join(' - ');
    }
    var newString = 'VFrank1314520^_^'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
    console.log(newString);
    // VFrank - 1314520 - ^_^