正则表达式常用方法使用说明

最新推荐文章于 2024-10-07 16:52:45 发布

GMLGDJ

最新推荐文章于 2024-10-07 16:52:45 发布

阅读量1.2k

点赞数

分类专栏： # 正则表达式文章标签：正则表达式前端 javascript

本文链接：https://blog.csdn.net/GMLGDJ/article/details/122893977

版权

正则表达式专栏收录该内容

2 篇文章 0 订阅

订阅专栏

字符串方法

search

search() 方法用于检索字符串中指定的子字符串，也可以使用正则表达式搜索，返回值为索引位置

let str = "baidu.com";
// 字符串搜索
console.log(str.search("com")); // 6
// 正则搜索
console.log(str.search(/\.com/i)); // 5

match

简单的搜索字符串

let str = "baidu.com";
// 字符串搜索
console.log(str.match("coma"));
// 使用正则搜索
console.log(str.match(/com/));
// 返回结果 如果没有匹配到返回null
// {
//   0: "com", // 匹配的结果
//   groups: undefined, // 原子组
//   index: 6, // 出现的位置
//   input: "baidu.com", // 被查询的字符
// }

如果使用 g 修饰符时，就不会有结果的详细信息了（可以使用exec或matchAll），下面是获取所有h1~6的标题元素

<body>
  <h1>111</h1>
  <h2>222</h2>
  <h3>333</h3>
  <script>
    let body = document.body.innerHTML;
    let result = body.match(/<(h[1-6])>[\s\S]+?<\/\1>/g);
    // 返回结果 ['<h1>111</h1>', '<h2>222</h2>', '<h3>333</h3>']
    console.log(result);
  </script>
</body>

matchAll

在新浏览器中支持使用 matchAll 操作，并返回迭代对象。

const str = "baidu.com";
const reg = /[a-z]/ig;
const arr = []
for (const iterator of str.matchAll(reg)) {
  console.log(iterator);
  arr.push({
    ...iterator
  })
}
/**
 * 返回RegExpStringIterator对象 
 * 需使用for of拿取对应的值 
 * 每一项的数据结构['u', index: 4, input: 'houdunren', groups: undefined] （与match类似）
 */
console.log(str.matchAll(reg));
console.log(arr);

split

用于使用字符串或正则表达式分隔字符串

// 使用字符串分隔日期
let str1 = "2023-02-12";
console.log(str1.split("-")); //["2023", "02", "12"]
// 如果日期的连接符不确定，那就要使用正则操作了
let str2 = "2023/02-12";
console.log(str2.split(/-|\//)); //["2023", "02", "12"]

replace

replace 方法不仅可以执行基本字符替换，也可以进行正则替换，下面替换日期连接符

let str = "2023/02/12";
console.log(str.replace(/\//g, "-")); //2023-02-12

替换字符串可以插入下面的特殊变量名：

变量	说明
`$$`	插入一个 "$"。
`$&`	插入匹配的子串。
$`	插入当前匹配的子串左边的内容。
`$'`	插入当前匹配的子串右边的内容。
`$n`	$n为第n个原子组匹配到的内容。提示：索引是从1开始

在yq的前后添加对应的内容

let yq = "11yq==";
console.log(yq.replace(/yq/g, " $$ $` $& $' $$ "));

把电话号用 - 连接

let phone = "(010)99999999 (020)8888888";
console.log(phone.replace(/\((\d{3,4})\)(\d{7,8})/g, "$1-$2"));

replace 支持回调函数操作，用于处理复杂的替换逻辑

变量名	代表的值
`match`	匹配的子串。（对应于上述的$&。）
`p1,p2, ...`	假如replace()方法的第一个参数是一个 `RegExp` 对象，则代表第n个括号匹配的字符串。（对应于上述的$1，$2等。）例如，如果是用 `/(\a+)(\b+)/` 这个来匹配，`p1` 就是匹配的 `\a+`，`p2` 就是匹配的 `\b+`。
`offset`	匹配到的子字符串在原字符串中的偏移量。（比如，如果原字符串是 `'abcd'`，匹配到的子字符串是 `'bc'`，那么这个参数将会是 1）
`string`	被匹配的原字符串。
NamedCaptureGroup	命名捕获组匹配的对象

为所有标题添加上 hot 类

<body>
  <div class="content">
    <h1>百度</h1>
    <h2>baidu.com</h2>
    <h1>百度</h1>
  </div>
  <script>
    let content = document.querySelector(".content");
    let reg = /<(h[1-6])>([\s\S]*?)<\/\1>/gi;
    content.innerHTML = content.innerHTML.replace(
      reg,
      (
        search, //匹配到的字符
        p1, //第一个原子组
        p2, //第二个原子组
        index, //索引位置
        source //原字符
      ) => {
        return `
      <${p1} class="hot">${p2}</${p1}>
      `;
      }
    );
    console.log(content.innerHTML);
  </script>
</body>

正则方法

test

返回true或false，下面是检测输入的邮箱是否合法的案例

<body>
  <input type="text" name="email" />
  <script>
    let email = document.querySelector(`[name="email"]`);
    email.addEventListener("keyup", e => {
      console.log(/^\w+@\w+\.\w+$/.test(e.target.value));
    });
  </script>
</body>

exec

不使用 g 修饰符时与 match 方法使用相似，使用 g 修饰符后可以循环调用直到全部匹配完。

使用 g 修饰符多次操作时使用同一个正则，即把正则定义为变量使用
使用 g 修饰符最后匹配不到时返回 null

计算内容中a出现的次数

<body>
  <div class="content">
    abababab
  </div>
  <script>
    let content = document.querySelector(".content");
    let reg = /a/g;
    let num = 0;
    while ((result = reg.exec(content.innerHTML))) {
      num++;
    }
    console.log(result = reg.exec(content.innerHTML))
    console.log(`a出现${num}次`);
  </script>
</body>