转义符号 & 转义字符

在javaScript字符串中/表示「转义」！！！
在/后面跟上一个特定的符号或者字母就表示「转义字符」！！！

举例 🌰：
在javaScript的字符串中""内是不能继续使用""的（或者''内不能继续使用''），那我就想把「大神」用""引起来，这样就可以用\将字符串内的""进行转义。

  1. var str = "我是\"大神\"程序员";
  2. console.log(str);

image.png
或者使用//将「大神」括起来

  1. var str = "我是\\大神\\程序员";
  2. console.log(str);

image.png

\还有固定的组合（规定好的转义字符）：

  • \n表示换行
  • \r表示回车换行
  • \t表示一个Tab按键的空格 ```javascript // \n 表示换行 var str = “我是\n大神程序员”; console.log(str); document.write(str); // 页面显示的时候不会进行换行，转义字符是给编辑系统使用的，HTML是文档不会识别

// \r 表示回车换行 var str = “我是\r大神程序员”; console.log(str); // 效果不明显

// \t 表示一个 tab（四个空格），也称制表符 var str = “我是\t大神程序员”; console.log(str);

  1. ![image.png](https://cdn.nlark.com/yuque/0/2022/png/209060/1655359818087-e5ca08b0-5895-4acb-8abc-a8a902ef030b.png#clientId=u915c89ae-905a-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=97&id=u472f4393&margin=%5Bobject%20Object%5D&name=image.png&originHeight=97&originWidth=254&originalType=binary&ratio=1&rotation=0&showTitle=false&size=9816&status=done&style=none&taskId=ua066a3a8-4ebd-48e6-ad0f-8b42cfd3ef4&title=&width=254)
  3. 另外还需要说一点的是在`javaScript`中的字符串默认是不容许换行的。<br />我们可以用`\`来将空格转化为空格。<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/209060/1655359954288-4549e884-f033-4920-9ade-e5dab6e1e61d.png#clientId=u915c89ae-905a-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=198&id=u14b4ade0&margin=%5Bobject%20Object%5D&name=image.png&originHeight=198&originWidth=578&originalType=binary&ratio=1&rotation=0&showTitle=false&size=28620&status=done&style=none&taskId=ud00233ad-6d4d-4aa7-a04c-e4beabc3965&title=&width=578)
  5. <a name="BHH09"></a>
  6. ## RegExp 正则表达式
  7. :::info
  8. `RegExp（regular expression）`正则表达式就是“将字符串按照一定的规则进行匹配或者检索这个规则中执行的字符类型”。
  9. :::
  11. 「正则表达式」是一个对象，创建正则的方式有两种：<br />1、对象字面量（或者直接声明对象）
  12. ```javascript
  13. // 类似创建对象和数组
  14. // var obj = {}
  15. // var arr = []
  17. var reg = /正则/修饰符;

2、实例化对象

  1. // 类似创建对象和数组
  2. // var obj = new Object
  3. // var arr = new Array
  5. var reg = new RegExp("正则","修饰符");

正则的引用关系

  1. // new 的时候是完全新的正则对象（深拷贝）
  2. var reg1 = /test/;
  3. var reg2 = new RegExp(reg1);
  4. reg1.a = 1;
  5. console.log(reg2.a); // undefind 
  7. // 不 new 的时候是拿来正则对象的引用
  8. var reg1 = /test/;
  9. var reg2 = RegExp(reg1);
  10. reg1.a = 1;
  11. console.log(reg2.a); // 1

正则的字符/括号

修饰符

正则表达式有以下修饰符

