25 Common Regular Expressions That Improve Code Efficiency by 80%

Time： 2024-10-07 Column：Mobile & Frontend views：242

In daily development, understanding some common regular expressions can greatly enhance your work efficiency. Today, I will share 25 regular expressions that are frequently used in development.

Regular expressions are extremely useful in daily development and can be utilized in every programming language, just like JSON—they are universal. Familiarity with common regular expressions can significantly boost your productivity, such as for:

String matching
Format validation for form items

Today, I will share 25 commonly used regular expressions in development! I hope everyone can enhance their code efficiency!

25 Common Regular Expressions That Improve Code Efficiency by 80%

1. Mobile Number Validation

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. ID Card Validation

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. Email Validation

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

const emailStrWY = '956666@163.com'; // 163 Email
const emailStrQQ = '956666@qq.com'; // QQ Email
console.log(emailReg.test(emailStrWY)); // true
console.log(emailReg.test(emailStrQQ)); // true

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

4. URL Validation

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 Validation

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. Hex Color Validation

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. Date Validation (YYYY-MM-DD)

const dateReg = /^d{4}(-)d{1,2}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. Date Validation (YYYY-MM-DD hh:mm)

const dateReg = /^(d{1,4})(-|/)(d{1,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. Integer Validation

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

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

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

10. Float Validation

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

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

11. Allow n Decimal Places

function checkFloat(n) {
  return new RegExp(`^([1-9]+[\d]*(\.[0-9]{1,${n}})?)$`);
}

// Allow 2 decimal places
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. Postal Code Validation

const postalNoReg = /^d{6}$/

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

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

13. QQ Number Validation

Description: 5 to 11 digits.

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. WeChat ID Validation

Description: 6 to 20 characters, starting with a letter, and may include letters, numbers, hyphens, and underscores.

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. Vehicle License Plate Validation

const carNoReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/

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

const carNoStr2 = '广东A12345'
console.log(carNoReg.test(carNoStr2)) // false

16. Alphabet-only String Validation

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. String Containing Chinese Characters Validation

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. Password Strength Validation

Description: The password must contain letters, numbers, and special characters. It should be at least 8 characters and at most 30 characters long.

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. String Length Validation (n Characters)

function checkStrLength(n) {
  return new RegExp(`^.{${n}}$`)
}

// Validating a string of length 3
const lengthReg = checkStrLength(3)

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

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

20. File Extension Validation

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. Matching img and src in HTML

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. Matching HTML Comments

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

const htmlStr = '<!--A div tag--> <div></div> <!--Another div tag--> <div></div>'

console.log(noteReg.exec(htmlStr))
// [
//   '<!--A div tag-->',
//   'A div tag',
//   index: 0,
//   input: '<!--A div tag--> <div></div> <!--Another div tag--> <div></div>',
//   groups: undefined
// ]
console.log(noteReg.exec(htmlStr))
// [
//   '<!--Another div tag-->',
//   'Another div tag',
//   index: 27,
//   input: '<!--A div tag--> <div></div> <!--Another div tag--> <div></div>',
//   groups: undefined
// ]

23. Matching HTML style Attribute

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. Matching HTML Colors

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. Matching HTML Tags

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))

💰 Support Us