自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

前端常用的 25 個(gè)正則表達(dá)式，代碼效率提高 80%

作者：前端之神
開發(fā)
在日常開發(fā)中，了解一些常用的正則表達(dá)式，能大大提高你的工作效率。今天就給大家分享25個(gè)開發(fā)中常用的正則表達(dá)式。

在日常開發(fā)中，正則表達(dá)式是非常有用的，正則表達(dá)式在每個(gè)語(yǔ)言中都是可以使用的，他就跟JSON一樣，是通用的。在日常開發(fā)中，了解一些常用的正則表達(dá)式，能大大提高你的工作效率，例如

  • 字符串的匹配
  • 表單項(xiàng)的格式校驗(yàn)

今天就給大家分享25個(gè)開發(fā)中常用的正則表達(dá)式吧?。?！希望大家能提高代碼效率！??！

1.手機(jī)號(hào)碼的校驗(yàn)

const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/

const phoneStr1 = '18886233487'
console.log(phoneReg.test(phoneStr1)) // true

const phoneStr2 = '17283017203897'
console.log(phoneReg.test(phoneStr2)) // false

2.身份證的校驗(yàn)

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

const sfzStr1 = '415106199801012130'
console.log(sfzReg.test(sfzStr1)) // true

const sfzStr2 = '718381298381212183'
console.log(sfzReg.test(sfzStr2)) // false

3.郵箱的校驗(yàn)

const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/

const emailStrWY = '956666@163.com' // 163郵箱
const emailStrQQ = '956666@qq.com' // qq郵箱
console.log(emailReg.test(emailStrWY)) // true
console.log(emailReg.test(emailStrQQ)) // true

const noEmail = '72873213.com'
console.log(emailReg.test(noEmail)) // false

4.URL的校驗(yàn)

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

const urlStr1 = 'https://haha.sunshine.com/xxx/xxx'
console.log(urlReg.test(urlStr1)) // true

const urlStr2 = 'sss://haha.sunshine.com/xxx/xxx'
console.log(urlReg.test(urlStr2)) // false

5.IPv4的校驗(yàn)

const ipv4Reg = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

const ipv4Str1 = '122.12.56.65'
console.log(ipv4Reg.test(ipv4Str1)) // true

const ipv4Str2 = '122.12.56.655'
console.log(ipv4Reg.test(ipv4Str2)) // false

6.16進(jìn)制顏色的校驗(yàn)

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

const color16Str1 = '#fff'
console.log(color16Reg.test(color16Str1)) // true

const color16Str2 = '#1234567'
console.log(color16Reg.test(color16Str2)) // false

7.日期 YYYY-MM-DD

const dateReg = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/

const dateStr1 = '2021-10-10'
console.log(dateReg.test(dateStr1)) // true

const dateStr2 = '2021-01-01 1'
console.log(dateReg.test(dateStr2)) // false

8.日期 YYYY-MM-DD hh:mm:ss

const dateReg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/

const dateStr1 = '2021-10-10 16:16:16'
console.log(dateReg.test(dateStr1)) // true

const dateStr2 = '2021-10-10 16:'
console.log(dateReg.test(dateStr2)) // false

9.整數(shù)的校驗(yàn)

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

const intNum1 = 12345
console.log(intReg.test(intNum1)) // true

const intNum2 = 12345.1
console.log(intReg.test(intNum2)) // false

10.小數(shù)的校驗(yàn)

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

const floatNum = 1234.5
console.log(floatReg.test(floatNum)) // true

11.保留n位小數(shù)

function checkFloat(n) {
  return new RegExp(`^([1-9]+[\d]*(.[0-9]{1,${n}})?)$`)
}
// 保留2位小數(shù)
const floatReg = checkFloat(2)

const floatNum1 = 1234.5
console.log(floatReg.test(floatNum1)) // true

const floatNum2 = 1234.55
console.log(floatReg.test(floatNum2)) // true

const floatNum3 = 1234.555
console.log(floatReg.test(floatNum3)) // false