i 不区分大小写
g 全局匹配
m 多行匹配 
  1. // i 是让正则在检测字符串的时候不区分大小写
  3. // 用正则查找字符串中的 test
  4. var reg = new RegExp("test");
  5. var str = "This is a test";
  6. // test() 是 RegExp 对象的一个方法，表示检测字符串中是否有匹配的字符
  7. console.log(reg.test(str)); // true
  9. // 用正则查找字符串中的 test
  10. var reg = /test/;
  11. var str = "This is a Test";
  12. console.log(reg.test(str)); // false
  13. // 如果我们不加修饰符得到 false ，因为字符串中没有小写的 test 
  14. // 当我们加上修饰符 i 就能得到
  16. var reg = /test/i;
  17. var str = "This is a Test";
  18. console.log(reg.test(str)); // true
  1. // g 是让正则在检测字符串进行全局查找（默认在匹配成功一个之后就不会继续匹配）
  3. // 不加修饰符 g
  4. var reg = /test/i;
  5. var str = "This is a Test; Test is important.";
  6. console.log(str.match(reg)); // ['Test']
  8. // 加了修饰符 g
  9. var reg = /test/ig;
  10. var str = "This is a Test; Test is important.";
  11. console.log(str.match(reg)); // ['Test', 'Test']
  1. // m 是让正则在匹配的时候多行匹配（默认只会匹配开头）
  2. // ^ 表示以...开头
  4. // 不加 m
  5. var reg = /^Test/gi;
  6. var str = "Test is a function; \nTest is important;";
  7. console.log(str.match(reg)); // ['Test']
  9. // 加了 m
  10. var reg = /^Test/gim;
  11. var str = "Test is a function; \nTest is important;";
  12. console.log(str.match(reg)); // ['Test', 'Test']

元字符（转义字符）

\\w 表示任意一个字母、数字或下划线
\\W 表示非…
\\d 表示 0 - 9 任意一个数字
\\D 表示非…
\\s 表示 \\r或\\n或\\t或\\v或\\f的空白字符
\\S 表示非…
\\b 表示单词边界
\\B 表示非… 
  1. // \w 表示任意一个字母、数字或下划线[0-9A-z_]
  2. // \W 表示非...
  4. var reg = /\wab/g;
  5. var str = "234abc_%&";
  6. console.log(str.match(reg)); // ['4ab']
  8. // ========== 分割 ==========
  10. var reg = /\Wab/g;
  11. var str = "234abc_%&";
  12. console.log(str.match(reg)); // null
  1. // \d 表示 [0-9]的数字
  2. // \D 表示非...
  4. var reg = /\dabc/g;
  5. var str = "234abc_%&";
  6. console.log(str.match(reg)); // ["4abc"]
  8. // ========== 分割 ==========
  10. var reg = /\Dabc/g;
  11. var str = "234eabc_%&";
  12. console.log(str.match(reg)); // ["eabc"]
  1. // \s 表示 [\r\n\t\v\f] 字符
  2. // \S 表示非...
  3. // \r回车 \n换行 \tTab \v垂直换行 \f换页
  5. var reg = /\sab/g;
  6. var str = "23 abc-&%\nabv";
  7. console.log(str.match(reg)); // [' ab', '\nab']
  1. // \b 表示单词边界
  2. // \D 表示非...
  3. // 单词边届的意思：https://zhidao.baidu.com/question/584326176.html
  5. var reg = /\bThis/g;
  6. var str = "This is a test";
  7. console.log(str.match(reg)); // ['This']

量词

个人对量词的理解📗： 正则默认只会按着一位进行匹配，量词是设置前面的字符按照n位进行匹配

