20个你应该掌握的强大而有用的正则表达式

news2024/12/25 0:45:14

关注“大前端私房菜”微信公众号，回复暗号【面试宝典】即可免费领取107页前端面试题。

正则表达式是一种很强大的字符串模式匹配工具。掌握常见的正则表达式可以大大提高我们在字符串操作和文本处理上的效率。

1.货币格式化

我经常需要在工作中使用到格式化的货币，使用正则表达式让这变得非常简单。

const formatPrice = (price) => {
  const regexp = new RegExp(`(?!^)(?=(\\d{3})+${price.includes('.') ? '\\.' : '$'})`, 'g') 
  return price.replace(regexp, ',')
}

formatPrice('123') // 123
formatPrice('1234') // 1,234
formatPrice('123456') // 123,456
formatPrice('123456789') // 123,456,789
formatPrice('123456789.123') // 123,456,789.123

你还有什么其他的方法吗？使用 Intl.NumberFormat 是我最喜欢的方式。

const format = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
})

console.log(format.format(123456789.123)) // $123,456,789.12

修复它的方法不止一种！我有另一种方式让我感到快乐。

const amount = 1234567.89
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })

console.log(formatter.format(amount)) // $1,234,567.89

我为什么要学习正则表达式？看起来好复杂！我失去了信心。

请放轻松，我的朋友，您会看到正则表达式的魔力。

2.去除字符串空格的两种方法

如果我想从字符串中删除前导和尾随空格，我该怎么办？

console.log('   medium   '.trim())

这很简单，对吧？当然，使用正则表达式，我们至少有两种方法可以搞定。

方案一

const trim = (str) => {
  return str.replace(/^\s*|\s*$/g, '')    
}

trim('  medium ') // 'medium'

方案2

const trim = (str) => {
  return str.replace(/^\s*(.*?)\s*$/g, '$1')    
}

trim('  medium ') // 'medium'

3. 转义 HTML

防止 XSS 攻击的方法之一是进行 HTML 转义。转义规则如下，需要将对应的字符转换成等价的实体。而反转义就是将转义的实体转化为对应的字符

const escape = (string) => {
  const escapeMaps = {
    '&': 'amp',
    '<': 'lt',
    '>': 'gt',
    '"': 'quot',
    "'": '#39'
  }
  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;
*/

4. 未转义的 HTML

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>
*/

5.驼峰化一个字符串

如下规则：把对应的字符串变成驼峰的写法

1. foo Bar => fooBar
2. foo-bar---- => fooBar
3. 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

 

6.将字符串首字母转为大写，其余转为小写

例如，“hello world”转换为“Hello World”

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

7、获取网页所有图片标签的图片地址

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

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

  return matchImgUrls
}
matchImgs(document.body.innerHTML)

8、通过名称获取url查询参数

const getQueryByName = (name) => {
  const queryNameRegex = new RegExp(`[?&]${name}=([^&]*)(?:&|$)`)
  const queryNameMatch = window.location.search.match(queryNameRegex)
  // Generally, it will be decoded by decodeURIComponent
  return queryNameMatch ? decodeURIComponent(queryNameMatch[1]) : ''
}
// 1. name in front
// https://medium.com/?name=fatfish&sex=boy
console.log(getQueryByName('name')) // fatfish
// 2. name at the end
// https://medium.com//?sex=boy&name=fatfish
console.log(getQueryByName('name')) // fatfish
// 2. name in the middle
// https://medium.com//?sex=boy&name=fatfish&age=100
console.log(getQueryByName('name')) // fatfish

9、匹配24小时制时间

判断时间是否符合24小时制。 

匹配规则如下：

  • 01:14

  • 1:14

  • 1:1

  • 23:59

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

10.匹配日期格式

要求是匹配下面的格式

  • yyyy-mm-dd

  • yyyy.mm.dd

  • yyyy/mm/dd

例如2021-08-22、2021.08.22、2021/08/22可以忽略闰年

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

console.log(checkDateRegexp.test('2021-08-22')) // true
console.log(checkDateRegexp.test('2021/08/22')) // true
console.log(checkDateRegexp.test('2021.08.22')) // true
console.log(checkDateRegexp.test('2021.08/22')) // false
console.log(checkDateRegexp.test('2021/08-22')) // false

