手机号码的校验

  1. const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
  3. const phoneStr1 = '18886233487'
  4. console.log(phoneReg.test(phoneStr1)) // true
  6. const phoneStr2 = '17283017203897'
  7. console.log(phoneReg.test(phoneStr2)) // false

身份证的校验

  1. 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]$/
  3. const sfzStr1 = '415106199801012130'
  4. console.log(sfzReg.test(sfzStr1)) // true
  6. const sfzStr2 = '718381298381212183'
  7. console.log(sfzReg.test(sfzStr2)) // false

身份证提取生日和性别

  1. const idNumber = '415106199801012130'
  2. const birthday = idNumber.substring(6, 10) + "-" + idNumber.substring(10, 12) + "-" + idNumber.substring(12, 14);
  3. const sex = parseInt(idNumber.substr(16, 1)) % 2 == 1 ? '男' : '女'

邮箱的校验

  1. const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
  3. const emailStrWY = '956666@163.com' // 163邮箱
  4. const emailStrQQ = '956666@qq.com' // qq邮箱
  5. console.log(emailReg.test(emailStrWY)) // true
  6. console.log(emailReg.test(emailStrQQ)) // true
  8. const noEmail = '72873213.com'
  9. console.log(emailReg.test(noEmail)) // false

URL的校验

  1. const urlReg = /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/
  2. let urlReg = /^(((ht|f)tps?):\/\/)?[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:\/~+#]*[\w\-@?^=%&\/~+#])?$/
  5. const urlStr1 = 'https://haha.sunshine.com/xxx/xxx'
  6. console.log(urlReg.test(urlStr1)) // true
  8. const urlStr2 = 'sss://haha.sunshine.com/xxx/xxx'
  9. console.log(urlReg.test(urlStr2)) // false

银行卡的校验

  1. const bcardReg = /^[0-9_]{15,19}$/
  3. const urlStr1 = 'https://haha.sunshine.com/xxx/xxx'
  4. console.log(bcardReg.test(urlStr1)) // true
  6. const urlStr2 = 'sss://haha.sunshine.com/xxx/xxx'
  7. console.log(bcardReg.test(urlStr2)) // false

护照（包含香港、澳门）校验

  1. const hzReg =/(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/
  3. const urlStr1 = 'https://haha.sunshine.com/xxx/xxx'
  4. console.log(hzReg.test(urlStr1)) // true
  6. const urlStr2 = 'sss://haha.sunshine.com/xxx/xxx'
  7. console.log(hzReg.test(urlStr2)) // false

IPv4的校验

  1. 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]?)$/
  3. const ipv4Str1 = '122.12.56.65'
  4. console.log(ipv4Reg.test(ipv4Str1)) // true
  6. const ipv4Str2 = '122.12.56.655'
  7. console.log(ipv4Reg.test(ipv4Str2)) // false

16进制颜色的校验

  1. const color16Reg = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
  3. const color16Str1 = '#fff'
  4. console.log(color16Reg.test(color16Str1)) // true
  6. const color16Str2 = '#1234567'
  7. console.log(color16Reg.test(color16Str2)) // false

日期 YYYY-MM-DD

  1. const dateReg = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/
  3. const dateStr1 = '2021-10-10'
  4. console.log(dateReg.test(dateStr1)) // true
  6. const dateStr2 = '2021-01-01 1'
  7. console.log(dateReg.test(dateStr2)) // false

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

  1. const dateReg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/
  3. const dateStr1 = '2021-10-10 16:16:16'
  4. console.log(dateReg.test(dateStr1)) // true
  6. const dateStr2 = '2021-10-10 16:'
  7. console.log(dateReg.test(dateStr2)) // false

整数的校验

  1. const intReg = /^[-+]?\d*$/
  2. const numReg = /^[0-9]*$/
  4. const intNum1 = 12345
  5. console.log(intReg.test(intNum1)) // true
  7. const intNum2 = 12345.1
  8. console.log(intReg.test(intNum2)) // false

小数的校验

  1. const floatReg = /^[-\+]?\d+(\.\d+)?$/
  3. const floatNum = 1234.5
  4. console.log(floatReg.test(floatNum)) // true

保留n位小数

  1. function checkFloat(n) {
  2.   return new RegExp(`^([1-9]+[\d]*(.[0-9]{1,${n}})?)$`)
  3. }
  4. // 保留2位小数
  5. const floatReg = checkFloat(2)
  7. const floatNum1 = 1234.5
  8. console.log(floatReg.test(floatNum1)) // true
  10. const floatNum2 = 1234.55
  11. console.log(floatReg.test(floatNum2)) // true
  13. const floatNum3 = 1234.555
  14. console.log(floatReg.test(floatNum3)) // false

