正则表达式应用场景

2023-10-08 14:38 由温华从此不练剑发表于 #前端开发

数据验证

数据验证应该是正则表达式最常见的场景了，经常用于用户的输入是否符合所需的条件。数据验证可确保输入或导入的数据准确、一致，并符合预定义的规则。

验证手机号：

const phoneNumber = "13712345678";
const regex = /^1[3-9]\d{9}$/;
console.log("手机号格式正确：", regex.test(phoneNumber));

验证邮箱：

const email = "[email protected]";
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log("电子邮件格式正确：", regex.test(email));

验证密码（要求：至少包含一个数字，一个字母，一个特殊字符，长度在8~18之间）：

const password = "Abcdef.123";
const regex = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{8,18}$/;
console.log("密码格式正确：", regex.test(password))

验证输入内容不能包含 emoji 表情：

function hasEmoji(str) {
  const emojiRegex = /[\uD800-\uDFFF]|[\u2600-\u27FF]|[\u1F000-\u1F9FF]/g;
  return emojiRegex.test(str);
}

// 测试样例
const text1 = 'Hello, world!';
const text2 = '你好，🌍！';
console.log(hasEmoji(text1)); // false
console.log(hasEmoji(text2)); // true

搜索和替换

搜索和替换是正则表达式的很常见的用例。它允许查找文本中的特定模式并将其替换为所需的内容。

笔者之前做个一个需求：

获取 HTML 字符串中所有图片，也就是获取所有 img 标签的 src 属性值，这个需求属于数据提取，第三部分会讲到；
将获取到的图片转灰度图，转灰度成功的图片的名称会加一个-gray后缀，将这个图片替换 HTML 原来的图片。也就将转换成功的图片的src地址加-gray后缀。

灰度图替换：

const grayImgReplace = (html: string, imgUrl: string) => {
    const regex = /(https?:\/\/[^\s"']+\.[^\s"']+(?<!-gray))\.(jpg|jpeg|png)/;
    const match = regex.exec(html);
    if (match) {
        return html.replace(match[0], `${imgUrl}`);
    }
    return html;
};

注意：这里仅替换一张图，若需要替换多张，每个图片都执行该方法即可。

另一个例子就是在 IDE 中进行正则表达式搜索和替换操作。比如，在 VS Code 中，只需在搜索栏中点击搜索栏左侧的正则表达式按钮（.*）或按下快捷键 Alt + R，就可以激活正则表达式搜索模式。

比如，有一个动态接口路径：/app/api/:modal/list，想要看看哪些地方调用了这个接口。这个路径中间的 modal 是动态的，没办法直接通过字符串进行搜索，怎么办呢？可以借助正则表达式轻松实现：

\/app\/api\/([^\/]+)\/list

不管 modal 是什么，都可以轻松搜索到：

除此之外，还可以通过搜索替换轻松实现数据的格式化。例如，将数字转换为货币格式：

const formatMoney = (money) => {
  return money.replace(new RegExp(`(?!^)(?=(\\d{3})+${money.includes('.') ? '\\.' : '$'})`, 'g'), ',') 
}
formatMoney('123456789') // '123,456,789'
formatMoney('123456789.123') // '123,456,789.123'
formatMoney('123') // '123'

数据提取

数据提取是正则表达式的另一个常见用例。正则表达式使我们能够根据定义的模式从较大的文本中有效地提取特定信息。

上面提到了从 HTML 字符串中获取所有图片 URL 的需求，下面来实现一下：

const getImgs = (domContent) => {
  const imgs = [];
  const imgPattern = /<img[^>]+src=['"]((?!.*\.svg).+?)['"]/g;
  let match = null;
  while ((match = imgPattern.exec(domContent)) !== null) {
    imgs.push(match[1]);
  }
  return imgs;
};

再比如，获取所有 a 标签链接，也就是获取 href 属性值：

const html = '<a href="https://www.example.com">Link 1</a> <a href="https://www.google.com">Link 2</a>';

// 使用正则表达式提取 <a> 标签链接
const linkRegex = /<a\s+(?:[^>]*?\s+)?href=(["'])(.*?)\1/g;
const links = [];
let match;

while ((match = linkRegex.exec(html)) !== null) {
  const link = match[2];
  links.push(link);
}

console.log(links);

输出结果如下：

[
  'https://www.example.com',
  'https://www.google.com'
]

再比如，提取 URL 中的域名：

const url = 'https://www.example.com/path/to/page?param1=value1&param2=value2#section';
const domainRegex = /https?:\/\/([\w.-]+)/;
const match = url.match(domainRegex);
const domain = match && match[1];

console.log(domain); // www.example.com

数据清洗

通过适当使用正则表达式，可以轻松地从文本数据中查找、匹配和替换特定的模式和字符，从而对数据进行清理和预处理。以下是一些常见的数据清洗任务，可以使用正则表达式来完成：

移除多余空格：使用正则表达式将连续的多个空格或制表符替换为单个空格，或者完全移除所有空格。
格式化日期：使用正则表达式解析和提取日期字符串，并将其格式化为指定的格式或日期对象。
清除特殊字符：使用正则表达式从文本数据中移除不需要的特殊字符和标点符号，例如 emoji 表情符号、HTML 标签、URL 等。
提取信息：使用正则表达式从文本数据中提取特定的信息，例如电话号码、邮件地址、IP 地址等。
替换错误或不一致的数据：使用正则表达式查找和替换文本数据中的错误拼写、大小写、颠倒顺序等问题，使得数据更加一致和规范化。

比如，删除字符串中的标签和 emoji 表情：

const text = 'Hello, <b>world</b>! 🌍';
const cleanText = text.replace(/<\/?[^>]+(>|$)/g, '').replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, '');
console.log(cleanText); // Hello, world!

这里使用了两个正则表达式替换操作：

/<\/?[^>]+(>|$)/g：这个正则表达式用于匹配并移除 HTML 标签。它会匹配尖括号内的任何内容，并将其替换为空字符串。
/[\uD800-\uDBFF][\uDC00-\uDFFF]/g：这个正则表达式用于匹配并移除 emoji 表情符号。由于 emoji 符号采用 Unicode 编码的多个字符表示，我们使用这个正则表达式匹配并移除这些字符。