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

慢功夫2023-09-10 12:57

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

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

下面继续

字符串位置颠倒

javascript 复制代码 
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" 被捕获到第二个组中，然后它们被互换了位置。

大驼峰变中横线

javascript 复制代码 
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'。

大驼峰变小驼峰

javascript 复制代码 
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类型

json 复制代码 
//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]
}
javascript 复制代码 
const regex = /(?<=:(\s*))([^\s,]*)(?=(,?\n))/g;

const result = jsonStr.replace(regex, (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;
  	if (/^\[$/.test(match)) return match;
		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" 。

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

日期处理

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

javascript 复制代码 
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中模版变量替换

html 复制代码 
<div>
  <div>{{name}}</div>
  <div>{{age}}</div>
</div>
javascript 复制代码 
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模版替换的内容。解释得十分详细。

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

上篇文章讲了千分号 ，电话号码划分 ，电子邮件名称获取的内容，有兴趣可以去看看

相关推荐
Martin -Tang2 小时前
Vue 3 中，ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心，方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
杀神lwz5 小时前
Java 正则表达式
java·mysql·正则表达式
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别？
前端·javascript·typescript·鸿蒙
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间（禁用日期面板、控制开始时间不能超过结束时间的时分秒）实现方案
前端·javascript·elementui
尝尝你的优乐美6 小时前
vue3.0中h函数的简单使用
前端·javascript·vue.js
windy1a7 小时前
【C语言】js写一个冒泡顺序
javascript
热门推荐
01聊聊 Python 中的同步原语，为什么有了 GIL 还需要同步原语02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03Windows10安装PCL1.14.0及点云配准04C++——超强级病毒代码05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07硬件预取之空间预取08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09Coze扣子平台完整体验和实践（附国内和国际版对比）10【SCS-CN】SCS-CN模型中CN值的确定