正则表达式

正则表达式

正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。本章介绍 JavaScript 正则表达式。

1、创建一个正则表达式

使用一个正则表达式字面量，其由包含在斜杠之间的模式组成

const test = /abc/  //内容写在双斜杠内

2、使用正则

我们用test()来验证正则规则，匹配成功返回true,不匹配返回flase

使用简单模式

简单模式是由你想直接找到的字符构成。比如，/abc/ 这个模式就能且仅能匹配 “abc” 字符按照顺序同时出现的情况。例如在 “Hi, do you know your abc’s?” 和 “The latest airplane designs evolved from slabcraft.” 中会匹配成功。在上述两个例子中，匹配的子字符串是 “abc”。但是在 “Grab crab” 中会匹配失败，因为它虽然包含子字符串 “ab c”，但并不是准确的 “abc”。

		const test = /abc/
        console.log(test.test('abc'))  // true
        console.log(test.test('ab'))  // flase
        console.log(test.test('b'))  // flase
        console.log(test.test('123abchd'))  // true
        console.log(test.test('a b c'))  // false

使用特殊字符

当你需要匹配一个不确定的字符串时，比如寻找一个或多个 “b”，或者寻找空格，可以在模式中使用特殊字符。比如，你可以使用 /ab*c/ 去匹配一个单独的 “a” 后面跟了零个或者多个 “b”，同时后面跟着 “c” 的字符串：*的意思是前一项出现零次或者多次。在字符串 “cbbabbbbcdebc” 中，这个模式匹配了子字符串 “abbbbc”。

 //边界符，用来提示字符所处的位置，主要有两个,^和$
 const test = /^abc/    //^表示以什么开头
        console.log(test.test('abc'))  // true
        console.log(test.test('ab'))  // flase
        console.log(test.test('b'))  // flase
        console.log(test.test('123abchd'))  // flase
        console.log(test.test('a b c'))  // false
//----------------------------------------------------------------
 const test = /abc$/    //$表示以什么结尾
        console.log(test.test('abc'))  // true
        console.log(test.test('ab'))  // flase
        console.log(test.test('b'))  // flase
        console.log(test.test('123abchd'))  // flase
        console.log(test.test('123abc'))  // true
        console.log(test.test('a b c'))  // false
//--------------------------------------------------------
const test = /^abc$/    //
        console.log(test.test('abc'))  // true
        console.log(test.test('ab'))  // flase
        console.log(test.test('b'))  // flase
        console.log(test.test('123abchd'))  // flase
        console.log(test.test('123abc'))  // false
        console.log(test.test('a b c'))  // false

量词

字符	含义
*	匹配前一个表达式 0 次或多次。等价于 {0,}。例如，/bo*/ 会匹配 “A ghost boooooed” 中的 ‘booooo’ 和 “A bird warbled” 中的 ‘b’，但是在 “A goat grunted” 中不会匹配任何内容。
+	匹配前面一个表达式 1 次或者多次。等价于 {1,}。例如，/a+/ 会匹配 “candy” 中的 ‘a’ 和 “caaaaaaandy” 中所有的 ‘a’，但是在 “cndy” 中不会匹配任何内容。
?	匹配前面一个表达式 0 次或者 1 次。等价于 {0,1}。例如，/e?le?/ 匹配 “angel” 中的 ‘el’、“angle” 中的 ‘le’ 以及 "oslo’ 中的 ‘l’。如果紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪（匹配尽量少的字符），和缺省使用的贪婪模式（匹配尽可能多的字符）正好相反。例如，对 “123abc” 使用 /\d+/ 将会匹配 “123”，而使用 /\d+?/ 则只会匹配到 “1”。还用于先行断言中，如本表的 x(?=y) 和 x(?!y) 条目所述。
{n}	n 是一个正整数，匹配了前面一个字符刚好出现了 n 次。 比如， /a{2}/ 不会匹配“candy”中的’a’,但是会匹配“caandy”中所有的 a，以及“caaandy”中的前两个’a’。
{n,}	n 是一个正整数，匹配前一个字符至少出现了 n 次。例如，/a{2,}/ 匹配 “aa”, “aaaa” 和 “aaaaa” 但是不匹配 “a”。
{n,m}	n 和 m 都是整数。匹配前面的字符至少 n 次，最多 m 次。如果 n 或者 m 的值是 0，这个值被忽略。例如，/a{1, 3}/ 并不匹配“cndy”中的任意字符，匹配“candy”中的 a，匹配“caandy”中的前两个 a，也匹配“caaaaaaandy”中的前三个 a。注意，当匹配”caaaaaaandy“时，匹配的值是“aaa”，即使原始的字符串中有更多的 a。

