15 个正则表达式，真实项目应用场景必备

TIP

正则表达式是很多前端开发的同学痛点，虽然学习了 ！ 但在真正遇到项目中实际的需求是基本都是一头雾水，然后就开始在网络上各种找代码，结果找不到符合需求的就很痛苦。接下来就可以拿来即用了。

本笔记，通过 ES6 封装了 15 个正则表达式真实项目应用场景，希望对前端开发的同学有帮助。

1、千分位格式化

TIP

在项目中经常碰到关于货币金额的页面显示，为了让金额的显示更为人性化与规范化，需要加入货币格式化策略。也就是所谓的数字千分位格式化。

123456789 => 123,456,789

123456789.123 => 123,456,789.123

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'

2、解析链接参数

TIP

你一定常常遇到这样的需求，要拿到 url 的参数的值，像这样：

// url <https://xxx.com/index.html?name=jack&age=100>
const name = getQueryByName("name"); // jack
const age = getQueryByName("age"); // 100

通过正则，简单就能实现 getQueryByName 函数：

const getQueryByName = (name) => {
  const queryNameRegex = new RegExp(`[?&]${name}=([^&]*)(&|$)`);
  const queryNameMatch = window.location.search.match(queryNameRegex);
  // 通常，它将由decodeURIComponent解码
  return queryNameMatch ? decodeURIComponent(queryNameMatch[1]) : "";
};

const name = getQueryByName("name");
const age = getQueryByName("age");

console.log(name, age); // jack, 100

3、驼峰字符串

TIP

JS 变量最佳是驼峰风格的写法，怎样将类似以下的其它声明风格写法转化为驼峰写法？

foo Bar => fooBar

foo-bar---- => fooBar

foo_bar__ => fooBar

正则表达式分分钟教做人（统一转换成驼峰命名）：

const camelCase = (string) => {
  const camelCaseRegex = /[-_\s]+(.)?/g;
  return string.replace(camelCaseRegex, (match, char) => {
    return char ? char.toUpperCase() : "";
  });
};

console.log(camelCase("foo Bar")); // fooBar
console.log(camelCase("foo-bar--")); // fooBar
console.log(camelCase("foo_bar__")); // fooBar

4、小写转大写

TIP

这个需求常见，无需多言，用就完事儿啦：

const capitalize = (string) => {
  const capitalizeRegex = /(?:^|\s+)\w/g;
  return string
    .toLowerCase()
    .replace(capitalizeRegex, (match) => match.toUpperCase());
};

console.log(capitalize("hello world")); // Hello World
console.log(capitalize("hello WORLD")); // Hello World

5、实现 trim() ，删除字符串的头尾空白符

TIP

trim() 方法用于删除字符串的头尾空白符，用正则可以模拟实现 trim：

const trim1 = (str) => {
  return str.replace(/^\s*|\s*$/g, ""); // 或者 str.replace(/^\s*(.*?)\s*$/g, '$1')
};

const string = "   hello jack   ";
const noSpaceString = "hello jack";
const trimString = trim1(string);

console.log(string);
console.log(trimString, trimString === noSpaceString); // hello jack true
console.log(string);

trim() 方法不会改变原始字符串，同样，自定义实现的 trim1 也不会改变原始字符串；

6、HTML 转义

TIP

防止 XSS 攻击的方法之一是进行 HTML 转义，符号对应的转义字符，正则处理如下：

const escape = (string) => {
  const escapeMaps = {
    "&": "amp",
    "<": "lt",
    ">": "gt",
    '"': "quot",
    "'": "#39",
  };
  // 此处的效果与 /[&amp;；<>“']/g 的效果相同
  const escapeRegexp = new RegExp(`[${Object.keys(escapeMaps).join("")}]`, "g");
  return string.replace(escapeRegexp, (match) => `&${escapeMaps[match]};`);
};

console.log(
  escape(`
  <div>
    <p>hello world</p>
  </div>
`)
);
/*
&lt;div&gt;
  &lt;p&gt;hello world&lt;/p&gt;
&lt;/div&gt;
*/