:::info 💡正则表达式匹配的时候有两个特点需要切记：
1、不会回头在进行匹配：当一个或一组字符匹配成功后不会再进行匹配
2、贪婪模式：正则在进行匹配的时候能匹配多就不匹配少
总结：字符串从左到右依次先匹配多，再匹配少，如果一旦匹配上就不回头匹配了 ::: | n+ | 表示n字符至少出现 1 次，最多出现无数次（等价{1,}） | | —- | —- | | n* | 表示n字符至少出现 0 次，最多出现无数次（等价{0,}） | | n? | 表示n字符至少出现 0 次，最多出现 1 次（等价{0,1}） | | n{x, y} | 表示n字符至少出现x次，最多出现y次 | | n{x} | 表示n字符只能出现x次 |

  1. // n+
  3. var reg = /\w+/g; // 匹配任意字符出现 {1,} 位
  4. var str = "abcdefg";
  5. console.log(str.match(reg)); // ['abcdefg']
  1. // n*
  3. var reg = /\w*/g; // 匹配任意字符出现 {0,} 位
  4. var str = "abcdefg"; // g 和 " 之间也会被匹配
  5. console.log(str.match(reg)); // ['abcdefg', '']
  7. // ========== 分割 ==========
  9. var reg = /\d*/g; // 匹配任意数字出现 {0,} 位
  10. var str = "abcdefg"; // 当匹配不到数字的时候就会去匹配空格，例如 a 和 b 之间的空格，b 和 c 之间的 空格
  11. console.log(str.match(reg)); // ['', '', '', '', '', '', '', '']
  1. // n?
  3. var reg = /\w?/g; // 匹配任意字符，出现 {0,1} 位
  4. var str = "abcdefg";
  5. console.log(str.match(reg)); //  ['a', 'b', 'c', 'd', 'e', 'f', 'g', '']
  1. // n{x,y}
  3. var reg = /\w{1,2}/g; // 匹配任意字符出现 {1,2} 位
  4. var str = "abcdefg";
  5. console.log(str.match(reg)); // ['ab', 'cd', 'ef', 'g']
  1. // n{x,}
  3. var reg = /\w{5,}/g;
  4. var str = "abcdefg";
  5. console.log(str.match(reg)); // ['abcdefg']
  1. // n{x}
  3. // 匹配 138 开头的11位手机号码
  4. var str = "13812345678";
  5. var reg = /^138\d{8}/;
  6. console.log(reg.test(str));

单字符

&#124; 表示或者，可以和()组合
. 表示任意一个非空白字符
^n 表示以n开头的字符串
n$ 表示以n结尾的字符串 
  1. // ｜ 表示或者
  3. var str = "234asjkhjsais12312lajknkj";
  4. var reg = /(123|234)/g;
  5. console.log(str.match(reg)); // [234, 123]
  7. // ==========
  9. // 在（）内使用 ｜ 表示 123[a-z] 或者 234[a-z]
  10. var str = "234vajkhjsais123slajknkj";
  11. var reg = /(123|234)[a-z]/g;
  12. console.log(str.match(reg)); // ['234v', '123s']
  14. // ==========
  16. // 直接使用 ｜ 表示 123 或者 234[a-z]
  17. var str = "234vajkhjsais123slajknkj";
  18. var reg = /123|234[a-z]/g;
  19. console.log(str.match(reg)); // ['234v', '123']
  1. // . 表示任意一个非空白字符
  2. var reg = /./g;
  3. var str = "This\ris\ta\ntest;6&";
  4. console.log(str.match(reg)); // ['T', 'h', 'i', 's', 'i', 's', '\t', 'a', 't', 'e', 's', 't', ';', '6', '&']
  1. // ^n
  3. var reg = /^ab/gm;
  4. var str = "abcdabcd\nabcdabcd";
  5. console.log(str.match(reg)); // ['ab', 'ab']
  1. // n$
  3. var reg = /cd$/gm;
  4. var str = "abcdabcd\nabcdabcd";
  5. console.log(str.match(reg)); // ['cd', 'cd']
  1. // 检查以abcd开头和以abcd结尾的字符串
  2. var reg = /^abcd.*abcd$/g;
  3. var str = "abcd123123abcd";
  4. console.log(str.match(reg));
  6. // ========== 分割线 ==========
  8. // 匹配检查以abcd开头和以abcd结尾的字符串，且中间是数字
  9. var reg = /^abcd\d+abcd$/g;
  10. var str = "abcd123123abcd";
  11. console.log(str.match(reg));

正向预查和反向预查

相关链接：正向预查

