测试网站:https://regexper.com/

  1. new RegExp(pattern, attributes);
  1. const url =
  2.   'http:www.baidu.com/index?name=username&age=27&pwd=zbc|123@&likes=lol&likes=beautifull girl&$id=main#flag=66';
  4. const password = 'pwd';
  5. const reg = new RegExp(`[?&]${password}=[^?&]+`, 'gi');
  6. const match = url.match(reg);
  7. console.log(match); //["&pwd=zbc|123@"]
  9. const reg2 = new RegExp('\\d{2}$', 'gi');
  10. const number = url.match(reg2);
  11. console.log(number);

构造函数正则方式：

  • 转义用双斜杠 \
  • 参数是字符串
  • 接收变量

    常见正则

    ```javascript 数字：^\d$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$ 零和非零开头的数字：^(0|[1-9][0-9])$ 非零开头的最多带两位小数的数字：^([1-9]\d)+(.\d{1,2})?$ 带1-2位小数的正数或负数：^(-)?\d+.\d{1,2}$ 正数、负数、和小数：^(-)?\d+(.\d+)?$ 有两位小数的正实数：^\d+.\d{2}$ 有1~3位小数的正实数：^\d+.\d{1,3}$ 非零的正整数：^[1-9]\d$ 非零的负整数：^-[1-9]\d*$

汉字：^[\u4e00-\u9fa5]+$ 英文和数字：^[A-Za-z0-9]+$ 长度为3-20的所有字符：^.{3,20}$ 由26个英文字母组成的字符串：^[A-Za-z]+$ 由26个大写英文字母组成的字符串：^[A-Z]+$ 由26个小写英文字母组成的字符串：^[a-z]+$ 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$ 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$ 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$

Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)$ 国内手机号码：^1[34578]{1}\d{9} 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z]\w{4,15}$ 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$ 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.\d)(?=.[a-z])(?=.[A-Z]).{8,10}$ 日期格式：^\d{4}-\d{1,2}-\d{1,2} 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$ 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$ 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始) IP地址：\d+.\d+.\d+.\d+ (提取IP地址时有用) IP地址：^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$ 首尾空白字符的正则表达式：^\s|\s$或(^\s)|(\s$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式) 空白行的正则表达式：\n\s*\r (可以用来删除空白行) 18位身份证号码(数字、字母x结尾)：^((\d{18})|([0-9x]{18})|([0-9X]{18}))$ 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)

至少8-16个字符，至少1个大写字母，1个小写字母和1个数字，其他可以是任意字符： /^(?=.[a-z])(?=.[A-Z])(?=.\d)[^]{8,16}$/ 或者： /^(?=.[a-z])(?=.[A-Z])(?=.\d)[\s\S]{8,16}$/ 其中 [\s\S] 中的\s空白符，\S非空白符，所以[\s\S]是任意字符。也可以用 [\d\D]、[\w\W]来表示。 至少8个字符，至少1个大写字母，1个小写字母和1个数字,不能包含特殊字符（非数字字母）： ^(?=.[A-Za-z])(?=.\d)[A-Za-z\d]{8,}$ 至少8个字符，至少1个字母，1个数字和1个特殊字符： ^(?=.[A-Za-z])(?=.\d)(?=.[$@$!%#?&])[A-Za-z\d$@$!%#?&]{8,}$ 至少8个字符，至少1个大写字母，1个小写字母和1个数字： ^(?=.[a-z])(?=.[A-Z])(?=.\d)[a-zA-Z\d]{8,}$ 至少8个字符，至少1个大写字母，1个小写字母，1个数字和1个特殊字符： ^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[$@$!%?&])[A-Za-z\d$@$!%?&]{8,} 最少8个最多十个字符，至少1个大写字母，1个小写字母，1个数字和1个特殊字符： ^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[$@$!%?&])[A-Za-z\d$@$!%?&]{8,10}

  1. <a name="Ah3uK"></a>
  2. # 正则相关编程
  3. <a name="lPSyc"></a>
  4. ## 实现URL解析
  5. ```javascript
  6. var url='http:www.baidu.com/index?name=username&age=27&pwd=zbc|123@&likes=lol&likes=beautifull girl&$id=main#flag=66';
  7. function parse(url) {
  8.   const obj = {}
  9.   const arr = url.match(/[?&][^?&]+=[^?&]+/g)
  10.   if (arr) {
  11.     arr.forEach((item) => {
  12.       const pairs = item.substring(1).split('=')
  13.       const key = decodeURIComponent(pairs[0])
  14.       const val = decodeURIComponent(pairs[1])
  15.       obj[key] = val
  16.     })
  17.   }
  18.   return obj
  19. }
  20. console.log(parse(url))
  21. // {
  22. // $id: "main#flag",
  23. // age: "27",
  24. // likes: "beautifull girl",
  25. // name: "username",
  26. // pwd: "zbc|123@",
  27. // }
  29. function QueryString(url, name) {
  30.   var reg = new RegExp('[?&]' + name + '=([^?&]+)'); // new RegExp支持变量
  31.   var query = url.match(reg);
  32.   return query ? query[1] : null;
  33. }
  34. const pwd = QueryString(url, 'pwd');
  35. console.log(pwd); //username