12.郵政編號(hào)的校驗(yàn)

const postalNoReg = /^\d{6}$/

const postalNoStr1 = '522000'
console.log(postalNoReg.test(postalNoStr1)) // true

const postalNoStr2 = '5220000'
console.log(postalNoReg.test(postalNoStr2)) // false

13.QQ號(hào)的校驗(yàn)

說(shuō)明：5-11位數(shù)字

const qqReg = /^[1-9][0-9]{4,10}$/

const qqStr1 = '1915801633'
console.log(qqReg.test(qqStr1)) // true

const qqStr2 = '191580163333'
console.log(qqReg.test(qqStr2)) // false

14.微信號(hào)的校驗(yàn)

說(shuō)明：6至20位，以字母開頭，字母，數(shù)字，減號(hào)，下劃線

const wxReg = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/

const wxStr1 = 'linsanxin885577'
console.log(wxReg.test(wxStr1)) // true

const wxStr2 = '厲害了我的vx'
console.log(wxReg.test(wxStr2)) // false

15.車牌號(hào)的校驗(yàn)

const carNoReg = /^[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng)A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9掛學(xué)警港澳]{1}$/

const carNoStr1 = '粵A12345'
console.log(carNoReg.test(carNoStr1)) // true

const carNoStr2 = '廣東A12345'
console.log(carNoReg.test(carNoStr2)) // false

16.只含字母的字符串

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

const letterStr1 = 'sunshineLin'
console.log(letterReg.test(letterStr1)) // true

const letterStr2 = 'sunshine_Lin'
console.log(letterReg.test(letterStr2)) // false

17.包含中文的字符串

const cnReg = /[\u4E00-\u9FA5]/

const cnStr1 = '我是sunshine_Lin，林三心'
console.log(cnReg.test(cnStr1)) // true

const cnStr2 = 'sunshine_Lin'
console.log(cnReg.test(cnStr2)) // false

18.密碼強(qiáng)度的校驗(yàn)

說(shuō)明：密碼中必須包含字母、數(shù)字、特稱字符，至少8個(gè)字符，最多30個(gè)字符

const passwordReg = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/

const password1 = 'sunshine_Lin12345..'
console.log(passwordReg.test(password1)) // true

const password2 = 'sunshineLin12345'
console.log(passwordReg.test(password2)) // false
19.字符串長(zhǎng)度n的校驗(yàn)
function checkStrLength(n) {
  return new RegExp(`^.{${n}}$`)
}

// 校驗(yàn)長(zhǎng)度為3的字符串
const lengthReg = checkStrLength(3)

const str1 = 'hhh'
console.log(lengthReg.test(str1)) // true

const str2 = 'hhhhh'
console.log(lengthReg.test(str2)) // false

20.文件拓展名的校驗(yàn)

function checkFileName (arr) {
  arr = arr.map(name => `.${name}`).join('|')
  return new RegExp(`(${arr})$`)
}

const filenameReg = checkFileName(['jpg', 'png', 'txt'])

const filename1 = 'sunshine.jpg'
console.log(filenameReg.test(filename1)) // true
const filename2 = 'sunshine.png'
console.log(filenameReg.test(filename2)) // true
const filename3 = 'sunshine.txt'
console.log(filenameReg.test(filename3)) // true
const filename4 = 'sunshine.md'
console.log(filenameReg.test(filename4)) // false

21.匹配img和src