n(?=z) 正向匹配，表示n后紧挨着z的字符串，z不会出现在匹配结果字符串里面
n(!=z) 反向匹配，表示n后非紧挨着z的字符串，z不会出现在匹配结果字符串里面
n(?:z) 不捕获分组，不让字符串捕获子表达式 
  1. // n(?=z)
  3. var str = "abcdabcd";
  4. var reg = /a(?=b)/g; // 匹配 a 后面是 b 的字符串，b 不会出现在匹配的字符串里
  5. console.log(str.match(reg)); // ['a', 'a']
  7. // ========== 分割 ==========
  9. var str = "windows98 windows7 windows8 windows8.1 windows10 windowsVista windowsXP";
  10. var reg = /windows(?=7|8\.1|8)/g;
  11. var a = str.match(reg);
  12. console.log(a); //返回[ 'windows', 'windows', 'windows' ]
  14. // ========== 分割 ==========
  15. // 对密码进行校验，密码的规则：至少 6 位，必须包含数字、大写字母、小写字母、特殊符号
  16. // reg 有点多条件并列的意思 if(6位 && 包含数字 && ...)
  17. var reg = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&])/;
  18. var str = "123abcABC^";
  19. reg.test(str)
  1. // n(!=z)
  3. var str = "windows98 windows7 windows8 windows8.1 windows10 windowsVista windowsXP";
  4. var reg = /windows(?!7|8\.1|8)/g;
  5. var a = str.match(reg);
  6. console.log(a); //返回[ 'windows', 'windows', 'windows' ,'windows']
  1. // n(?:z)
  3. var str = "abc";
  4. var reg = /(a)(b)(c)/;
  5. console.log(str.match(reg));  // ['abc', 'a', 'b', 'c']
  6. // 用子表达式括起来，不仅能匹配(b)(c)还能单独匹配 (b) 和 (c)
  7. // 这样的行为称为 捕获分组（捕获子表达式）
  9. // ========== 分割 ==========
  11. var str = "abc";
  12. var reg = /(?:a)(b)(c)/;
  13. console.log(str.match(reg));  // ['abc', 'b', 'c']

括号表达式

[] 表示只要是括号内的任意一位
() 表达式的引用，一般和表达式一起使用（或者理解为一个分组） 
  1. // [] 表示只要是括号内的任意一位
  3. var str = "0917sqjnka12198";
  4. var reg = /[1234567890][1234567890][1234567890]/g;
  5. console.log(str.match(reg)); // ['091', '121']
  7. // 以上的正则表示字符串中的第1位是[]里的任意1位，且第2位是[]里的任意1位，且第3位是[]里的任意1位
  8. // 匹配成功的字符不会再参与匹配
  9. // 比如：091 先进行匹配，如果 091 匹配成功，接着用 7sq 进行匹配，7sq 不匹配在用 sqj 进行匹配...
  11. // ========== 分割 ==========
  13. var str = "wxyz";
  14. var reg = /[wx][xy][z]/g;
  15. console.log(str.match(reg)); // [xyz]
  16. // 第一次：wxy 去匹配，不成功因为第3位要求是z
  17. // 第二次：xyz 去匹配，成功
  1. // [] 内默认是或的关系，内部还可以用 - 表示区间
  2. var str = "ankjkjjkGhhjqwhq9Z087Jhjhjgu";
  3. // var reg = /[a-z][0-9][A-Z]/g;
  4. var reg = /[a-z0-9A-Z][0-9][A-Z]/;
  5. console.log(str.match(reg)); // ["q9Z"]
  1. // [] 内使用 ^ 表示非的意思
  2. var str = "ankjkjjkGhhjqwhq9Z087Jhjhjgu";
  3. var reg = /[^0-9][a-z]/g;
  4. console.log(str.match(reg)); // ['an', 'kj', 'kj', 'jk', 'Gh', 'hj', 'qw', 'hq', 'Jh', 'jh', 'jg']
  1. // 子表达式和反向引用
  2. // 例如下面的正则：匹配 xxyy yyzz 这样的迭代字符
  4. // 当我们想要匹配任意两个相同字符的时候，就可以使用 () 表面子表达式
  5. var str = "bbaaaaccaaaaidddbaaaaa";
  6. var reg = /(\w)\1(\w)\2/g; 
  7. // () 内就是一个表达式，\1 表示引用第一个表达式，也就是 (\w)
  8. // \2 表示引用第二个表达式，也就是 (\w)
  10. // (\w)(\w) 和 (\w)\1 的区别：
  11. // (\w)(\w) 表示任意两个连续的字符，比如 Ac、MM、K9 都属于两个连续的 \w 字符
  12. // \1 则表示对 (\w) 的引用，当 (\w) 匹配到 b 的时候，\1 也表示 \b
  14. console.log(str.match(reg)); // ['bbaa', 'aacc', 'aaaa', 'aaaa']