11.匹配十六进制颜色值

请从字符串中匹配颜色值，如#ffbbad、#FFF 十六进制

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' ]

12、检查URL前缀是否正确

检查 URL 是否以 http 或 https 开头

const checkProtocol = /^https?:/

console.log(checkProtocol.test('https://juejin.cn/')) // true
console.log(checkProtocol.test('http://juejin.cn/')) // true
console.log(checkProtocol.test('//juejin.cn/')) // false

13.反串大小写

我们将反转字符串的大小写，例如，hello WORLD => HELLO world

const stringCaseReverseReg = /[a-z]/ig
const string = 'hello WORLD'

const string2 = string.replace(stringCaseReverseReg, (char) => {
  const upperStr = char.toUpperCase()
  return upperStr === char ? char.toLowerCase() : upperStr
})
console.log(string2) // HELLO world

14、windows下匹配文件夹和文件路径

const windowsPathRegex = /^[a-zA-Z]:\\(?:[^\\:*<>|"?\r\n/]+\\?)*(?:(?:[^\\:*<>|"?\r\n/]+)\.\w+)?$/console.log( windowsPathRegex.test("C:\\Documents\\Newsletters\\Summer2018.pdf") ) // true

console.log( windowsPathRegex.test("C:\\Documents\Newsletters\\") ) // true
console.log( windowsPathRegex.test("C:\\Documents\Newsletters") ) // true
console.log( windowsPathRegex.test("C:\\") ) // true

15.匹配id

请截取“<div id=”box”>hello world</div>”中的id

const matchIdRegexp = /id="([^"]*)"/

console.log(`
  <div id="box">
    hello world
  </div>
`.match(matchIdRegexp)[1]) // box

 

 

16.判断版本是否正确

我们要求版本为 X.Y.Z 格式，其中 XYZ 都是至少一位数的数字

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

console.log(versionRegexp.test('1.1.1')) // true
console.log(versionRegexp.test('1.000.1')) // true
console.log(versionRegexp.test('1.000.1.1')) // false

17.判断一个数是否为整数

const intRegex = /^[-+]?\d*$/

const num1 = 12345
console.log(intRegex.test(num1)) // true
const num2 = 12345.1
console.log(intRegex.test(num2)) // false

18.判断一个数是否为小数

const floatRegex = /^[-\+]?\d+(\.\d+)?$/

const num = 1234.5
console.log(floatRegex.test(num)) // true

19.判断一个字符串是否只包含字母

const letterRegex = /^[a-zA-Z]+$/

const letterStr1 = 'fatfish'
console.log(letterRegex.test(letterStr1)) // true
const letterStr2 = 'fatfish_frontend'
console.log(letterRegex.test(letterStr2)) // false

20.判断URL是否正确

const urlRegexp= /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;

console.log(urlRegexp.test("https://medium.com/")) // true

掌握这20个正则表达式,可以帮助我们快速完成常见的验证、替换、提取字符串的任务。结合编程语言,正则表达式是完成各种字符串操作的利器,值得我们投入时间精通和运用。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/663756.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

哈希及其哈希思想的应用

哈希及其哈希思想的应用

1. unordered 系列关联式容器 在 C98 中&#xff0c; STL 提供了底层为红黑树结构的一系列关联式容器&#xff0c;在查询时效率可达到 $log_2 N$ &#xff0c;即最差情况下需要比较红黑树的高度次&#xff0c;当树中的节点非常多时&#xff0c;查询效率也不理想。最好 的查询…
阅读更多...
Ubuntu20.04，samba服务器搭建。

Ubuntu20.04，samba服务器搭建。

0.前言 推荐个电视剧吧&#xff0c;百看不厌&#xff0c;《雍正王朝》。 这篇博客没什么技术含量&#xff0c;纯粹的表现一下我的勤劳。 1.Ubuntu 安装 终端输入 $ sudo apt install samba samba-common 配置需要共享的目录 # 新建目录&#xff08;自定义&#xff09;&am…
阅读更多...
CarFramework打造无缝用户体验：提升汽车信息娱乐和控制

CarFramework打造无缝用户体验：提升汽车信息娱乐和控制