// 元字符之量词
    // 1. * 重复次数 >= 0 次
    const reg1 = /^w*$/
    console.log(reg1.test(''))  // true
    console.log(reg1.test('w'))  // true
    console.log(reg1.test('ww'))  // true
    console.log('-----------------------')

    // 2. + 重复次数 >= 1 次
    const reg2 = /^w+$/
    console.log(reg2.test(''))  // false
    console.log(reg2.test('w'))  // true
    console.log(reg2.test('ww'))  // true
    console.log('-----------------------')

    // 3. ? 重复次数  0 || 1 
    const reg3 = /^w?$/
    console.log(reg3.test(''))  // true
    console.log(reg3.test('w'))  // true
    console.log(reg3.test('ww'))  // false
    console.log('-----------------------')


    // 4. {n} 重复 n 次
    const reg4 = /^w{3}$/
    console.log(reg4.test(''))  // false
    console.log(reg4.test('w'))  // flase
    console.log(reg4.test('ww'))  // false
    console.log(reg4.test('www'))  // true
    console.log(reg4.test('wwww'))  // false
    console.log('-----------------------')

    // 5. {n,} 重复次数 >= n 
    const reg5 = /^w{2,}$/
    console.log(reg5.test(''))  // false
    console.log(reg5.test('w'))  // false
    console.log(reg5.test('ww'))  // true
    console.log(reg5.test('www'))  // true
    console.log('-----------------------')

    // 6. {n,m}   n =< 重复次数 <= m
    const reg6 = /^w{2,4}$/
    console.log(reg6.test('w'))  // false
    console.log(reg6.test('ww'))  // true
    console.log(reg6.test('www'))  // true
    console.log(reg6.test('wwww'))  // true
    console.log(reg6.test('wwwww'))  // false

    // 7. 注意事项： 逗号两侧千万不要加空格否则会匹配失败

范围

字符	含义
[xyz\]	一个字符集合。匹配方括号中的任意字符，包括转义序列。你可以使用破折号（-）来指定一个字符范围。对于点（.）和星号（*）这样的特殊符号在一个字符集中没有特殊的意义。他们不必进行转义，不过转义也是起作用的。 例如，[abcd] 和 [a-d] 是一样的。他们都匹配"brisket"中的‘b’,也都匹配“city”中的‘c’。/[a-z.]+/ 和/[\w.]+/与字符串“test.i.ng”匹配。
[^xyz\]	一个反向字符集。也就是说， 它匹配任何没有包含在方括号中的字符。你可以使用破折号（-）来指定一个字符范围。任何普通字符在这里都是起作用的。例如，[^abc] 和 [^a-c] 是一样的。他们匹配"brisket"中的‘r’，也匹配“chop”中的‘h’。
[\b\]	匹配一个退格 (U+0008)。（不要和\b混淆了。）

 // 元字符之范围  []  
    // 1. [abc] 匹配包含的单个字符， 多选1
    const reg1 = /^[abc]$/
    console.log(reg1.test('a'))  // true
    console.log(reg1.test('b'))  // true
    console.log(reg1.test('c'))  // true
    console.log(reg1.test('d'))  // false
    console.log(reg1.test('ab'))  // false

    // 2. [a-z] 连字符 单个
    const reg2 = /^[a-z]$/
    console.log(reg2.test('a'))  // true
    console.log(reg2.test('p'))  // true
    console.log(reg2.test('0'))  // false
    console.log(reg2.test('A'))  // false
    // 想要包含小写字母，大写字母 ，数字
    const reg3 = /^[a-zA-Z0-9]$/
    console.log(reg3.test('B'))  // true
    console.log(reg3.test('b'))  // true
    console.log(reg3.test(9))  // true
    console.log(reg3.test(','))  // flase

    // 用户名可以输入英文字母，数字，可以加下划线，要求 6~16位
    const reg4 = /^[a-zA-Z0-9_]{6,16}$/
    console.log(reg4.test('abcd1'))  // false 
    console.log(reg4.test('abcd12'))  // true
    console.log(reg4.test('ABcd12'))  // true
    console.log(reg4.test('ABcd12_'))  // true

    // 3. [^a-z] 取反符
    const reg5 = /^[^a-z]$/
    console.log(reg5.test('a'))  // false 
    console.log(reg5.test('A'))  // true
    console.log(reg5.test(8))  // true

