经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JS中的正则表达式
来源:cnblogs  作者:王子饼干  时间:2021/5/17 9:21:27  对本文有异议

JS中的正则表达式


1.RegExp类型

ECMAScript通过RegExp类型支持正则表达式。

  1. let expression = /pattern/flags;

pattern(模式)是任何正则表达式,正则表达式可以带零个或多个flags。

常见 修饰符(标记)

修饰符 描述
g 全局匹配查找所有匹配项
i 忽略大小写
m 使边界字符 ^$ 匹配每一行的开头和结尾,记住是多行,而不是整个字符串的开头和结尾。
y 粘附模式,表示只匹配以lastIndex为开头的字符串。(自动开启全局模式)
s 默认情况下的圆点 . 是 匹配除换行符 \n 之外的任何字符,加上 s 修饰符之后, . 中包含换行符 \n。

例子:

  1. // 匹配所有以"at"结尾的三字符组合,忽略大小写
  2. let pattern = /.at/gi;

注:匹配元字符需要转义


1.1RegExp构造函数

正则表达式 也可以使用RegExp构造函数来创建,它接收两个参数:模式字符串和(可选的)标记字符串。

  1. let pattern1 = /[bc]at/i;
  2. // 跟pattern1一样,只不过是用构造函数创建的
  3. let pattern2 = new RegExp("[bc]at", "i");

注意:因为RegExp的模式参数是字符串,所以在某些情况下需要二次转义。具体做法是对字面量中的每个反斜杠前面再加一个反斜杠

1.2 实例属性

每个RegExp都有用于模式信息的实例属性。

属性 描述
global、ignorCase、sticky、unicode、multiline、dotAll 布尔值。分别判断是否设置了g、i、y、u、m、s标记
lastIndex 表示在源字符串中下一次搜索的开始位置,始终从0开始
source 表达式字面量字符串(去掉开始和结尾斜杠)
flags 标记信息字符串

1.3实例方法

① exec()

只接收一个参数,即要应用模式的字符串。

如果找到了匹配项,则返回包含第一个匹配信息的数组;如果没找到匹配项,则返回null。
返回的数组虽然是Array的实例,但包含两个额外的属性:index和input。

  • index:匹配到字符串的起始位置。
  • input:要查找的字符串

这个数组的第一个元素是匹配整个模式的字符串,其他元素是与表达式中的捕获组匹配的字符串。如果模式中没有捕获组,则数组只包含一个元素。

  1. let text = "cat,bat";
  2. let pattern = /([bc])at/i;
  3. let matches = pattern.exec(text);
  4. //["cat", "c", index: 0, input: "cat,bat", groups: undefined]
  5. console.log(matches[0]); // "cat"
  6. console.log(matches[1]); // "c"
  7. console.log(matches.lastIndex); //没有使用全局匹配,永远为0

如果在这个模式上设置了g标记,则每次调用exec()都会在字符串中向前搜索下一个匹配项,如下面的例子所示:
  1. let text = "cat,bat";
  2. let pattern = /([bc])at/gi;
  3. let matches = pattern.exec(text);
  4. //["cat", "c", index: 0, input: "cat,bat", groups: undefined]
  5. console.log(matches.lastIndex); // 3
  6. pattern.exec(text);
  7. //["bat", "b", index: 4, input: "cat,bat", groups: undefined]
  8. console.log(matches.lastIndex); // 7
  9. pattern.exec(text);
  10. //null
  11. console.log(matches.lastIndex); // 0

注:如果模式设置了粘附标记y,则每次调用exec()就只会在 lastIndex的位置上寻找匹配项。(自动开启全局模式

如果匹配中途结束,可以通过调整lastIndex的属性值恢复匹配。


② test()

接收一个字符串参数。如果输入的文本与模式匹配(完全匹配),则参数返回true,否则返回false。

当我们只关心是否匹配时可以使用test()。


③ 其他方法

  • toLocaleString()和toString() :返回其字面量的字符串表示。

    1. let r = /([bc])at/iy;
    2. console.log(r.toString()); // "/([bc])at/iy"

  • valueOf():返回正则表达式本身


2.4构造函数属性(静态属性)

RegExp也有几个静态属性 但不常用。略


2.字符串匹配

1.match()

本质与RegExp的exec() 方法相同。方法接收一个参数:正则表达式对象,或表达式字符串

  1. let text = "cat,bat";
  2. let pattern = /(.)at/i;
  3. let matches = text.match(pattern)
  4. //let matches = pattern.exec(text); 等价
  5. //["cat", "c", index: 0, input: "cat,bat", groups: undefined]
  6. console.log(matches[0]); // "cat"
  7. console.log(matches[1]); // "c"
  8. console.log(matches.lastIndex); //没有使用全局匹配,永远为0

2.search()

查找模式,方法接收一个参数:正则表达式对象,或表达式字符串。返回模式第一个匹配的位置索引,如果没找到则返回-1。

  1. let text = "cat, bat, sat, fat";
  2. let pos = text.search(/at/);
  3. console.log(pos); // 1

3.replace()

用于替换字符串,方法接收两个参数,第一个参数为RegExp对象或字符串、第二个参数为字符串或函数。

  • 第一个参数为字符串则只会替换第一个字符串,如果全部替换,正则表达式必须带全局标记。

  • 第二个参数是字符串时有几个特殊字符,可用来表示匹配到的值
    $n:n为0-9,$1表示第一个捕获组的字符串

    1. let text = "bat, cat, fat, tat";
    2. let pattern = /(.)at/g;
    3. let result = text.replace(pattern,"$1$1"); //$1表示分组1 也就是at前面的字符
    4. console.log(result); //"bb, cc, ff, tt"

  • 第二个参数是函数,函数会接收三个参数:匹配的整个字符串、匹配索引、整个字符串。(多个捕获组会传多次)。
    函数应该返回一个字符串,表示替换内容。

    1. function htmlEscape(text) {
    2. return text.replace(/[<>"&]/g,
    3. function(match, pos, originalText) {
    4. switch(match) {
    5. case "<":
    6. return "&lt;";
    7. case ">":
    8. return "&gt;";
    9. case "&":
    10. return "&amp;";
    11. case "\"":
    12. return "&quot;";
    13. }
    14. });
    15. }
    16. console.log(htmlEscape("<p class=\"greeting\">Hello world!</p>"));
    17. // "&lt;p class=&quot;greeting&quot;&gt;Hello world!</p>"

4.split()

用于将字符串分割为数组,第一个参数可以是RegExp对象或字符串,第二个可选参数用于指定数组最大大小。

  1. let colorText = "red,blue,green,yellow";
  2. let colors1 = colorText.split(",");
  3. // ["red", "blue", "green", "yellow"]
  4. let colors2 = colorText.split(",", 2);
  5. // ["red", "blue"]
  6. let colors3 = colorText.split(/[^,]+/);
  7. // ["", ",", ",", ",", ""] 如果分隔符在开头和结尾出现,数组的前后就会出现空字符串元素

原文链接:http://www.cnblogs.com/ku1a/p/14769824.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号