正则对象的属性

正则表达式是个对象，所以它有相关的属性。

  1. var reg = /(\w)\1(\w)\2/g;
  2. console.log(reg.global); // 是否设置 g 修饰符
  3. console.log(reg.ignoreCase); // 是否设置 i 修饰符
  4. console.log(reg.multiline); // 是否设置 m 修饰符
  5. console.log(reg.source); // 正则表达式的本体

正则对象的方法

reg.test(str)

:::info 用正则去检测字符串是否符合正则的规则！ :::

  1. // 匹配 138 开头的11位手机号码
  2. var str = "13812345678";
  3. var reg = /^138\d{8}/;
  4. console.log(reg.test(str));

reg.exec(str)

:::info 根据正则表达式查找，结果会返回一个长度为1的数组 （数组只有一个值）
每次调用后递增结果，递增到最后返回null然后从头递增 :::

  1. var str = "This is Test. Test is important"
  2. var reg = /Test/g
  3. console.log(reg.exec(str));

image.png

另外字符串还有match()、replace()可以和正则搭配使用。 详见：String 字符串相关的方法

贪婪模式和非贪婪模式

正则表达式默认是「贪婪模式」（能匹配多绝不匹配少）。
比如我们想匹配{{}}的字符串：

  1. var str = "abc{{efg}}abcd{{xyz}}";
  2. var reg = /{{.*}}/g;
  3. console.log(str.match(reg)); // ['{{efg}}abcd{{xyz}}']

可以看到默认会直接从{{e然后匹配到z}}，这就是贪婪模式的表现。

那么如何将「贪婪模式」转为「非贪婪模式」呢？

  1. var str = "abc{{efg}}abcd{{xyz}}";
  2. var reg = /{{.*?}}/g;
  3. console.log(str.match(reg)); //  ['{{efg}}', '{{xyz}}']

我们只需要在**{{.*}}**加上问号**{{.*?}}**就变为非贪婪模式了！！！
**?**单独使用的时候是表示字符至少出现 0 次，最多出现 1 次，而**?**和量词一起使用的时候就会变成「非贪婪模式」

举例 🌰：

  1. var str = "aaaaaa";
  2. var reg = /\w?/g;
  3. console.log(str.match(reg)); // ['a', 'a', 'a', 'a', 'a', 'a', '']
  5. // ========== 分割 ==========
  7. var str = "aaaaaa";
  8. var reg = /\w??/g;
  9. console.log(str.match(reg)); // ['', '', '', '', '', '', '']

和 String.prototype.replace() 联合的案例：