字符类

字符	含义
\d	匹配一个数字。``等价于 [0-9]。例如， /\d/ 或者 /[0-9]/ 匹配"B2 is the suite number."中的’2’。
\D	匹配一个非数字字符。``等价于 [^0-9]。例如， /\D/ 或者 /[^0-9]/ 匹配"B2 is the suite number."中的’B’ 。
\s	匹配一个空白字符，包括空格、制表符、换页符和换行符。等价于 [\f\n\r\t\v\u0020\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。例如，/\s\w*/ 匹配"foo bar.“中的’ bar’。经测试，\s不匹配”\u180e"，在当前版本 Chrome(v80.0.3987.122) 和 Firefox(76.0.1) 控制台输入/\s/.test(“\u180e”) 均返回 false。
\S	匹配一个非空白字符。等价于 [^\f\n\r\t\v\u0020\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。例如，/\S\w*/ 匹配"foo bar."中的’foo’。
\w	匹配一个单字字符（字母、数字或者下划线）。等价于 [A-Za-z0-9_]。例如，/\w/ 匹配 “apple,” 中的 ‘a’，"$5.28,"中的 ‘5’ 和 “3D.” 中的 ‘3’。
\W	匹配一个非单字字符。等价于 [^A-Za-z0-9_]。例如，/\W/ 或者 /[^A-Za-z0-9_]/ 匹配 “50%.” 中的 ‘%’。

		const test = /\d{4}-\d{1,2}-\d{2}/   //匹配 年-月-日
        console.log(test.test('2023-06-17'))  //true

通过标志进行高级搜索

标志	描述
g	全局搜索。
i	不区分大小写搜索。
m	多行搜索。
s	允许 . 匹配换行符。

使用括号的子字符串匹配

一个正则表达式模式使用括号，将导致相应的子匹配被记住。例如，/a(b)c /可以匹配字符串“abc”，并且记得“b”。回调这些括号中匹配的子串，使用数组元素 [1],……[n]。

使用括号匹配的子字符串的数量是无限的。返回的数组中保存所有被发现的子匹配。下面的例子说明了如何使用括号的子字符串匹配。

var myRe = /d(b+)d/g;
var myArray = myRe.exec("cdbbdbsbz");//[ "dbbd", "bb", index: 1, input: "cdbbdbsbz" ]
//不仅返回匹配的“dbbd”，还输出了括号你匹配的值"d"

使用正则表达式的方法

方法	描述
exec	一个在字符串中执行查找匹配的 RegExp 方法，它返回一个数组（未匹配到则返回 null）。
test	一个在字符串中测试是否匹配的 RegExp 方法，它返回 true 或 false。
match	一个在字符串中执行查找匹配的 String 方法，它返回一个数组，在未匹配到时会返回 null。
matchAll	一个在字符串中执行查找所有匹配的 String 方法，它返回一个迭代器（iterator）。
search	一个在字符串中测试匹配的 String 方法，它返回匹配到的位置索引，或者在失败时返回 -1。
replace	一个在字符串中执行查找匹配的 String 方法，并且使用替换字符串替换掉匹配到的子字符串。
split	一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的 String 方法。

exec() 方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null。

const myRe = /ab*/g;
const str = 'abbcdefabh';
let myArray;
while ((myArray = myRe.exec(str)) !== null) {
  let msg = `Found ${myArray[0]}. `;
  msg += `Next match starts at ${myRe.lastIndex}`;
  console.log(msg);
}
//Found abb. Next match starts at 3
//Found ab. Next match starts at 9

replace() 方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项。

var str = 'Twas the night before Xmas...';
var newstr = str.replace(/xmas/i, 'Christmas');
console.log(newstr);  // Twas the night before Christmas...