邮政编号的校验

  1. const postalNoReg = /^\d{6}$/
  3. const postalNoStr1 = '522000'
  4. console.log(postalNoReg.test(postalNoStr1)) // true
  6. const postalNoStr2 = '5220000'
  7. console.log(postalNoReg.test(postalNoStr2)) // false

QQ号的校验

  1. const qqReg = /^[1-9][0-9]{4,10}$/
  3. const qqStr1 = '1915801633'
  4. console.log(qqReg.test(qqStr1)) // true
  6. const qqStr2 = '191580163333'
  7. console.log(qqReg.test(qqStr2)) // false

微信号的校验

说明：6至20位，以字母开头，字母，数字，减号，下划线

  1. const wxReg = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/
  3. const wxStr1 = 'linsanxin885577'
  4. console.log(wxReg.test(wxStr1)) // true
  6. const wxStr2 = '厉害了我的vx'
  7. console.log(wxReg.test(wxStr2)) // false

车牌号的校验

  1. const carNoReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/
  3. const carNoStr1 = '粤A12345'
  4. console.log(carNoReg.test(carNoStr1)) // true
  6. const carNoStr2 = '广东A12345'
  7. console.log(carNoReg.test(carNoStr2)) // false

只含字母的字符串

  1. const letterReg = /^[a-zA-Z]+$/
  3. const letterStr1 = 'sunshineLin'
  4. console.log(letterReg.test(letterStr1)) // true
  6. const letterStr2 = 'sunshine_Lin'
  7. console.log(letterReg.test(letterStr2)) // false

包含中文/英文的字符串

  1. const cnReg = /[\u4E00-\u9FA5]/
  2. const enReg=/(^[a-zA-Z]$)/
  4. const cnStr1 = '我是sunshine_Lin，林三心'
  5. console.log(cnReg.test(cnStr1)) // true
  7. const cnStr2 = 'sunshine_Lin'
  8. console.log(cnReg.test(cnStr2)) // false

密码强度的校验

说明：密码中必须包含字母、数字、特称字符，至少8个字符，最多30个字符

  1. const passwordReg = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/
  3. const password1 = 'sunshine_Lin12345..'
  4. console.log(passwordReg.test(password1)) // true
  6. const password2 = 'sunshineLin12345'
  7. console.log(passwordReg.test(password2)) // false

字符串长度n的校验

  1. function checkStrLength(n) {
  2.   return new RegExp(`^.{${n}}$`)
  3. }
  5. // 校验长度为3的字符串
  6. const lengthReg = checkStrLength(3)
  8. const str1 = 'hhh'
  9. console.log(lengthReg.test(str1)) // true
  11. const str2 = 'hhhhh'
  12. console.log(lengthReg.test(str2)) // false

文件拓展名的校验

  1. function checkFileName (arr) {
  2.   arr = arr.map(name => `.${name}`).join('|')
  3.   return new RegExp(`(${arr})$`)
  4. }
  6. const filenameReg = checkFileName(['jpg', 'png', 'txt'])
  8. const filename1 = 'sunshine.jpg'
  9. console.log(filenameReg.test(filename1)) // true
  10. const filename2 = 'sunshine.png'
  11. console.log(filenameReg.test(filename2)) // true
  12. const filename3 = 'sunshine.txt'
  13. console.log(filenameReg.test(filename3)) // true
  14. const filename4 = 'sunshine.md'
  15. console.log(filenameReg.test(filename4)) // false

