前端常用正则表达式

最新推荐文章于 2025-05-27 00:30:03 发布

原创最新推荐文章于 2025-05-27 00:30:03 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #正则表达式 #javascript

JS工具模块专栏收录该内容

4 篇文章

订阅专栏

这篇博客探讨了正则表达式在JavaScript中的常见用途，包括颜色值验证、URL匹配、邮箱格式检查、手机号码格式校验、身份证号码验证以及复杂密码规则设定。通过示例代码展示了如何使用正则进行测试、替换和匹配操作，并提供了提取HTML标签属性的实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

规则

/ $/ 结束
^ 以开头
\d 数字
？可以不存在

js用法

// test, 返回Boolean
/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/.test('#FFF')	// true
// replace
'11#FFF11#FFFFFF'.replace(/#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})/g,'替换后')		// '11替换后11替换后'
// match, 返回Array
`"The rain in SPAIN stays mainly in the plain"`.match(/ain/gi)	// ’ain,AIN,ain,ain‘

常用

16进制颜色

/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/

url

/^((https?):)?\/\/([^?:/]+)(:(\d+))?(\/[^?]*)?(\?(.*))?/

邮箱

^[A-Za-z0-9-_\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$

手机号

/^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/

身份证

/^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|10|11|12)(0[1-9]|[1-2]\d|30|31)\d{3}[\dX]$/

密码

/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*?])\S*$/

提取HTML

const str = `<div class="header-box" name="header">`
const mt = str.match(/<\w+\s*([^>]*)\s*>/)
// properties 即 属性字符串，即 class="header-box" name="header"
const properties = mt[1]
const mt1 = properties.match(/([^\s=]+)(=(["'])(.*?)\3)?/g)
const obj = {}
if (mt1) {
  mt1.forEach(p => {
    const kv = p.trim().split('=')
    obj[kv[0].trim()] = kv[1].trim().slice(1, -1)
  })
}
// obj => { class: 'header-box', name: 'header' }