likes
comments
collection
share

冷知识：自己也能写正则

作者站长头像
站长
· 阅读数 58

1. 前言

大家好，我是 simple ，我的理想是利用科技手段来解决生活中遇到的各种问题。

今天想和大家唠唠正则表达式，很多开发的同事都对正则表达式处于比较微妙的关系，让你写你不会，让你看你基本上能看懂。遇到开发要用，就直接百度，百度不到就用indexOf或者includes。

其实正则说难也不难，只要稍微了解一下里面的规则对付日常开发还是比较容易的。

2. 正则表达式基础

2.1 正则表达式的语法和基本规则

下面是两种正则表达式的语法和定义规则。

  1. 正则表达式对象：使用 RegExp 构造函数可以创建一个正则表达式对象。构造函数接受两个参数：模式字符串和标志（可选）
  2. 正则表达式字面量：使用正斜杠（/）将正则表达式包裹起来，并写在两个正斜杠之间。例如，/pattern/ 是一个简单的正则表达式字面量。
const reg1 = new RegExp("pattern")
const reg2 = /pattern/ // 常用

2.2 正则表达式的模式匹配方法

使用正则表达式来测试字符串是否符合规则，可以使用test测试。若符合返回true，否则返回false。

const reg = /pattern/
reg.test('pattern')
  • test(str): 检测字符串 str 是否与正则表达式匹配，返回布尔值。
  • exec(str): 在字符串 str 中执行正则表达式的匹配，返回一个数组，包含匹配到的结果。
  • match(regex): 在字符串中使用正则表达式匹配，返回一个数组，包含匹配到的结果。
  • search(regex): 在字符串中搜索与正则表达式匹配的位置，返回匹配的索引。
  • replace(regex, replacement): 在字符串中使用正则表达式进行替换，将匹配到的部分替换为指定的内容。
  • split(regex): 根据正则表达式将字符串拆分为数组。

3. 字符匹配与转义

3.1 字面字符匹配

正则表达式可以直接匹配字面字符，比如你要匹配 pattern，只需要声明一个 /pattern/，这应该没啥好说的。

3.2 转义字符的使用

反斜杠 因为正则表达式里面有很多符号代表了不同的含义，因此如果需要匹配一些特殊字符，就需要加一个转义符\，这个不用记，你要是不记得哪些标点符号算是特殊的，就全部都加上。

// 举例：匹配一个 .
const reg1 = /./  // 匹配任意除换行符以外的字符
const reg2 = /\./ // 仅匹配一个.字符

反斜杠+字母 当你想要匹配一类字符的时候，你又不想要使用穷举的方式。比如你想要匹配一个数字，你不想从0写到9，那你就往往需要用到这个转移符号。

  • \d 匹配一个数字字符。
  • \s 匹配任何空白字符，包括空格、制表符、换页符等等。
  • \w 匹配字母、数字、下划线。

上面三个是比较常用的转义符定义，小写就是匹配符合的字符，大写就是匹配不符合的字符。即当你要匹配一个非数字字符的字符串时，使用\D，其他同理（当然，这里只针对\d,\s和\w）。

3.3 元字符

刚刚说到过，我们在使用正则表达式的时候可能会用上一些字符来表示具体规则，比如使用.,$,^,-等，如果想要匹配这些特殊字符，需要在前面添加反斜杠。详情请看3.2。

  • ^ 匹配输入字符串的开始位置。
  • $ 匹配输入字符串的结束位置。
  • . 匹配除换行符（\n、\r）之外的任何单个字符。
// 举例：匹配长度为1的数字字符串
const reg = /^\d$/
/^\d$/.test(`1`)

3.4 修饰符

标记不写在正则表达式里，标记位于表达式之外，格式如下：

  • g 全局匹配。
  • i 不区分大小写。
  • m 多行匹配，使边界字符^和$匹配每一行的开头和结尾，记住是多行，而不是整个字符串的开头和结尾。
const reg = /pattern/gi

3.5 量词

量词不能单独使用，修饰前面出现的表达式。

  • * 出现任意次。
  • ? 出现0次或1次
  • + 出现1次或多次
  • {n, m} 最多出现m次，最少出现n次
const reg = /zo+/
reg.test('zoo') // true
reg.test('zo') // true

4. 常见的正则表达式应用以及解析

4.1 邮箱地址的验证

  • 邮箱地址以字母、数字、下划线、点、百分号、加号或减号开头，至少出现一次。
  • 然后是一个 @ 符号。
  • 接下来是一个或多个字母、数字、点或减号的字符。
  • 然后是一个点字符，需要进行转义。
  • 最后是两个或更多的大小写字母。
// 正则表达式模式
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

// 邮箱地址验证函数
function validateEmail(email) {
  return emailPattern.test(email);
}

// 示例使用
const email1 = 'example@example.com';
const email2 = 'invalid_email.com';

console.log(validateEmail(email1)); // 输出: true
console.log(validateEmail(email2)); // 输出: false
  1. ^：表示匹配字符串的开头。
  2. [a-zA-Z0-9._%+-]+：表示匹配一个或多个大小写字母、数字、下划线、点、百分号、加号或减号的字符。
  3. @：表示匹配一个 @ 符号。
  4. [a-zA-Z0-9.-]+：表示匹配一个或多个大小写字母、数字、点或减号的字符。
  5. .：表示匹配一个点字符，需要使用 `` 进行转义。
  6. [a-zA-Z]{2,}：表示匹配两个或更多大小写字母的字符。
  7. $：表示匹配字符串的结尾。

4.2 URL 地址的提取

  • URL 地址以 http:// 或 https:// 或 ftp:// 开头。
  • 紧接着是一个或多个除空格、斜杠、美元符号、问号和井号以外的字符。
  • 然后是一个任意字符。
  • 最后是零个或多个非空格字符。
const html = '<div class="container">Hello, world!</div>';

// 正则表达式模式
const tagPattern = /<([a-zA-Z0-9]+)[^>]*>([\s\S]*?)<\/\1>/g;

// 解析 HTML 函数
function parseHTML(html) {
  const tags = [];
  let match;
  
  while ((match = tagPattern.exec(html)) !== null) {
    const tagName = match[1];
    const content = match[2];
    tags.push({ tagName, content });
  }
  
  return tags;
}

// 示例使用
const parsedTags = parseHTML(html);
console.log(parsedTags); // 输出: [{ tagName: 'div', content: 'Hello, world!' }]
  1. (https?|ftp)：表示匹配 http 或 https 或 ftp。
    • http 或 https：匹配 http 或 https。
    • ?：表示前面的字符（s）可选。
    • ftp：匹配 ftp。
  2. ://：表示匹配 ://。
  3. [^\s/$.?#]：表示匹配除空格、斜杠、美元符号、问号和井号以外的任意字符。
  4. .：表示匹配任意字符。
  5. [^\s]*：表示匹配零个或多个非空格字符。
  6. /gi：表示使用全局匹配模式（g）和不区分大小写匹配模式（i）。

该正则表达式使用了分组 (https?|ftp) 来匹配不同的协议，使用 [] 表示字符类来匹配除特定字符以外的任意字符，使用 . 匹配任意字符，使用 * 匹配零个或多个字符。

使用 /g 标志表示全局匹配，即匹配所有符合条件的 URL 地址。使用 /i 标志表示不区分大小写，即不考虑 URL 地址中的字母大小写。

正则表达式工具和调试技巧

详情见【建议收藏】前端开发必备文档（持续更新中...）

进阶文章

正则别光想着抄，看懂用法下次你也会写

转载自:https://juejin.cn/post/7249193764886757435
评论
请登录