🤔️你们开发时候，会使用正则表达式解决问题吗？续集

在上篇文章中，介绍一些正则表达式在开发中的用处--字符串转换。主要内容有千分号，电话号码划分，电子邮件名称获取等等。主要思想是匹配特征字符串，然后用replace对匹配的字符串做转换。

这篇文章接着上篇，更新关于字符串位置颠倒、json转TS类型，大小驼峰的转换，HTML模版替换的内容

下面继续

字符串位置颠倒

const regex = /(\w*)\s+(\w*)/; 
const result = "foo bar".replace(regex, "$2 $1"); // bar foo

解释：

1. const regex = /(\w*)\s+(\w*)/;：这一行创建了一个正则表达式对象 regex

• (\w*)：这是一个捕获组，用来匹配零个或多个单词字符（字母、数字或下划线）并捕获到第一个组中。
• \s+：这个部分匹配一个或多个空格字符。
• (\w*)：这又是一个捕获组，用来匹配零个或多个单词字符并捕获到第二个组中。

所以，这个正则表达式的目标是匹配两个单词，并将它们分别捕获到两个组中。

1. const result = "foo bar".replace(regex, "$2 $1");：这一行使用 replace 方法来替换匹配到的文本。具体地说：

• "foo bar" 是要被替换的字符串。
• regex 是我们之前定义的正则表达式。
• "$2 $1" 是替换的模式，其中 $2 表示第二个捕获组的内容，$1 表示第一个捕获组的内容。因此，它将匹配到的文本中的第一个单词和第二个单词互换了位置。

结果是 "foo bar" 被替换为 "bar foo"，因为第一个单词 "foo" 被捕获到第一个组中，而第二个单词 "bar" 被捕获到第二个组中，然后它们被互换了位置。

大驼峰变中横线

const regex = /[A-Z]/g
const result = 'CamelCase'.replace(regex, (match, offset)=>{
  return offset > 0 ? '-' : '' + match.toLowerCase();
}) // camel case

解释 这段 JavaScript 代码目标是将驼峰命名法（CamelCase）转换为连字符命名法（kebab-case）

1. const regex = /[A-Z]/g;：这一行创建了一个正则表达式对象 regex。正则表达式的模式是 [A-Z]，它匹配任何大写字母 A 到 Z。g 修饰符表示全局匹配，会匹配字符串中的所有符合条件的大写字母。
2. const result = 'CamelCase'.replace(regex, (match, offset) => {...});：这一行使用 replace 方法来替换匹配到的文本。具体地说：

• 'CamelCase' 是要被替换的字符串。
• regex 是我们之前定义的正则表达式。
• replace 方法接受一个回调函数作为第二个参数，这个函数会在每次匹配到的文本都被调用一次。

1. 回调函数 (match, offset) => {...}：这是一个回调函数，用于处理每次匹配到的文本。回调函数有两个参数：

• match：匹配到的文本，即大写字母。
• offset：匹配文本的起始偏移位置。

在回调函数内部的逻辑是，如果 offset 大于 0（表示不是第一个匹配的大写字母），则返回一个连字符 '-'，否则返回大写字母的小写形式 match.toLowerCase()。

最终，'CamelCase' 中的大写字母被替换为连字符 '-'，并且转换为小写形式，得到了结果 'camel-case'。

大驼峰变小驼峰

const regex = /[A-Z]/g
const result = 'CamelCase'.replace(regex,(match,offset)=>{
  return offset===0 ? match.toLowerCase() : match;
}) // camelCase

解释： 这段 JavaScript 代码也使用正则表达式来处理驼峰命名法（CamelCase），但与之前的代码稍有不同

1. const regex = /[A-Z]/g;：这一行创建了一个正则表达式对象 regex。正则表达式的模式是 [A-Z]，它匹配任何大写字母 A 到 Z。g 修饰符表示全局匹配，会匹配字符串中的所有符合条件的大写字母。

2. const result = 'CamelCase'.replace(regex, (match, offset) => {...});：这一行使用 replace 方法来替换匹配到的文本。具体地说：

• 'CamelCase' 是要被替换的字符串。
• regex 是我们之前定义的正则表达式。
• replace 方法接受一个回调函数作为第二个参数，这个函数会在每次匹配到的文本都被调用一次。