驼峰

  1. const camelize = str.replace(/(\-(?<word>\w))/g, (...match) => {
  2.   console.log(match);
  3.   return match[2].toUpperCase();
  4. });
  6. console.log(camlize(str))
  8. function camelize(str) {
  9.     return str
  10.       .split('-') // my-long-word -> ['my', 'long', 'word']
  11.       .map( 
  12.         (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)
  13.       ) // ['my', 'long', 'word'] -> ['my', 'Long', 'Word']
  14.       .join(''); // ['my', 'Long', 'Word'] -> myLongWord
  15.   }
  17. let str = 'my-long-word';

千分位

  1. String(n).repalce(/(\d)(?=(\d{3})+$)/g,'$1,')

实现Template方法

  1. var str = "您好，<%=name%>。欢迎来到<%=location%>";
  3. function template(str) {
  4.     return data => str.replace(/<%=(\w+)%>/g, (match, p) => data[p] || '')
  5. }
  6. var compiled = template(str);
  7. // compiled的输出值为：“您好，张三。欢迎来到网易游戏” 
  8. compiled({
  9.     name: "张三",
  10.     location: "网易游戏"
  11. });

验证HTML标签是否闭合

  1. function checkHtml(data) {
  2.   let tag = [
  3.     'a',
  4.     'abbr',
  5.     'address',
  6.     'area',
  7.     'article',
  8.     'aside',
  9.     'audio',
  10.     'b',
  11.     'base',
  12.     'bdi',
  13.     'bdo',
  14.     'blockquote',
  15.     'body',
  16.     'button',
  17.     'canvas',
  18.     'caption',
  19.     'cite',
  20.     'code',
  21.     'col',
  22.     'colgroup',
  23.     'datalist',
  24.     'dd',
  25.     'del',
  26.     'dfn',
  27.     'dialog',
  28.     'div',
  29.     'dl',
  30.     'dt',
  31.     'em',
  32.     'fieldset',
  33.     'figcaption',
  34.     'figure',
  35.     'footer',
  36.     'form',
  37.     'frame',
  38.     'head',
  39.     'header',
  40.     'hgroup',
  41.     'h1',
  42.     'h2',
  43.     'h3',
  44.     'h4',
  45.     'h5',
  46.     'h6',
  47.     'i',
  48.     'iframe',
  49.     'ins',
  50.     'label',
  51.     'legend',
  52.     'li',
  53.     'map',
  54.     'mark',
  55.     'menu',
  56.     'meter',
  57.     'nav',
  58.     'noscript',
  59.     'object',
  60.     'ol',
  61.     'outgroup',
  62.     'option',
  63.     'output',
  64.     'p',
  65.     'pre',
  66.     'html',
  67.     'progress',
  68.     'q',
  69.     'rp',
  70.     'rt',
  71.     'ruby',
  72.     's',
  73.     'samp',
  74.     'script',
  75.     'section',
  76.     'select',
  77.     'small',
  78.     'span',
  79.     'strike',
  80.     'strong',
  81.     'style',
  82.     'sub',
  83.     'summary',
  84.     'sup',
  85.     'table',
  86.     'tbody',
  87.     'td',
  88.     'textarea',
  89.     'tfoot',
  90.     'th',
  91.     'thead',
  92.     'time',
  93.     'title',
  94.     'tr',
  95.     'u',
  96.     'ul',
  97.     'var',
  98.     'video',
  99.     'wbr',
  100.   ];
  101.   //清除标签中内容、换行符 <div id="root"></div> => <div></div>
  102.   data = data
  103.     .replace(/.*?(<.*>).*/g, '$1')
  104.     .replace(/[\r\n]/g, '')
  105.     .replace(/\s+.*?>/g, '>');
  107.   //排除无内容元素
  108.   data = data.replace(
  109.     /<(img|br|hr|input|link|meta|area|base|col|command|embed|keygen|param|source|track|wbr).*?>/g,
  110.     ''
  111.   );
  112.   //清除非标签元素，替换标签为()的形式，例如：<div>替换为左括号(和</div>替换为右括号)
  113.   // <div></div> => ()
  114.   data = data
  115.     .replace(/>.*?</g, '><')
  116.     .replace(/<[^\/].*?>/g, '(')
  117.     .replace(/<\/.*?[^<]>/g, ')');
  119.   //判断()是否为偶数
  120.   if (data.length % 2 != 0) {
  121.     return false;
  122.   }
  123.   //循环删除()直至没有()或者为空
  124.   while (data.length) {
  125.     let temp = data;
  126.     let i = 0;
  127.     while (i < tag.length) {
  128.       let key = '<' + tag[i] + '></' + tag[i] + '>';
  129.       data = data.replace(new RegExp(key, 'g'), '');
  130.       i++;
  131.     }
  132.     if (data == temp) {
  133.       return false;
  134.     }
  135.   }
  136.   return true;
  137. }
  139. const c1 = checkHtml('<div></div>'); // true
  140. // checkHtml('<div>'); // false
  141. // checkHtml('<br>'); // true
  142. // checkHtml('</img>'); // false
  143. // checkHtml('<img/>'); // true
  144. // checkHtml('<img>'); // true

