三、ECMA

1. 正则表达式

1.1 概念

  • 正则表达式(regular expression)是构成搜索模式（search pattern）的字符序列，也可以说是一个描述字符模式的对象
    （相当于有一个模式、模板，更方便找到自己想找的数据）

  • 正则表达式可用于执行所有类型的文本搜索和文本替换操作，主要用来验证客户端的输入数据。

  • 正则表达式可以是单字符，或者更复杂的模式。

  • ECMAScript的RegExp类表示正则表达式，而String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。

  • 返回结果是数组

1.2 语法

/pattern（模式）/modifiers（修饰符）;

1.2.1 模式

（1）括号用于查找一定范围的字符串：

表达式 描述
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找由 | 分隔的任何选项。 
  1. 对字符串中的字符“h”进行全局搜索
  2. <script>
  3. function myFunction() {
  4.   var str = "Is this all there is?";
  5.   var patt1 = /[h]/g; 
  6.   var result = str.match(patt1);
  7.   document.getElementById("demo").innerHTML = result;
  8. }
  9. </script>
  10. >>> h,h
  1. 字符串中的数字 1 到 4 进行全局搜索
  2. <script>
  3. function myFunction() {
  4.   var str = "123456789";
  5.   var patt1 = /[1-4]/g;
  6.   var result = str.match(patt1);
  7.   document.getElementById("demo").innerHTML = result;
  8. }
  9. </script>
  10. >>> 1,2,3,4
  1. 可以对任何指定的备选项进行全局搜索（红色|绿色）
  2. <script>
  3. function myFunction() {
  4.   var str = "re, green, red, green, gren, gr, blue, yellow";
  5.   var patt1 = /(red|green)/g;
  6.   var result = str.match(patt1);
  7.   document.getElementById("demo").innerHTML = result;
  8. }
  9. </script>
  10. >>> green,red,green

（2）元字符（Metacharacter）是拥有特殊含义的字符,：

元字符 描述
\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。 
  1. 对字符串中的数字进行全局搜索
  2. <script>
  3. function myFunction() {
  4.   var str = "Give 100%!"; 
  5.   var patt1 = /\d/g;
  6.   var result = str.match(patt1);
  7.   document.getElementById("demo").innerHTML = result;
  8. }
  9. </script>
  10. >>> 1,0,0
  1. 对字符串中的空白字符进行全局搜索
  2. <script>
  3. function myFunction() {
  4.   var str = "Is this all there is?";
  5.   var patt1 = /\s/g;
  6.   var result = str.match(patt1);
  7.   document.getElementById("demo").innerHTML = result;
  8. }
  9. </script>
  10. >>> , , ,
  1. 在字符串中单词的开头或结尾处对“W3”进行全局搜索
  2. <script>
  3. function myFunction() {
  4.   var str = "Visit W3Schools"; 
  5.   var patt1 = /\bW3/g;
  6.   var result = str.match(patt1);
  7.   document.getElementById("demo").innerHTML = result;
  8. }
  9. </script>
  10. >>> W3
  1. 以全局搜索字符串中的十六进制数0057（W）
  2. <script>
  3. function myFunction() {
  4.   var str = "Visit W3School. Hello World!"; 
  5.   var patt1 = /\u0057/g;
  6.   var result = str.match(patt1);
  7.   document.getElementById("demo").innerHTML = result;
  8. }
  9. </script>
  10. >>> W,W

（3）Quantifiers 定义量词：

量词 描述
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。 
  1. 对字符串中的至少一个“o”进行全局搜索
  2. <script>
  3. function myFunction() {
  4.   var str = "Hellooo World! Hello W3School!"; 
  5.   var patt1 = /o+/g;
  6.   var result = str.match(patt1);
  7.   document.getElementById("demo").innerHTML = result;
  8. }
  9. </script>
  10. >>> ooo,o,o,oo
  11. //若是patt1 = /o+/m，则返回ooo
  1. 以全局搜索“l”，后跟零个或多个“o”字符
  2. <script>
  3. function myFunction() {
  4.   var str = "Hellooo World! Hello W3School!"; 
  5.   var patt1 = /lo*/g;
  6.   var result = str.match(patt1);
  7.   document.getElementById("demo").innerHTML = result;
  8. }
  9. </script>
  10. >>> l,looo,l,l,lo,l
  11. //n*其实“包含/涉及”两个参数
  1. 以全局搜索“1”，后跟零或一个“0”字符。
  2. <script>
  3. function myFunction() {
  4.   var str = "1, 100 or 1000?";
  5.   var patt1 = /10?/g;
  6.   var result = str.match(patt1);
  7.   document.getElementById("demo").innerHTML = result;
  8. }
  9. </script>
  10. >>> 1,10,10

1.2.2 修饰符

修饰符可用于大小写不敏感的更全局的搜素：

修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。（返回多个）
m 执行多行匹配。 
  1. 对字符串中的“w3school”进行不区分大小写的搜索
  2. <script>
  3. function myFunction() {
  4.   var str = "Visit W3School";
  5.   var patt1 = /w3school/i;
  6.   var result = str.match(patt1);
  7.   //使用了match（）
  8.   document.getElementById("demo").innerHTML = result;
  9. }
  10. </script>
  11. >>> W3School
  1. 在字符串中每行的开头对“is”进行多行搜索。
  2. <script>
  3. function myFunction() {
  4.   var str = "\nIs th\nis it?";
  5.   var patt1 = /^is/m;
  6.   var result = str.match(patt1);
  7.   document.getElementById("demo").innerHTML = result;
  8. }
  9. </script>
  10. >>> is

1.3 创建方式