匹配img和src

  1. const imgReg = /<img.*?src=[\"|\']?(.*?)[\"|\']?\s.*?>/ig
  3. const htmlStr = '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />'
  5. console.log(imgReg.exec(htmlStr))
  6. // [
  7. //   '<img src="sunshine.png" />',
  8. //   'sunshine.png',
  9. //   index: 11,
  10. //   input: '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />',
  11. //   groups: undefined
  12. // ]
  13. console.log(imgReg.exec(htmlStr))
  14. // [
  15. //   '<img src="sunshine111.png" />',
  16. //   'sunshine111.png',
  17. //   index: 37,
  18. //   input: '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />',
  19. //   groups: undefined
  20. // ]

匹配html中的注释

  1. const noteReg = /<!--(.*?)-->/g
  3. const htmlStr = '<!--一个div标签--> <div></div> <!--一个div标签--> <div></div>'
  5. console.log(noteReg.exec(htmlStr))
  6. // [
  7. //   '<!--一个div标签-->',
  8. //   '一个div标签',
  9. //   index: 0,
  10. //   input: '<!--一个div标签--> <div></div> <!--一个div标签--> <div></div>',
  11. //   groups: undefined
  12. // ]
  13. console.log(noteReg.exec(htmlStr))
  14. // [
  15. //   '<!--一个div标签-->',
  16. //   '一个div标签',
  17. //   index: 27,
  18. //   input: '<!--一个div标签--> <div></div> <!--一个div标签--> <div></div>',
  19. //   groups: undefined
  20. // ]

匹配html中的style

  1. const styleReg = /style="[^=>]*"([(\s+\w+=)|>])/g
  3. const htmlStr = '<div style="background:#000;"><span style="color:#fff"></span></div>'
  5. console.log(styleReg.exec(htmlStr))
  6. // [
  7. //   'style="background:#000;">',
  8. //   '>',
  9. //   index: 5,
  10. //   input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
  11. //   groups: undefined
  12. // ]
  13. console.log(styleReg.exec(htmlStr))
  14. // [
  15. //   'style="color:#fff">',
  16. //   '>',
  17. //   index: 36,
  18. //   input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
  19. //   groups: undefined
  20. // ]

匹配html中的颜色

  1. const colorReg = /#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/g
  3. const htmlStr = '<div style="background:#000;"><span style="color:#fff"></span></div>'
  5. console.log(colorReg.exec(htmlStr))
  6. // [
  7. //   '#000',
  8. //   '000',
  9. //   index: 23,
  10. //   input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
  11. //   groups: undefined
  12. // ]
  13. console.log(colorReg.exec(htmlStr))
  14. // [
  15. //   '#fff',
  16. //   'fff',
  17. //   index: 49,
  18. //   input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
  19. //   groups: undefined
  20. // ]

匹配htmlTag（html标签）

  1. const endReg = /<("[^"]*"|'[^']*'|[^'">])*>/g
  3. const htmlStr = '<div style="background:#000;"><span style="color:#fff"></span></div><h1></h1>'
  5. console.log(endReg.exec(htmlStr))
  6. console.log(endReg.exec(htmlStr))
  7. console.log(endReg.exec(htmlStr))
  8. console.log(endReg.exec(htmlStr))
  9. console.log(endReg.exec(htmlStr))
  10. console.log(endReg.exec(htmlStr))

其他

  1. 一、校验数字的表达式
  2.  1 数字：^[0-9]*$
  3.  2 n位的数字：^\d{n}$
  4.  3 至少n位的数字：^\d{n,}$
  5.  4 m-n位的数字：^\d{m,n}$
  6.  5 零和非零开头的数字：^(0|[1-9][0-9]*)$
  7.  6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
  8.  7 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$
  9.  8 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$
  10.  9 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
  11. 10 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
  12. 11 非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
  13. 12 非零的负整数：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
  14. 13 非负整数：^\d+$ 或 ^[1-9]\d*|0$
  15. 14 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
  16. 15 非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
  17. 16 非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
  18. 17 正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
  19. 18 负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
  20. 19 浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$
  21. 二、校验字符的表达式
  23.  1 汉字：^[\u4e00-\u9fa5]{0,}$
  24.  2 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
  25.  3 长度为3-20的所有字符：^.{3,20}$
  26.  4 由26个英文字母组成的字符串：^[A-Za-z]+$
  27.  5 由26个大写英文字母组成的字符串：^[A-Z]+$
  28.  6 由26个小写英文字母组成的字符串：^[a-z]+$
  29.  7 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
  30.  8 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
  31.  9 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
  32. 10 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
  33. 11 可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
  34. 12 禁止输入含有~的字符：[^~\x22]+

获取url参数

  1. // 方法1
  2. function getUrlParams(name) { 
  3.     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //定义正则表达式 
  4.     var r = window.location.search.substr(1).match(reg);  
  5.     if (r != null) return unescape(r[2]); 
  6.   return null; 
  7. }
  9. window.location = "http://www.baidu.com?name=elephant&age=25&sex=male";
  10. var name = getUrlParams("name"); //elephant
  11. var age = getUrlParams("age");   //25
  12. var sex = getUrlParams("sex");　//male
  14. // 方法3
  15. function parse_url(_url){ //定义函数
  16.   　　var pattern = /(\w+)=(\w+)/ig;//定义正则表达式
  17.   　　var parames = {};//定义数组
  18.   　　url.replace(pattern, function(a, b, c){
  19.   　　　　parames[b] = c;
  20.   　　});
  21.   　　return parames;//返回这个数组.
  22.   }
  24.   var  url = "http://www.baidu.com?name=elephant&age=25&sex=male"
  25.   var params = parse_url(url);// ["name=elephant", "age=25", "sex=male"]