7、HTML 反转义

TIP

有了正向的转义，就有反向的逆转义，操作如下：

const unescape = (string) => {
  const unescapeMaps = {
    amp: "&",
    lt: "<",
    gt: ">",
    quot: '"',
    "#39": "'",
  };
  const unescapeRegexp = /&([^;]+);/g;
  return string.replace(unescapeRegexp, (match, unescapeKey) => {
    return unescapeMaps[unescapeKey] || match;
  });
};

console.log(
  unescape(`
  &lt;div&gt;
    &lt;p&gt;hello world&lt;/p&gt;
  &lt;/div&gt;
`)
);
/*
<div>
  <p>hello world</p>
</div>
*/

8、校验 24 小时制

TIP

处理时间，经常要用到正则，比如常见的：校验时间格式是否是合法的 24 小时制：

const check24TimeRegexp = /^(?:(?:0?|1)\d|2[0-3]):(?:0?|[1-5])\d$/;
console.log(check24TimeRegexp.test("01:14")); // true
console.log(check24TimeRegexp.test("23:59")); // true
console.log(check24TimeRegexp.test("23:60")); // false
console.log(check24TimeRegexp.test("1:14")); // true
console.log(check24TimeRegexp.test("1:1")); // true

9、校验日期格式

TIP

常见的日期格式有：yyyy-mm-dd, yyyy.mm.dd, yyyy/mm/dd 这 3 种，如果有符号乱用的情况，比如 2022.06/27，这样就不是合法的日期格式，我们可以通过正则来校验判断：

const checkDateRegexp =
  /^\d{4}([-\.\/])(?:0[1-9]|1[0-2])\1(?:0[1-9]|[12]\d|3[01])$/;

console.log(checkDateRegexp.test("2022-06-27")); // true
console.log(checkDateRegexp.test("2022/06/27")); // true
console.log(checkDateRegexp.test("2022.06.27")); // true
console.log(checkDateRegexp.test("2022.06/27")); // false
console.log(checkDateRegexp.test("2022/06-27")); // false

10、匹配颜色值

TIP

在字符串内匹配出 16 进制的颜色值：

const matchColorRegex = /#(?:[\da-fA-F]{6}|[\da-fA-F]{3})/g;
const colorString = "#12f3a1 #ffBabd #FFF #123 #586";

console.log(colorString.match(matchColorRegex));
// [ '#12f3a1', '#ffBabd', '#FFF', '#123', '#586' ]

11、判断 HTTPS/HTTP

TIP

这个需求也是很常见的，判断请求协议是否是 HTTPS/HTTP

const checkProtocol = /^https?:/;

console.log(checkProtocol.test("https://xxx.com/")); // true
console.log(checkProtocol.test("http://xxx.com/")); // true
console.log(checkProtocol.test("//xxx.com/")); // false

12、校验版本号

TIP

版本号必须采用 x.y.z 格式，其中 XYZ 至少为一位，我们可以用正则来校验：

// x.y.z
const versionRegexp = /^(?:\d+\.){2}\d+$/;

console.log(versionRegexp.test("1.1.1"));
console.log(versionRegexp.test("1.000.1"));
console.log(versionRegexp.test("1.000.1.1"));

13、获取网页 img 地址

TIP

这个需求可能爬虫用的比较多，用正则获取当前网页所有图片的地址。在控制台打印试试，太好用了~~

const matchImgs = (sHtml) => {
  const imgUrlRegex = /<img[^>]+src="((?:https?:)?\/\/[^"]+)"[^>]*?>/gi;
  let matchImgUrls = [];

  sHtml.replace(imgUrlRegex, (match, $1) => {
    $1 && matchImgUrls.push($1);
  });
  return matchImgUrls;
};

console.log(matchImgs(document.body.innerHTML));

14、格式化电话号码

TIP

这个需求很常见，拿来即用：

let mobile = "13145678910";
let mobileReg = /(?=(\d{4})+$)/g;

console.log(mobile.replace(mobileReg, "-")); // 131-4567-8910