正则表达式在js前端的15个使用场景梳理总结

这篇攻略将介绍正则表达式在JavaScript前端开发中的15个常见使用场景，帮助读者了解如何在实践中灵活运用正则表达式，提高开发效率。

1.验证邮箱地址

在开发过程中，我们需要验证用户输入的邮箱地址是否合法。以下是验证邮箱地址的正则表达式：

/^([a-zA-Z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/

示例代码：

function isValidEmail(email) {
  const emailPattern = /^([a-zA-Z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
  return emailPattern.test(email);
}

console.log(isValidEmail("[e-mail]")); // 输出 true
console.log(isValidEmail("invalid_email")); // 输出 false

2.验证手机号码

验证用户输入的电话号码是否为有效的手机号码也是一个非常常见的场景。以下是验证手机号码的正则表达式：

/^(13[0-9]|14[5-9]|15[0-3,5-9]|16[5-6]|17[0-8]|18[0-9]|19[1,8,9])\d{8}$/

示例代码：

function isValidPhoneNumber(phoneNumber) {
  const phonePattern = /^(13[0-9]|14[5-9]|15[0-3,5-9]|16[5-6]|17[0-8]|18[0-9]|19[1,8,9])\d{8}$/;
  return phonePattern.test(phoneNumber);
}

console.log(isValidPhoneNumber("13800138000")); // 输出 true
console.log(isValidPhoneNumber("invalid_phone_number")); // 输出 false

3.验证密码强度

在用户注册时，我们通常会要求用户输入强密码。以下是一个验证密码强度的正则表达式，该正则表达式要求密码长度至少为8位，必须包含字母、数字和特殊字符：

/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()\-_=+\\\|\[\]{};:'",<.>\/?]).{8,}$/

示例代码：

function isStrongPassword(password) {
  const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()\-_=+\\\|\[\]{};:'",<.>\/?]).{8,}$/;
  return passwordPattern.test(password);
}

console.log(isStrongPassword("StrongPassword123!")); // 输出 true
console.log(isStrongPassword("weakpassword")); // 输出 false

4.提取URL中的参数

我们可以使用正则表达式轻松地从URL中提取参数。以下是一个从URL中提取参数的简单示例：

function getQueryParam(url, name) {
  const queryPattern = new RegExp(`[?&]${name}=([^&]+)`);
  const match = url.match(queryPattern);
  return match ? match[1] : null;
}

console.log(getQueryParam("https://www.example.com/?q=javascript", "q")); // 输出 "javascript"

5.移除HTML标签

如果我们需要从HTML文本中提取纯文本内容，可以使用正则表达式来移除HTML标签。以下是一个简单的示例：

function stripTags(html) {
  const tagPattern = /<[^>]+>/g;
  return html.replace(tagPattern, "");
}

console.log(stripTags("<p>This is <b>bold</b> text.</p>")); // 输出 "This is bold text."

6.检测字符串中是否包含子字符串

我们可以使用正则表达式来检测一个字符串中是否包含某个子字符串。以下是一个检测字符串中是否包含某个子字符串的示例：

function containsSubstring(str, subStr) {
  const subStrPattern = new RegExp(subStr);
  return subStrPattern.test(str);
}

console.log(containsSubstring("hello world", "world")); // 输出 true
console.log(containsSubstring("hello world", "mars")); // 输出 false

7.检测字符串是否以特定字符串开头或结尾

我们可以使用正则表达式来检测一个字符串是否以特定字符串开头或结尾。以下是一个检测字符串是否以特定字符串开头或结尾的示例：

function startsWith(str, prefix) {
  const prefixPattern = new RegExp(`^${prefix}`);
  return prefixPattern.test(str);
}

function endsWith(str, suffix) {
  const suffixPattern = new RegExp(`${suffix}$`);
  return suffixPattern.test(str);
}

console.log(startsWith("hello world", "hello")); // 输出 true
console.log(endsWith("hello world", "world")); // 输出 true

8.匹配IP地址

我们可以使用正则表达式来匹配IP地址。以下是一个匹配IP地址的示例：

function isValidIPAddress(ipAddress) {
  const ipPattern = /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/;
  return ipPattern.test(ipAddress);
}

console.log(isValidIPAddress("192.168.0.1")); // 输出 true
console.log(isValidIPAddress("invalid_ip_address")); // 输出 false

9.匹配HTML颜色值

我们可以使用正则表达式来匹配HTML颜色值。以下是一个匹配HTML颜色值的示例：

function isValidColorValue(colorValue) {
  const colorPattern = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
  return colorPattern.test(colorValue);
}

console.log(isValidColorValue("#fff")); // 输出 true
console.log(isValidColorValue("#123abc")); // 输出 true
console.log(isValidColorValue("invalid_color")); // 输出 false

10.匹配邮政编码

我们可以使用正则表达式来匹配邮政编码。以下是一个匹配邮政编码的示例：

function isValidZipCode(zipCode) {
  const zipCodePattern = /^\d{5}(?:[-\s]\d{4})?$/;
  return zipCodePattern.test(zipCode);
}

console.log(isValidZipCode("12345")); // 输出 true
console.log(isValidZipCode("12345-6789")); // 输出 true
console.log(isValidZipCode("invalid_zip_code")); // 输出 false

11.匹配日期

我们可以使用正则表达式来匹配日期。以下是一个匹配日期的示例：

function isValidDate(dateString) {
  const datePattern = /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.) (?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1 6|[2-9]\d)(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468] [048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/;
  return datePattern.test(dateString);
}

console.log(isValidDate("01/01/2022")); // 输出 true
console.log(isValidDate("2022-01-01")); // 输出 true
console.log(isValidDate("invalid_date")); // 输出 false

12.替换字符串中的内容

我们可以使用正则表达式来替换字符串中的内容。以下是一个替换字符串中的内容的示例：

function replaceString(str, pattern, replacement) {
  const regex = new RegExp(pattern, "g");
  return str.replace(regex, replacement);
}

console.log(replaceString("hello world", "world", "mars")); // 输出 "hello mars"

13.提取字符串中的数字

我们可以使用正则表达式轻松地从字符串中提取数字。以下是一个提取字符串中的数字的示例：

function getNumbersFromString(str) {
  const numberPattern = /\d+/g;
  return str.match(numberPattern);
}

console.log(getNumbersFromString("JavaScript123")); // 输出 ["123"]

14.提取字符串中的所有单词

我们可以使用正则表达式轻松地从字符串中提取所有单词。以下是一个提取字符串中的所有单词的示例：

function getWordsFromString(str) {
  const wordPattern = /\w+/g;
  return str.match(wordPattern);
}

console.log(getWordsFromString("Hello, world!")); // 输出 ["Hello", "world"]

15.计算字符串中出现的单词数

我们可以使用正则表达式轻松地计算字符串中出现的单词数。以下是一个计算字符串中出现的单词数的示例：

function countWords(str) {
  const wordPattern = /\b\w+\b/g;
  return (str.match(wordPattern) || []).length;
}

console.log(countWords("Hello, world!")); // 输出 2

以上是15个经典的JavaScript前端正则表达式使用场景的总结。在实践中灵活应用这些技巧，能够为你的日常开发工作带来很大的便利。