const imgReg = /<img.*?src=[\"|\']?(.*?)[\"|\']?\s.*?>/ig

const htmlStr = '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />'

console.log(imgReg.exec(htmlStr))
// [
//   '<img src="sunshine.png" />',
//   'sunshine.png',
//   index: 11,
//   input: '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />',
//   groups: undefined
// ]
console.log(imgReg.exec(htmlStr))
// [
//   '<img src="sunshine111.png" />',
//   'sunshine111.png',
//   index: 37,
//   input: '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />',
//   groups: undefined
// ]

22.匹配html中的注釋

const noteReg = /<!--(.*?)-->/g

const htmlStr = '<!--一個(gè)div標(biāo)簽--> <div></div> <!--一個(gè)div標(biāo)簽--> <div></div>'

console.log(noteReg.exec(htmlStr))
// [
//   '<!--一個(gè)div標(biāo)簽-->',
//   '一個(gè)div標(biāo)簽',
//   index: 0,
//   input: '<!--一個(gè)div標(biāo)簽--> <div></div> <!--一個(gè)div標(biāo)簽--> <div></div>',
//   groups: undefined
// ]
console.log(noteReg.exec(htmlStr))
// [
//   '<!--一個(gè)div標(biāo)簽-->',
//   '一個(gè)div標(biāo)簽',
//   index: 27,
//   input: '<!--一個(gè)div標(biāo)簽--> <div></div> <!--一個(gè)div標(biāo)簽--> <div></div>',
//   groups: undefined
// ]

23.匹配html中的style

const styleReg = /style="[^=>]*"([(\s+\w+=)|>])/g

const htmlStr = '<div style="background:#000;"><span style="color:#fff"></span></div>'

console.log(styleReg.exec(htmlStr))
// [
//   'style="background:#000;">',
//   '>',
//   index: 5,
//   input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
//   groups: undefined
// ]
console.log(styleReg.exec(htmlStr))
// [
//   'style="color:#fff">',
//   '>',
//   index: 36,
//   input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
//   groups: undefined
// ]

24.匹配html中的顏色

const colorReg = /#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/g

const htmlStr = '<div style="background:#000;"><span style="color:#fff"></span></div>'

console.log(colorReg.exec(htmlStr))
// [
//   '#000',
//   '000',
//   index: 23,
//   input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
//   groups: undefined
// ]
console.log(colorReg.exec(htmlStr))
// [
//   '#fff',
//   'fff',
//   index: 49,
//   input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
//   groups: undefined
// ]

25.匹配htmlTag（html標(biāo)簽）

const endReg = /<("[^"]*"|'[^']*'|[^'">])*>/g

const htmlStr = '<div style="background:#000;"><span style="color:#fff"></span></div><h1></h1>'

console.log(endReg.exec(htmlStr))
console.log(endReg.exec(htmlStr))
console.log(endReg.exec(htmlStr))
console.log(endReg.exec(htmlStr))
console.log(endReg.exec(htmlStr))
console.log(endReg.exec(htmlStr))
責(zé)任編輯：趙寧寧 來(lái)源： 前端之神
正則表達(dá)式代碼
相關(guān)推薦

2018-09-27 15:25:08

正則表達(dá)式前端

2023-09-04 15:52:07

2019-11-29 16:25:00

前端正則表達(dá)式字符串

2009-06-24 11:24:23

JavaScript驗(yàn)正則表達(dá)式

2024-09-14 09:18:14

Python正則表達(dá)式

2021-07-14 23:54:01

正則表達(dá)式數(shù)據(jù)

2020-09-04 09:16:04

Python正則表達(dá)式虛擬機(jī)

2019-04-30 11:15:51

正則表達(dá)式JS前端

2011-11-23 11:04:41

BGPAS_PATH正則表達(dá)式

2009-06-09 09:00:09

java正則表達(dá)式

2015-12-07 10:03:40

實(shí)用PHP表達(dá)式

2010-03-25 18:25:36

Python正則表達(dá)式

2009-08-07 14:24:31

.NET正則表達(dá)式

2021-01-27 11:34:19

Python正則表達(dá)式字符串

2009-02-18 09:48:20

正則表達(dá)式Java教程

2009-09-16 18:19:34

正則表達(dá)式組

2011-06-02 12:34:16

正則表達(dá)式

2017-05-12 10:47:45

Linux正則表達(dá)式程序基礎(chǔ)

2019-07-17 15:45:47

正則表達(dá)式字符串前端

2022-03-28 06:19:14

正則表達(dá)式開發(fā)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)