CarFramework框架解析 CarFramework&#xff08;汽车框架&#xff09;是Android Automotive平台上的一个关键框架&#xff0c;它提供了专门针对车辆应用程序开发的功能和工具。CarFramework通过提供一组API和服务&#xff0c;简化了与车辆硬件和车辆特定功能的交互。 CarFram…
阅读更多...
被ChatGPT骗了！再用ChatGPT可要小心了。

被ChatGPT骗了！再用ChatGPT可要小心了。

被ChatGPT戏耍的周末 1. 被ChatGPT戏耍全过程2. 拆穿ChatGPT的把戏3. AIGC与内容安全 1. 被ChatGPT戏耍全过程 电动垂直起降飞行器&#xff08;eVTOL&#xff0c;Electric Vertical Takeoff and Landing&#xff09;技术越来越成熟&#xff0c;为了解下相关产品我周末打开了Cha…
阅读更多...
Android Java判断密码强度 强度显示

Android Java判断密码强度 强度显示

1&#xff0c;正则表达式 密码强度的正则表达式 public static final String WEAK_PATTERN "(^(?.*[0-9])(?.*[a-z])[0-9a-z]{6,18}$)|(^(?.*[0-9])(?.*[A-Z])[0-9A-Z]{6,18}$)";//全数字字母&#xff08;大/小&#xff09;public static final String MEDIUM_…
阅读更多...
61、基于51单片机无线蓝牙音乐喷泉控制系统设计(程序+原理图+PCB源文件+参考论文+参考PPT+元器件清单等)

61、基于51单片机无线蓝牙音乐喷泉控制系统设计(程序+原理图+PCB源文件+参考论文+参考PPT+元器件清单等)

方案选择 单片机的选择 方案一&#xff1a;AT89C52是美国ATMEL公司生产的低电压&#xff0c;高性能CMOS型8位单片机&#xff0c;器件采用ATMEL公司的高密度、非易失性存储技术生产&#xff0c;兼容标准MCS-51指令系统&#xff0c;片内置通用8位中央处理器(CPU)和Flash存储单元…
阅读更多...
MySql基础教程(一)：创建删除选择数据库

MySql基础教程(一)：创建删除选择数据库

MySql基础教程(一)&#xff1a;创建删除选择数据库 1、创建数据库 创建一个名为 CSDN 的数据库 CREATE DATABASE CSDN;执行成功&#xff0c;数据库CSDN创建成功。 2、删除数据库 删除名为 CSDN 的数据库 DROP DATABASE CSDN;执行成功&#xff0c;CSDN数据库删除成功。 3…
阅读更多...
【Java技术专题】「入门到精通系列教程」零基础带你认识网络请求工具鼻祖之HttpClient开发实战指南（执行请求篇）

【Java技术专题】「入门到精通系列教程」零基础带你认识网络请求工具鼻祖之HttpClient开发实战指南（执行请求篇）

零基础带你认识网络请求工具鼻祖之HttpClient开发实战指南 前言HttpClient的作用HttpClient可以实现什么&#xff1f;HttpClient无法实现什么&#xff1f; HttpClient的使用基础执行请求HTTP 请求查询字符串也可以从独立的参数中来生成 HTTP 响应HTTP 实体实体类型重复实体使用…
阅读更多...
重新审视长时间序列预测：关于线性映射的调查

重新审视长时间序列预测：关于线性映射的调查

摘要 近年来&#xff0c;长时间序列预测得到了极大的关注。虽然有各种专门的设计来捕捉时间依耐性&#xff0c;但以前的研究表明&#xff0c;与其他复杂的架构相比&#xff0c;单一的线性层可以实现有竞争力的预测性能。在本文中&#xff0c;我们彻底调查了最近提出的方法内在…
阅读更多...
微信小程序开发21__Echarts的应用

微信小程序开发21__Echarts的应用

Echarts 是一个使用JS实现的开源可视化库&#xff0c; 其官网是 https://echarts.apache.org . 它提供了常规的折线图、柱状图、散点图、饼图、K线图等&#xff0c; 还支持图与图之间的混搭。 Echarts 的微信小程序版本的Github为 https://github.com/ecomfe/echarts-for-…
阅读更多...
MySQL数据库日志管理、备份与恢复

