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

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

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

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

相关推荐
八了个戒6 小时前
「数据可视化 D3系列」入门第三章：深入理解 Update-Enter-Exit 模式
开发语言·前端·javascript·数据可视化
胚芽鞘6817 小时前
vue + element-plus自定义表单验证（修改密码业务）
javascript·vue.js·elementui
小陈同学呦7 小时前
聊聊双列瀑布流
前端·javascript·面试
键指江湖8 小时前
React 在组件间共享状态
前端·javascript·react.js
烛阴8 小时前
零基础必看！Express 项目 .env 配置，开发、测试、生产环境轻松搞定！
javascript·后端·express
诸葛亮的芭蕉扇8 小时前
D3路网图技术文档
前端·javascript·vue.js·microsoft
徐小夕8 小时前
花了2个月时间研究了市面上的4款开源表格组件，崩溃了，决定自己写一款
前端·javascript·react.js
拉不动的猪9 小时前
UniApp金融理财产品项目简单介绍
前端·javascript·面试
苏卫苏卫苏卫9 小时前
【Vue】案例——To do list：
开发语言·前端·javascript·vue.js·笔记·list
聪明的墨菲特i10 小时前
React与Vue：哪个框架更适合入门？
开发语言·前端·javascript·vue.js·react.js
热门推荐
01我决定放弃搞 Java 了02RAG 实践- Ollama+RagFlow 部署本地知识库03DeepSeek各版本说明与优缺点分析04Mogao=Seedream 3.0？霸榜数天，神秘文生图模型曝光（附技术报告）05DeepSeek RAGFlow构建本地知识库系统06如何在WPS和Word/Excel中直接使用DeepSeek功能07第 9 关 | 心有灵犀的二分查找与中序遍历：1.青铜挑战——逢试必考的二分查找08汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10一键私有化部署Dify，轻松搞定 AI 智能客服机器人