:::info 该方法用来替换字符串中的字符，接收两个参数
参数1：要替换的字符串或正则表达式
参数2：要将字符串替换为什么字符，参数2还可以是一个函数，函数的参数是正则中的子表达式
💡 该方法本身不具备全局替换的能力，默认只会替换一次 :::

  1. // 将 plus 替换为 +
  2. var str = "JSplusplus";
  3. console.log(str.replace("plus", "+")) // JS+plus
  5. // 用正则的方式去替换
  6. var str = "JSplusplus";
  7. console.log(str.replace(/plus/g, "+")) // JS++
  1. // 用 $ 去拿正则中的子表达式
  2. var str = "aabbccdd";
  3. var reg = /(\w)\1(\w)\2/g;
  4. console.log(str.replace(reg, "$2$2$1$1")); // bbaaddcc
  6. // 这里的 $2 表示正则中的 (\w)\2 中的 (\w)
  7. // $1 表示正则中的 (\w)\1 中的 (\w)
  1. // 用 replace 的函数去实现
  3. var str = "aabbccdd";
  4. var reg = /(\w)\1(\w)\2/g;
  5. var str1 = str.replace(reg, function ($, $1, $2) {
  6.   // $ 当前匹配出来的字符串 aabb 和 ccdd
  7.   // $1 是第一个子表达式
  8.   // $2 是第二个子表达式
  9.   return $2 + $2 + $1 + $1;
  10. });
  11. console.log(str1); // bbaaddcc
  1. // 将 -p 转为大写
  2. var str = "js-plus-plus";
  3. var reg = /\-p/g;
  4. var reg = str.replace(reg, "P");
  5. console.log(reg); // jsPlusPlus
  7. // 将 -b 和 -p 都转化为大写 
  8. var str = "js-blus-plus";
  9. var reg = /\-(\w)/g;
  10. var reg = str.replace(reg, function ($, $1) {
  11.   // $1 就表示 (\w) 也就是 b 和 p
  12.   return $1.toUpperCase();
  13. });
  14. console.log(reg);
  16. // Plus 转换为 _plus
  17. var str = "jsPlusPlus";
  18. var reg = /([A-Z])/g;
  19. var res = str.replace(reg, function ($, $1) {
  20.   return "_" + $1.toLowerCase();
  21. });
  22. console.log(res); // js_plus_plus
  1. // 将 xxyyzz 转为 XxYyZz
  3. var str = "xxyyzz",
  4.     reg = /(\w)\1(\w)\2(\w)\3/,
  5.     res = str.replace(reg, function ($, $1, $2, $3) {
  6.       return $1.toUpperCase() + $1 + $2.toUpperCase() + $2 + $3.toUpperCase() + $3;
  7.     });
  8. console.log(res); // XxYyZz
  1. // 将 aabbcc 转为 a$b$c$ 且不能使用 replace 的 function
  2. var str = "aabbcc",
  3.     reg = /(\w)\1(\w)\2(\w)\3/,
  4.     res = str.replace(reg,`$1$$$2$$$3`); // 当使用 $ 的时候需要用 $ 进行转义，其他字符正常
  5. console.log(res); // a$b$c
  7. // ========== 分割 ==========
  9. var str = "aabbcc",
  10.     reg = /(\w)\1(\w)\2(\w)\3/,
  11.     res = str.replace(reg,`$1/$2/$3`); 
  12. console.log(res); // a/b/c
  1. // 正则给字符串去重
  3. var str = "aabbcc",
  4.     reg = /(\w)\1(\w)\2(\w)\3/g;
  5. console.log(str.replace(reg, "$1$2$3")); // abc
  7. // ========== 分割 ==========
  9. var str = "aaaaabbbbbcccccccc",
  10. reg = /(\w)\1*/g;
  11. console.log(str.replace(reg, "$1")); // abc
  1. // 给字符用千分位用,分割
  2. // 100000000000 =》 100,000,000
  4. var str = "1000000000000";
  5. var reg = /(?=(\B)(\d{3})+$)/g;
  6. console.log(str.replace(reg, "$1,")); // 1,000,000,000,000
  1. // 用 replacr 给模版字符串替换数据
  3. var str = "My name is {{name}}. I'm {{age}} years old.";
  4. var reg = /{{(.*?)}}/g;
  5. var res = str.replace(reg, function ($, $1) {
  6.   return {
  7.     name: "Jone",
  8.     age: 32,
  9.   }[$1];
  10. });
  12. console.log(res); // My name is Jone. I'm 32 years old.