Skip to main content

正则表达

基础使用​

image-20220823223411700

在 JavaScript 中，正则表达式也是对象。

这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。

使用流程:

  1. 创建正则对象
  2. 调用对象的方法执行匹配:test、exec、match

创建正则对象​

语法1：构造函数方式

var reg = new RegExp(pattern, attributes)
  • pattern 字符串，指定了正则表达式的模式或其他正则表达式。
  • attributes 可选的字符串，包含属性 “g”、”i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

语法2：正则表达式字面量

var box = /hello/ig

两者区别

1.采用直接量语法新建的正则表达式对象在代码编译时就会生成，是平常开发中常用的方式； 2.采用构造函数生成的正则对象要在代码运行时生成。

如果正则表达式不用经常改变，最好使用字面量，性能更高，官方文档明确表示。

正则对象的使用​

官方总结​

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

exec()​

检索字符串中的正则表达式的匹配返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null

返回的数组中 第0个元素为 0 匹配到的文本

  • 第1个元素 为 index 匹配到的文本出现的位置
  • 第2个元素 为 input 被匹配的字符串
  • 第3个元素 为 length 匹配到的文本的个数
// 配合while使用可以匹配多次
while (result = reg.exec(str)) {
    console.log(result)
}

test()​

检测一个字符串是否匹配某个模式，返回布尔值

reg.test(str)

string.match()​

将字符串中匹配的内容捕获出来，若加上量词g则一次性捕获所有匹配的内容放到数组里返回，若不加则与exec()的返回值一样

string.match(reg)

可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。 将字符串中匹配的内容捕获出来

var reg = /abc/g;
var str = "11abc00abc"

console.log(str.match(reg));//返回一个数组

string.matchAll()​

string.replace()​

字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

const reg = 
str.replace(reg,"44")

配合组（group）的使用​

const test = `
<table>
  <!-- <内容> -->
    <tr>
        <td colspan="3" align="center">
          <h3>&#x9700;&#x6c42;&#x8be6;&#x7ec6;</h3>
          <img src="http://localhost:45462/image/image-20220508133729328.png"/>
        </td>
        <td colspan="1" align="center">
          <h3>&#x6700;&#x7ec8;&#x6548;&#x679c;&#xff08;&#x4e09;&#x671f;&#xff09;</h3>
          <img src="http://localhost:45462/image/&#x5c0f;&#x7a0b;&#x5e8f;&#x6f14;&#x793a;1.gif"/>
        </td>
    </tr>
</table>
`;

function callback(str) {
  return "---" + str + "---";
}

const reg = /(.*<img src=")(.*)("\/>.*)/;
let new_list = [];
test.split("\n").forEach(line => {
  new_list.push(line.replace(reg, (match, start, link, end) => `${start}${callback(link)}${end}`));
});

console.log("new_list: ", new_list.join("\n"));

string.search()​

返回值是相匹配的子串的起始位置。 方法不执行全局匹配，它将忽略标志 g

const str="Visit W3School!"

document.write(str.search(/W3School/)) // 6

string.split()​

字符串的分割 ，返回一个数组。正则可以匹配它的分割方式


常用示例​