new运算符

  1. var pattern = new RegExp('Box');  //第一个参数是模式字符串
  2. alert(box); //打印出：/Box/(两个反斜杠是正则表达式的字面量表示法)
  1. var pattern = new RegExp('Box', 'gi');  //第二参数是模式修饰符                
  2. alert(box);   //打印出：/Box/gi

字面量方式

  1. var pattern = /Box/;
  1. var pattern = /Box/ig;

1.4 使用RegExp 对象的方法（用来测试）

在 JavaScript 中，RegExp 对象是带有预定义属性和方法的正则表达式对象。

RegExp对象包含两个方法：test()和exec()，功能基本相似，用于测试字符串匹配。

test()

test()方法 通过模式来搜索字符串，然后根据结果返回 true 或 false。

【要寻找的关键词不在方法的（）内部，而是在其前面——x.方法（）, 即pattern.test(str)】

【写法1】

  1. <body>
  2. <p id="p01">The best things in life are free!</p>
  3. <p id="demo"></p>
  4. <script>
  5. str = document.getElementById("p01").innerHTML; 
  6. document.getElementById("demo").innerHTML = /e/.test(str);  //在段落中检索一个“e”,并将结果（布尔值）赋值给<p id="demo">标签的元素
  7. </script>
  8. </body>
  9. >>> true

【写法2】

  1. var str = "The best things in life are free!";
  2. alert(/e/.test(str));

【写法3】

  1. /e/.test("The best things in life are free!")

【其他的写法参考上面提到的创建方法，根据pattern.test(str)的格式大同小异】

exec()

exec() 方法通过指定的模式搜索字符串，并返回已找到的文本。如果未找到匹配，则返回 null。

1.5 RegExp对象的静态属性

task3-3 - 图1

  1. var pattern = /(g)oogle/ig;
  2. var str = 'This is a google！';
  3. pattern.test(str);   //！！必须执行一下，静态属性才有效
  4. alert(RegExp.input); //This is google！
  5. alert(RegExp.lastMatch);   // google
  6. alert(RegExp.lastParen);   // g
  7. alert(RegExp.leftContext); // This is a
  8. alert(RegExp.multiline);   //false
  9. alert(RegExp.rightContext); // ！

实际上alert(RegExp.multiline)返回的是undefined ？？

【短名的写法】

  • RegExp.input可以改写成RegExp[‘$_’]，其他以此类推
  • 其中，RegExp.input比较特殊，它还可以写成RegExp.$_

注意：Opera不支持input、lastMatch、lastParen和multiline属性。IE不支持multiline属性。

1.6 RegExp对象的实例属性

task3-3 - 图2

1.7 使用字符串方法

String对象也提供了4个使用正则表达式的方法

search()

search(pattern) 使用表达式来搜索匹配，然后返回匹配的位置。

  • 使用字符串方法 search() 来处理字符串：
    search() 方法也接受字符串作为搜索参数。字符串参数将被转换 为正则表达式：
  1. 在字符串中搜索“W3School”，并显示匹配的位置
  2. <script>
  3. var str = "Visit W3School!"; 
  4. var n = str.search("W3School");
  5. document.getElementById("demo").innerHTML = n;
  6. </script>
  7.  >>> 6
  • 在字符串方法 search() 中使用正则表达式
  1. 在字符串中搜索“w3School”，并显示匹配的位置
  2. <script>
  3. var str = "Visit W3School!"; 
  4. var n = str.search(/w3School/i);
  5. document.getElementById("demo").innerHTML = n;
  6. </script>
  7. >>> 6
  • 找不到，返回 -1

replace()

replace(pattern,replacement) 返回 模式被替换后 的字符串。

（括号中的两个参数，被取代的值在前面)

  • replace() 也接受字符串作为搜索参数：
  1. <body>
  2. <p>把下面段落中的“Microsoft”替换为“W3School”：</p>
  3. <button onclick="myFunction()">试一试</button>
  4. <p id="demo">请访问 Microsoft！</p>
  5. <script>
  6. function myFunction() {
  7.   var str = document.getElementById("demo").innerHTML; 
  8.   //这里没有加后缀！！！！，直接指代上述HTML中已有文本内容
  9.   var txt = str.replace("Microsoft","W3School");
  10.   document.getElementById("demo").innerHTML = txt;
  11. }
  12. </script>
  13. </body>
  • 在字符串方法 replace() 中使用正则表达式
  1. <body>
  2. <h1>JavaScript 正则表达式</h1> 
  3. <p>将“microsoft”替换为以下段落中的“W3School”：</p>
  4. <button onclick="myFunction()">试一试</button>
  5. <p id="demo">Please visit Microsoft and Microsoft!</p>
  6. <script>
  7. function myFunction() {
  8.   var str = document.getElementById("demo").innerHTML; 
  9.   var txt = str.replace(/microsoft/i,"W3School");
  10.   document.getElementById("demo").innerHTML = txt;
  11. }
  12. </script>
  13. </body>

match()

match(pattern) 返回pattern中的子串或null

split()

split(pattern)返回字符串按指定pattern拆分的数组

  1. var pattern = /!/ig;                                                            
  2. var str = 'This is a Box! That is a Box!';
  3. alert(str.split(pattern));   //将！拆开分组成数组：This is a Box,That is a Box,
  4. alert(str.split(pattern).length);    //产生数组长度：3
  5. //数组[0]是This is a Box，[1]是That is a Box,[2]是一个空格

2. 三种数据类型的相关API

https://www.cnblogs.com/xixi18/p/8600782.html

https://blog.csdn.net/qq_42842786/article/details/107641415