1. 回调函数 (match, offset) => {...}：这是一个回调函数，用于处理每次匹配到的文本。回调函数有两个参数：

• match：匹配到的文本，即大写字母。
• offset：匹配文本的起始偏移位置。

在回调函数内部的逻辑是，如果 offset 等于 0（表示第一个匹配的大写字母），则返回大写字母的小写形式 match.toLowerCase()，否则返回原始的大写字母 match。

最终，'CamelCase' 中的第一个大写字母被转换为小写形式，得到了结果 'camelCase'，而后续的大写字母保持不变。

Json转TS类型

这是一个常见的需求，通常会通过后端给的数据样例，生成前端使用的TS类型

//data.json
{
  "name": "zenos",
  "age": 19,
  "isLikeRed": false,
  "weight": null,
  "date": [
    {
      "year": 2021,
      "month": 11
    },
    {
      "year": 2021,
      "month": 11
    }
  ],
  "food": ["food1", "food2", "food2"],
  "score": [99, 98, 89]
}

const regex = /(?<=:(\s*))([^\s,]*)(?=(,?\n))/g;

const result = jsonStr.replace(regex, (match) => {
        if (/^\{$/.test(match)) return match;
        if (/^\[$/.test(match)) return match;
        if (/^\d+$/.test(match)) return "number";
        if (/^(false|true)$/.test(match)) return "boolean";
        if (/^null$/.test(match)) return null;

        return "string";
})
/**
{
  "name": string,
  "age": number,
  "isLikeRed": boolean,
  "weight": null,
  "date": [
    {
      "year": number,
      "month": number
    },
    {
      "year": number,
      "month": number
    }
  ],
  "food": [
    "food1",
    "food2",
    "food2"
  ],
  "score": [
    99,
    98,
    89
  ]
}
*/

解释：

这段 JavaScript 代码的目标是将一个 JSON 字符串中的值的类型替换为对应的typescript数据类型

1. const regex = /(?<=:(\s*))([^\s^,]*)(?=(,?\n))/g;：这一行创建了一个正则表达式对象 regex。正则表达式的模式会匹配 JSON 字符串中的值，包括对象的属性和属性值。具体来说：

   • (?<=:(\s*))：这是一个正向后瞻（lookbehind），它匹配一个冒号后面的零个或多个空格字符，并将这部分作为匹配的一部分，但不包括在匹配结果中。
   • ([^\s^,]*)：这是一个捕获组，它匹配零个或多个非空格和非逗号的字符，也就是属性值的内容，并将其捕获到捕获组中。
   • (?=(,?\n))：这是一个正向前瞻（lookahead），它匹配一个可选的逗号后面的零个或一个换行符，并将这部分作为匹配的一部分，但不包括在匹配结果中。这部分用来处理 JSON 对象中的最后一个属性值。

2. const result = jsonStr.replace(regex, (match) => {...});：这一行使用 replace 方法来替换匹配到的文本。具体来说：

   • jsonStr 是包含 JSON 数据的字符串。

   • regex 是我们之前定义的正则表达式。

   • replace 方法接受一个回调函数作为第二个参数，这个函数会在每次匹配到的文本都被调用一次。

3. 回调函数 (match) => {...}：这是一个回调函数，用于处理每次匹配到的文本。在函数内部，它使用一系列正则表达式来检查匹配到的文本，并根据不同的条件返回对应的数据类型或值：

   • 如果匹配到 {，表示对象的开始，返回原始的 {。
   • 如果匹配到数字（通过 /^\d+$/ 正则表达式检查），返回 "number" 。
   • 如果匹配到 "false" 或 "true"，返回 "boolean" 。
   • 如果匹配到 "null"，返回 null
   • 如果匹配到 [，返回原始的[。
   • 否则，返回 "string" 。

这里只支持基础类型，不支持函数, 也不支持数组内的基本数据类型。算是一个瑕疵吧。你们有更好的办法吗，可以在评论区留言

日期处理

常见的需求，日期格式的转换。如果不用正则表达式，你们会怎么做呢？

const date = '2021年11月12日'; //11122021
const regex = /(\d{4})年(\d{2})月(\d{2})日$/;
const result = date.replace(regex, (match,$1,$2,$3)=>{
  return $2 + $1 + $3
})

解释： 这段代码的目标是将表示日期的字符串从 "YYYY年MM月DD日" 的格式转换为 "MMDDYYYY" 的格式

1. const regex = /(\d{4})年(\d{2})月(\d{2})日$/;：这一行创建了一个正则表达式对象 regex。正则表达式的模式 (\d{4})年(\d{2})月(\d{2})日$ 用来匹配日期字符串的格式。具体来说：

• (\d{4})：这是一个捕获组，匹配四位数字（年份）并将其捕获到 $1 变量中。
• 年、月、日：这些字符用于匹配日期字符串中的文本。
• (\d{2})：这是两个捕获组，分别匹配两位数字（月份和日期），并将它们分别捕获到 $2 和 $3 变量中。
• $：表示匹配必须出现在字符串的末尾。

1. const result = date.replace(regex, (match, $1, $2, $3) => {...});：这一行使用 replace 方法来执行字符串替换。具体来说：

   • date 是包含日期字符串的变量。
   • regex 是我们之前定义的正则表达式。
   • replace 方法接受一个回调函数作为第二个参数，该函数在匹配到的文本被替换时调用。

2. 回调函数 (match, $1, $2, $3) => {...}：这是一个回调函数，用于处理匹配到的文本。它接受四个参数：

• match：匹配到的整个文本，即整个日期字符串。
• $1：第一个捕获组，包含年份。
• $2：第二个捕获组，包含月份。
• $3：第三个捕获组，包含日期。

在回调函数内部的逻辑是，将年份 $1、月份 $2 和日期 $3 组合成新的字符串，以 "MMDDYYYY" 的格式返回。最终，日期字符串 '2021年11月12日' 被成功转换为 '11122021' 的格式，并存储在 result 变量中。

HTML模版替换

类似于Vue中模版变量替换

<div>
  <div>{{name}}</div>
  <div>{{age}}</div>
</div>

const data = {
  name: 'mankongfu',
  age: 22
};

const regex = /\{\{([\w\d]+)\}\}/g;
const htmlStr = `
          <div>
            <div>{{name}}</div>
            <div>{{age}}</div>
          </div>
          `
const result = htmlStr.replace(regex, (match,$1)=>{
  return data[$1]
})

结果： 解释： 这段代码的目标是在 HTML 字符串中查找并替换模板标记 {{name}} 和 {{age}}，将它们替换为 data 对象中相应属性的值

1. const regex = /\{\{([\w\d]+)\}\}/g;：这一行创建了一个正则表达式对象 regex，用于匹配模板标记 {{...}}。具体来说：

• \{\{ 和 \}\}：这些是转义的大括号，用于匹配实际的大括号字符 {}。
• ([\w\d]+)：这是一个捕获组，用于匹配一个或多个单词字符或数字字符，表示属性名。捕获组内的内容将被捕获到 $1 变量中。
• g 修饰符表示全局匹配，会匹配字符串中的所有匹配项。

1. const htmlStr = ...：这一部分定义了包含 HTML 内容的字符串 htmlStr，其中包含了模板标记 {{name}} 和 {{age}}。

2. const result = htmlStr.replace(regex, (match, $1) => {...});：这一行使用 replace 方法来执行字符串替换。具体来说：

• htmlStr 是包含 HTML 内容的字符串。
• regex 是我们之前定义的正则表达式。
• replace 方法接受一个回调函数作为第二个参数，该函数在匹配到的文本被替换时调用。

1. 回调函数 (match, $1) => {...}：这是一个回调函数，用于处理匹配到的文本。它接受两个参数：

• match：匹配到的整个文本，即模板标记 {{...}}。
• $1：第一个捕获组，包含属性名。

在回调函数内部的逻辑是，通过 $1 获取属性名，然后从 data 对象中检索相应的属性值，并返回该属性值作为替换结果。最终，HTML 字符串中的 {{name}} 和 {{age}} 被成功替换为 data 对象中的属性值，得到了最终的结果。

总结

这篇文章主要讲了关于字符串位置颠倒、json转TS类型，大小驼峰的转换，HTML模版替换的内容。解释得十分详细。

每个例子的字符串格式都是会变化，大家可以根据自己的项目需求对正则表达式进行微调。不过条条大路通罗马，解决问题的方法有很多种，算是给大家一个解决问题的思路。