您当前的位置:首页 > 电脑百科 > 程序开发 > 算法

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

时间:2023-06-13 13:47:45  来源:微信公众号  作者:web前端开发
一起来了解下20 个你应该掌握的强大而有用的正则表达式都有哪些。

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>
`))
/*
<div>
  <p>hello world</p>
</div>
*/

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(`
  <div>
    <p>hello world</p>
  </div>
`))
/*
<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]:\(?:[^\:*<>|"?rn/]+\?)*(?:(?:[^\:*<>|"?rn/]+).w+)?$/console.log( windowsPathRegex.test("C:\Documents\Newsletters\Summer2018.pdf") ) // true

console.log( windowsPathRegex.test("C:\DocumentsNewsletters\") ) // true
console.log( windowsPathRegex.test("C:\DocumentsNewsletters") ) // 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个有关正则表达式的内容,希望对你有所帮助。



Tags:正则表达式   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
知道这些正则表达式,能让你少写1000行代码
校验密码强度 密码长度为8-16位 必须包含至少一个大写字母、一个小写字母和一个数字^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,16}$这个正则表达式的含义是: ^ 表示匹...【详细内容】
2023-11-30  Search: 正则表达式  点击:(163)  评论:(0)  加入收藏
Python正则表达式:高效处理文本数据的秘诀!
当谈到文本处理和搜索时,正则表达式是Python中一个强大且不可或缺的工具。正则表达式是一种用于搜索、匹配和处理文本的模式描述语言,可以在大量文本数据中快速而灵活地查找、...【详细内容】
2023-10-15  Search: 正则表达式  点击:(120)  评论:(0)  加入收藏
正则表达式进阶--玩转分组、前瞻和后顾
前言正则表达式是一种强大的模式匹配工具,可以用于在字符串中查找、替换和提取特定的文本。分组是一项非常重要的功能,它允许我们将模式进行分组,并在匹配过程中对分组进行操作...【详细内容】
2023-09-20  Search: 正则表达式  点击:(302)  评论:(0)  加入收藏
15 个常用的正则表达式技巧
你对正则表达式有何看法?我猜你会说这太晦涩难懂了,我对它根本不感兴趣。是的,我曾经和你一样,以为我这辈子都学不会了。但我们不能否认它确实很强大,我在工作中经常使用它,今天,我...【详细内容】
2023-09-05  Search: 正则表达式  点击:(270)  评论:(0)  加入收藏
20 个你应该掌握的强大而有用的正则表达式
一起来了解下20 个你应该掌握的强大而有用的正则表达式都有哪些。1.货币格式化我经常需要在工作中使用到格式化的货币,使用正则表达式让这变得非常简单。const formatPrice =...【详细内容】
2023-06-13  Search: 正则表达式  点击:(364)  评论:(0)  加入收藏
灾难性回溯:正则表达式如何导致ReDoS漏洞?
当用户需要搜索和替换文本时,正则表达式就会派上用场。然而,在某些情况下,它们可能会导致系统变慢,甚至容易受到ReDoS攻击。 ​简介​ReDoS是DoS攻击的一种子类型。ReDoS攻击的...【详细内容】
2023-03-28  Search: 正则表达式  点击:(183)  评论:(0)  加入收藏
正则表达式,这篇看完就够了
正则表达式是一种用于匹配文本模式的工具,它能够帮助我们在处理文本时更加高效地进行搜索、替换和验证操作。在本篇文章中,我将通过通俗易懂的语言让正则表达式不再苦涩难懂。...【详细内容】
2023-02-20  Search: 正则表达式  点击:(119)  评论:(0)  加入收藏
JavaScript正则表达式加密
JavaScript正则表达式加密正则表达式可以加密吗?是的,可以。起码可以确定的是在JavaScript编程中是可以的。正则表达式加密有什么用?可以隐藏一些重要的、私密的字符串内容,使代...【详细内容】
2022-11-27  Search: 正则表达式  点击:(276)  评论:(0)  加入收藏
Java正则表达式语法有哪些?
许多人在学习Java的过程中都会对Java正则表达式产生困惑,今天“好程序员”就将为大家解答如下问题:Java正则表达式是什么?Java正则表达式的规则有哪些?正则表达式语法有哪些?正则...【详细内容】
2022-11-01  Search: 正则表达式  点击:(337)  评论:(0)  加入收藏
算法:正则表达式匹配
请实现一个函数用来匹配包含&#39;. &#39;和&#39;*&#39;的正则表达式。模式中的字符&#39;.&#39;表示任意一个字符,而&#39;*&#39;表示它前面的字符可以出现任意次(含0次)。在本题...【详细内容】
2022-07-13  Search: 正则表达式  点击:(375)  评论:(0)  加入收藏
▌简易百科推荐
小红书、视频号、抖音流量算法解析,干货满满,值得一看!
咱们中国现在可不是一般的牛!网上的网友已经破了十个亿啦!到了这个互联网的新时代,谁有更多的人流量,谁就能赢得更多的掌声哦~抖音、小红书、、视频号,是很多品牌必争的流量洼地...【详细内容】
2024-02-23  二手车小胖说    Tags:流量算法   点击:(13)  评论:(0)  加入收藏
雪花算法详解与Java实现:分布式唯一ID生成原理
SnowFlake 算法,是 Twitter 开源的分布式 ID 生成算法。其核心思想就是:使用一个 64 bit 的 long 型的数字作为全局唯一 ID。在分布式系统中的应用十分广泛,且 ID 引入了时间戳...【详细内容】
2024-02-03   一安未来  微信公众号  Tags:雪花算法   点击:(50)  评论:(0)  加入收藏
程序开发中常用的十种算法,你用过几种?
当编写程序时,了解和使用不同的算法对解决问题至关重要。以下是C#中常用的10种算法,每个算法都伴随着示例代码和详细说明。1. 冒泡排序 (Bubble Sort):冒泡排序是一种简单的比...【详细内容】
2024-01-17  架构师老卢  今日头条  Tags:算法   点击:(44)  评论:(0)  加入收藏
百度推荐排序技术的思考与实践
本文将分享百度在推荐排序方面的思考与实践。在整个工业界的推广搜场景上,特征设计通常都是采用离散化的设计,需要保证两方面的效果,一方面是记忆,另一方面是泛化。特征都是通过...【详细内容】
2024-01-09  DataFunTalk  微信公众号  Tags:百度推荐   点击:(77)  评论:(0)  加入收藏
什么是布隆过滤器?如何实现布隆过滤器?
以下我们介绍了什么是布隆过滤器?它的使用场景和执行流程,以及在 Redis 中它的使用,那么问题来了,在日常开发中,也就是在 Java 开发中,我们又将如何操作布隆过滤器呢?布隆过滤器(Blo...【详细内容】
2024-01-05  Java中文社群  微信公众号  Tags:布隆过滤器   点击:(87)  评论:(0)  加入收藏
面向推荐系统的深度强化学习算法研究与应用
随着互联网的快速发展,推荐系统在各个领域中扮演着重要的角色。传统的推荐算法在面对大规模、复杂的数据时存在一定的局限性。为了解决这一问题,深度强化学习算法应运而生。本...【详细内容】
2024-01-04  数码小风向    Tags:算法   点击:(95)  评论:(0)  加入收藏
非负矩阵分解算法:从非负数据中提取主题、特征等信息
非负矩阵分解算法(Non-negativeMatrixFactorization,简称NMF)是一种常用的数据分析和特征提取方法,主要用于从非负数据中提取主题、特征等有意义的信息。本文将介绍非负矩阵分解...【详细内容】
2024-01-02  毛晓峰    Tags:算法   点击:(63)  评论:(0)  加入收藏
再谈前端算法,你这回明白了吗?
楔子 -- 青蛙跳台阶一只青蛙一次可以跳上一级台阶,也可以跳上二级台阶,求该青蛙跳上一个n级的台阶总共需要多少种跳法。分析: 当n=1的时候,①只需要跳一次即可;只有一种跳法,即f(...【详细内容】
2023-12-28  前端爱好者  微信公众号  Tags:前端算法   点击:(108)  评论:(0)  加入收藏
三分钟学习二分查找
二分查找是一种在有序数组中查找元素的算法,通过不断将搜索区域分成两半来实现。你可能在日常生活中已经不知不觉地使用了大脑里的二分查找。最常见的例子是在字典中查找一个...【详细内容】
2023-12-22  小技术君  微信公众号  Tags:二分查找   点击:(78)  评论:(0)  加入收藏
强化学习算法在资源调度与优化中的应用
随着云计算和大数据技术的快速发展,资源调度与优化成为了现代计算系统中的重要问题。传统的资源调度算法往往基于静态规则或启发式方法,无法适应动态变化的环境和复杂的任务需...【详细内容】
2023-12-14  职场小达人欢晓    Tags:算法   点击:(165)  评论:(0)  加入收藏
站内最新
站内热门
站内头条