匹配HTML标签

  1. const str = '<div class="div">51515<p class="odd" id="odd">123</p>123456</div>';
  3. const result = str.match(/<\s*\/?[^>]*>/g);
  4. console.log(result);
  6. // ["<div class="div">", "<p class="odd" id="odd">", "</p>", "</div>"]
  7. //reg = /<\s*\/?\s*[a-zA-z_]([^>]*?["][^"]*["])*[^>"]*>/g;

正则去掉DOM中的内联样式

  1. var str = '<h1 id="text" style="background: #ccc;">测试元素</h1>';
  2. const result = str.replace(/\s+style=\"[^\"]*\"/g, '');
  3. console.log(result); //<h1 id="text">测试元素</h1>

识别正确的邮箱

image.png

  1. var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
  3. pattern.test('cn42du@163.com')  //true;
  4. pattern.test('ifat3@sina.com.cn') // true;
  5. pattern.test('ifat3.it@163.com') // true;
  6. pattern.test('ifat3_-.@42du.cn') // true;
  7. pattern.test('ifat3@42du.online') // false;
  8. pattern.test('邮箱@42du.cn') // false;

image.png

  1. var pattern = /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/;
  3. pattern.test('cn42du@163.com')  //true;
  4. pattern.test('ifat3@sina.com.cn') // true;
  5. pattern.test('ifat3.it@163.com') // true;
  6. pattern.test('ifat3_-.@42du.cn') // true;
  7. pattern.test('ifat3@42du.online') // true;
  8. pattern.test('邮箱@42du.cn') // true;

验证IP地址

  1. var regIp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;
  3. console.log('test 192.168.4.154', regIp.test('192.168.4.154'));