MySQL数据库日志管理、备份与恢复

目录 一、MySQL 日志管理 二、数据备份的重要性 造成数据丢失的原因 三、数据库备份的分类 1 、从物理与逻辑的角度 &#xff08;1&#xff09;备份划分 &#xff08;2&#xff09; 物理备份方法 2、 从数据库的备份策略角度 四、常见的备份方法 1、物理冷备 2、专用备…
阅读更多...
天气热了，三叔请你吃瓜

天气热了，三叔请你吃瓜

目录 前言预备知识画一个完整的西瓜加些纹路切西瓜参考资料前言 六月份转眼就过去一半了，气温逐渐走高，每次经过小区门口的时候都会被那家水果店铺的吆喝声吸引住，“正宗南汇8424西瓜只要3元一斤啦”，每每都想冲进店里抱一个回来，可碍于囊中羞涩，只好作罢，晚餐过后闲暇…
阅读更多...
Postman | 一分钟掌握Pre-request Script | 外部库的使用

Postman | 一分钟掌握Pre-request Script | 外部库的使用

简介 Postman内部提供了13种外部库&#xff0c;可以直接在前置请求脚本和后置请求脚本中使用&#xff0c;如果需要其他外部库&#xff0c;只需要使用如下方式引入即可&#xff1a; require(moduleName:String):function → * 一些内部库使用的例子 postman可用的外部库官网列…
阅读更多...
[第一章 web入门]afr

[第一章 web入门]afr

afr_1 题目开头已经提示说是任意文件读取漏洞 所以这里还需要复习一下php伪协议php://filter 的作用 读取源代码并进行base64编码输出&#xff0c;不然传入的参数会直接当做php代码执行就看不到源代码内容了。php://filter即使在allow_url_fopen和allow_url_include双off情况下…
阅读更多...
Day21 实战篇——Jmeter接口测试之案例实战——添加线程组、添加HTTP请求、获取所有学生接口

Day21 实战篇——Jmeter接口测试之案例实战——添加线程组、添加HTTP请求、获取所有学生接口

Day21 实战篇——Jmeter接口测试之案例实战——添加线程组、添加HTTP请求、获取所有学生接口 文章目录 Day21 实战篇——Jmeter接口测试之案例实战——添加线程组、添加HTTP请求、获取所有学生接口1、添加线程组2、添加HTTP请求3、获取所有学生接口3.1 Jmeter察看结果树中乱码：…
阅读更多...
03_运行时数据区

03_运行时数据区

目录 一、概述二、线程1、JVM系统线程 一、概述 二、线程 1、JVM系统线程
阅读更多...
调用万维易源API实现天气预测

调用万维易源API实现天气预测

目录 1. 作者介绍2. 关于理论方面的知识介绍2.1 天气预测简介2.2 预测方法 3. 代码实现3.1 需要安装的包3.2 部分代码3.3 实验结果 1. 作者介绍 房庚晨&#xff0c;男&#xff0c;西安工程大学电子信息学院&#xff0c;22级研究生 研究方向&#xff1a;机器视觉与人工智能 电子…
阅读更多...
【数据库四】MySQL备份与恢复

【数据库四】MySQL备份与恢复

MySQL备份与恢复 1.数据库备份的分类1.1 数据备份的重要性1.2 数据库备份的分类1.3 常见的备份方法 2.MySQL完全备份与恢复2.1 MySQL完全备份2.2 数据库完全备份分类2.3 MySQL物理冷备份及恢复2.4 数据迁移DST2.5 mysqldump进行逻辑备份2.5.1 mysqldump备份数据库2.5.2 mysqldu…
阅读更多...
基于卡尔曼滤波进行四旋翼动力学建模（SimulinkMatlab）

基于卡尔曼滤波进行四旋翼动力学建模（SimulinkMatlab）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
下载routeview网站上的BGP更新数据

下载routeview网站上的BGP更新数据

需求 给出起始时间和终止时间&#xff0c;从routeview网站上&#xff0c;下载在这两者之间的所有数据到本机&#xff0c;以便于进行后续的分析工作。 例如&#xff1a;2022.2.23 - 2022.2.26 主要流程 主流程在遍历每个月中实现 当月份小于10时&#xff0c;前面加‘0’&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023