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

慢功夫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模版替换的内容。解释得十分详细。

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

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

相关推荐
GDAL7 分钟前
vue3入门教程：ref能否完全替代reactive？
前端·javascript·vue.js
小马哥编程2 小时前
Function.prototype和Object.prototype 的区别
javascript
王小王和他的小伙伴3 小时前
解决 vue3 中 echarts图表在el-dialog中显示问题
javascript·vue.js·echarts
学前端的小朱3 小时前
处理字体图标、js、html及其他资源
开发语言·javascript·webpack·html·打包工具
outstanding木槿3 小时前
react+antd的Table组件编辑单元格
前端·javascript·react.js·前端框架
好名字08213 小时前
前端取Content-Disposition中的filename字段与解码(vue)
前端·javascript·vue.js·前端框架
摇光933 小时前
js高阶-async与事件循环
开发语言·javascript·事件循环·宏任务·微任务
胡西风_foxww4 小时前
【ES6复习笔记】Class类（15）
javascript·笔记·es6·继承·类·class·静态成员
布兰妮甜4 小时前
使用 WebRTC 进行实时通信
javascript·webrtc·实时通信
艾斯特_4 小时前
JavaScript甘特图 dhtmlx-gantt
前端·javascript·甘特图
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）