吃通js正则表达式

  • A+
所属分类：Web前端
摘要

体验正则表达式的魅力： 字面量创建正则表达式： 使用对象创建正则表达式：
便宜好用的国外VPS推荐

体验正则表达式的魅力：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         // 获取字符串中所有的数值         let str = 'cyy2020cyy2xxx';          //不使用正则的情况         let nums = [...str].filter(item => !Number.isNaN(parseInt(item))).join('');         console.log(nums);          // 使用正则的情况         let num2 = str.match(/d/g).join('');         console.log(num2);     </script> </body>  </html>

 

字面量创建正则表达式：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         let str = 'cyy2020cyy2xxx';          console.log(/cyy/.test(str));          //不能直接使用变量         let word = 'cyy';         console.log(/word/.test(str));          //使用这种方式，使用变量         console.log(eval(`/${word}/`).test(str));        </script> </body>  </html>

 

使用对象创建正则表达式：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <div>这里是cyy用来检测正则的测试文本~~~</div>      <script>         // let str = 'cyy2020cyy2xxx';          // //第二个参数是模式         // let reg = new RegExp('cyy', 'g');         // console.log(reg.test(str));          // //使用变量         // let word = 'cyy';         // let reg2 = new RegExp(word, 'g');         // console.log(reg2.test(str));           //demo         let text = prompt('请输入要检测的文本，支持正则');         let reg = new RegExp(text, 'g');         let div = document.querySelector('div');         div.innerHTML = div.innerHTML.replace(reg, search => {             return `<span style="color:red;">${search}</span>`;         });      </script> </body>  </html>

吃通js正则表达式

 

选择符的使用：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         let str = 'cyy000';         // |代表选择符，符号左边的表达式或者右边的表达式是否满足         // 左边匹配的是cyy，而不是一个y         console.log(/cyy|x/.test(str));           let tel = '010-8888888';         console.log(/^(010|020)-d{7,8}$/.test(tel));     </script> </body>  </html>

 

原子表与原子组中的选择符：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         // 原子表         let str = '1122334455';         let reg = /[1234567]/;         console.log(str.match(reg));           //原子组         let str2 = '1122334455';         let reg2 = /(11|44)/g;         console.log(str2.match(reg2));     </script> </body>  </html>

吃通js正则表达式

 

 

转义需要好好理解：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         // .代表除换行符外的所有字符         // let price = 33.47;         // console.log(/d+.d+/.test(price));           //对象创建的正则需要双重转义         // let price = 33.47;         // let reg = new RegExp('d+.d+');         // console.log(reg);         // console.log(reg.test(price));          let price = 33.47;         let reg = new RegExp('\d+\.\d+');         console.log(reg);         console.log(reg.test(price));      </script> </body>  </html>

 

字符边界约束：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <input type="text" name='user'>     <span style='color:red;'></span>      <script>         document.querySelector('[name=user]').addEventListener('keyup', function () {             console.log(this.value);              let flag = this.value.match(/^[a-z]{3,5}$/);             document.querySelector('span').innerHTML = flag ? '成功' : '失败';         });      </script> </body>  </html>

吃通js正则表达式

 

数值与空白元字符：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         // let str = '20201111';         // console.log(str.match(/d/));         // // 模式符g 全局匹配         // console.log(str.match(/d/g));           //获取电话号码         // let tel = "'姓名: 'cyy', 电话: 010-1111111; 姓名: 'cyy2', 电话: 030-99999999";         // console.log(tel.match(/d{3}-d{7,8}/g));           //获取中文 [^]表示方括号里面的都不要         let tel = "'姓名: 'cyy', 电话: 010-1111111; 姓名: 'cyy2', 电话: 030-99999999";         console.log(tel.match(/[^':,-da-zs;]+/g));           //d 数字 D 非数字         // let tel = "'姓名: 'cyy', 电话: 010-1111111; 姓名: 'cyy2', 电话: 030-99999999";         // console.log(tel.match(/D+/g));           // s匹配空白，包括空格和换行符         // let str = ' 11n';         // console.log(str.match(/s/g));           // S匹配非空白，包括空格和换行符         let str = ' 11n';         console.log(str.match(/S+/g));     </script> </body>  </html>

 

w与W元字符：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         // w 字母数字下划线         // let str = 'cyy123_-@@';         // console.log(str.match(/w+/));           // let email = '965794175@qq.com';         // console.log(email.match(/^w+@w+.w+$/));           // 5-10为字母数字下划线，并且是字母开头         let user = prompt('请输入用户名');         console.log(user.match(/^[a-z]w{4,9}$/));     </script> </body>  </html>

 

点元字符的使用：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         // . 除空白符之外的所有字符         // let str = 'cswj+4!j@;;';         // console.log(str.match(/.+/)); //这里的+是贪婪模式           // .需要转义         // let str = 'https://www.baidu.com';         // console.log(str.match(/^https?://w+.w+.w+$/));            // .需要转义         // let str = `         // www.baidu.com         // www.taobao.com         // `;         // console.log(str.match(/.+/));         // // s模式符：忽略换行符         // console.log(str.match(/.+/s));            let tel = '010 - 12345678';         console.log(tel.match(/d{3} - d{8}/));         console.log(tel.match(/d{3}s-sd{8}/));     </script> </body>  </html>

 

如何精巧的匹配所有字符：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         let str = `         <span>             cyy @@@             hahahah         </span>         `;          console.log(str.match(/[wW]+/));         console.log(str.match(/[dD]+/));     </script> </body>  </html>

 

i与g模式修饰符：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         let str = 'cyyCyy';         console.log(str.match(/c/i));         console.log(str.match(/c/g));         console.log(str.match(/c/gi));          console.log(str.replace(/c/gi, '@'));     </script> </body>  </html>

 

m多行匹配修正符实例：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         let str = `         #1 js,200元 #         #2 html,104元 #         #3 css # cyy         `;         let lessons = str.match(/^s*#d+s+.+s+#$/gm).map(item => {             item = item.replace(/^s*#d+s*/, '').replace(/s+#/, '');             [name, price] = item.split(',');             return { name, price };         });          console.log(lessons);     </script> </body>  </html>

吃通js正则表达式

 

 

汉字与字符属性：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         // u修饰符:正确处理四个字符的 UTF-16 编码         //每个字符都有属性，如L属性表示是字母，P 表示标点符号，需要结合 u 模式才有效。         //其他属性简写可以访问 https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt 网站查看。         // let str = 'cyy2020.永远最棒棒~';         // console.log(str.match(/p{L}/gu));//字母         // console.log(str.match(/p{N}/gu));//数字         // console.log(str.match(/p{P}/gu));//标点符号          //找中文         //字符也有unicode文字系统属性 Script=文字系统，下面是使用 p{sc=Han} 获取中文字符 han为中文系统         //其他语言请查看 http://www.unicode.org/standard/supported.html         // console.log(str.match(/p{sc=Han}/gu));           let str = '??';         console.log(str.match(/[??]/));//单独匹配时乱码         console.log(str.match(/[??]/u));//正确识别宽字节     </script> </body>  </html>

 

lastIndex属性的作用：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         let str = 'cyy is a girl';         // console.log(str.match(/w/));         // console.log(str.match(/w/g)); //没有组信息           //非全局模式下lastIndex不会向后走         // let reg = /w/;         // console.log(reg.exec(str));         // console.log(reg.lastIndex);          // console.log(reg.exec(str));         // console.log(reg.lastIndex);          // console.log(reg.exec(str));         // console.log(reg.lastIndex);           //全局模式下lastIndex会向后走         let reg = /w/g;         // console.log(reg.exec(str));         // console.log(reg.lastIndex);          // console.log(reg.exec(str));         // console.log(reg.lastIndex);          // console.log(reg.exec(str));         // console.log(reg.lastIndex);          while (res = reg.exec(str)) {             console.log(res);         }     </script> </body>  </html>

 

有效率的y模式：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         // y粘连模式，必须连续         // let str = 'yycyyccc';          // let reg = /yy/g;         // console.log(reg.exec(str));         // console.log(reg.lastIndex);          // console.log(reg.exec(str));         // console.log(reg.lastIndex);          // console.log(reg.exec(str));         // console.log(reg.lastIndex);           // let reg = /yy/y;         // console.log(reg.exec(str));         // console.log(reg.lastIndex);          // console.log(reg.exec(str));         // console.log(reg.lastIndex);          // console.log(reg.exec(str));         // console.log(reg.lastIndex);           let str = 'cyy的qq群是：1111111,2222222,3333333,cyy的年龄是：18';         let reg = /(d+),?/y;         reg.lastIndex = 9;         // console.log(reg.exec(str));         // console.log(reg.exec(str));         // console.log(reg.exec(str));          let qq = [];         while (res = reg.exec(str)) {             qq.push(res[1]);         }         console.log(qq);     </script> </body>  </html>

 

原子表基本上使用：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         // let str = '123456';         // console.log(str.match(/[246]/g));           // let str = '2020-11-28';         // let str2 = '2020/11/28';         // console.log(str.match(/^d{4}[-/]d{2}[-/]d{2}$/g));         // console.log(str2.match(/^d{4}[-/]d{2}[-/]d{2}$/g));           //分隔符必须一致         let str = '2020-11/28';         let str2 = '2020/11/28';         console.log(str.match(/^d{4}([-/])d{2}1d{2}$/g));         console.log(str2.match(/^d{4}([-/])d{2}1d{2}$/g));     </script> </body>  </html>

 

区间匹配：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <input type="text" name='user'>      <script>         // let str = '1234';         // console.log(str.match(/[0-9]+/g));           // let str = 'abcd1234';         // console.log(str.match(/[a-z]+/g));           let input = document.querySelector('[name=user]');         input.addEventListener('keyup', function () {             console.log(this.value.match(/[a-z]w{3,5}/));         })     </script> </body>  </html>

 

排除匹配：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <script>         // let str = '1234';         // console.log(str.match(/[12]/g));         // console.log(str.match(/[^12]/g));           let str = 'cyy是小仙女呀';         console.log(str.match(/[^w]+/g));         console.log(str.match(/p{sc=Han}+/gu));       </script> </body>  </html>

 

原子表字符不解析：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <script>         let str = '(cyy.)';         // ()在这里代表原子组         // console.log(str.match(/()/g));         // ()在这里代表普通括号         // console.log(str.match(/[()]/g));          // .在这里表示除空白符外的所有字符         console.log(str.match(/.+/g));         // .在这里表示.符号本身         console.log(str.match(/[.+]/g));       </script> </body>  </html>

 

使用原子表匹配所有内容：

 

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <script>         let str = `         cyy1         cyy2        `;         console.log(str.match(/.+/));//无法匹配换行符         console.log(str.match(/.+/s));//可以匹配换行符         console.log(str.match(/[sS]+/));         console.log(str.match(/[dD]+/));         console.log(str.match(/[wW]+/));       </script> </body>  </html>

 

正则操作DOM：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <p>p</p>     <h1>h1</h1>     <h3>h3</h3>      <script>         let reg = /<(h[1-6])>[sS]*</1>/gi;         document.body.innerHTML = document.body.innerHTML.replace(reg, '');       </script> </body>  </html>

 

认识原子组：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <script>         let str = `<h1>h1</h1>          <h2>h2</h2>`;         let reg = /<(h[1-6])>[sS]*</1>/gi;         console.log(str.match(reg));       </script> </body>  </html>

 

邮箱验证中原子组的使用：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <input type="email" name="email" value="965794175@qq.com.cn">     <script>         let reg = /[w-]+@([w-]+.)+(com|cn|cc|net|org)/gi;         let email = document.querySelector('[name=email]').value;         console.log(email.match(reg));       </script> </body>  </html>

 

原子组引用完成替换操作：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         let str = `         <h1>h1</h1>         <div>div</div>         <h3>h3</h3>`;         //把h1-h6替换成p         let reg = /<(h[1-6])>([sS]+)</1>/gi;         console.log(str.match(reg));         console.log(str.replace(reg, `<p>$2</p>`));          let res = str.replace(reg, (p0, p1, p2) => {             // console.log(p0, p1, p2);             return `<p>${p2}</p>`;         });         console.log(res);       </script> </body>  </html>

 

嵌套分组与不记录组：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         let str = `         https://www.baidu.com         http://www.baidu.com         https://baidu.com         `;         //获取域名         // ? 表示可有可无         // 圆括号里 ?: 表示不记录组         let reg = /https?://((?:w+.)?w+.(?:com|cn|net|org|cc))/gi;         // console.log(reg.exec(str));          let urls = [];         while (res = reg.exec(str)) {             // console.log(res);             urls.push(res[1]);//0是原数组，1是第一个分组         }         console.log(urls);      </script> </body>  </html>

 

多种重复匹配基本使用：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         // let str = 'cyy';         // + 1个或者多个，贪婪匹配         // console.log(str.match(/cy+/));          // let str = 'c';         // * 0个或者多个，贪婪匹配         // console.log(str.match(/cy*/));          // let str = 'cy';         // // ? 0个或者1个，贪婪匹配         // console.log(str.match(/cy?/));          let str = 'cyy';         // {} 表示范围，贪婪匹配         console.log(str.match(/cy{2,5}/));      </script> </body>  </html>

 

重复匹配对原子组的影响与电话号正则：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         // let str = 'cyyyyycycycy';         // console.log(str.match(/(cy)+/g));           let tel = '010-1234567';         console.log(tel.match(/^0d{2,3}-d{7,8}$/g));      </script> </body>  </html>

 

网站用户名验证 ：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <input type="text" name='username'>      <script>         document.querySelector('[name=username]').addEventListener('keyup', (e) => {             let value = e.target.value;             //用户名3-8位，字母数字下划线，字母开头             console.log(value.match(/^[a-z][w-]{2,7}$/i));         })      </script> </body>  </html>

 

批量使用正则完成密码验证：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <input type="text" name='pwd'>      <script>         document.querySelector('[name=pwd]').addEventListener('keyup', (e) => {             let value = e.target.value;             //密码是数字或者字母5-10位，并且必须包含大写字母和数字             let regs = [                 /^[a-z0-9]{5,10}$/i,                 /[A-Z]/,                 /d/             ];             let res = regs.every(reg => reg.test(value));             console.log(res);         });      </script> </body>  </html>

 

禁止贪婪：

 

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         let str = 'cyyyyyy';         // console.log(str.match(/cy+/));//默认贪婪         // console.log(str.match(/cy+?/));//禁止贪婪          // console.log(str.match(/cy*/));//默认贪婪         // console.log(str.match(/cy*?/));//禁止贪婪          // console.log(str.match(/cy{2,6}/));//默认贪婪         // console.log(str.match(/cy{2,6}?/));//禁止贪婪          // console.log(str.match(/cy{2,}/));//默认贪婪         // console.log(str.match(/cy{2,}?/));//禁止贪婪          console.log(str.match(/cy?/));//默认贪婪         console.log(str.match(/cy??/));//禁止贪婪      </script> </body>  </html>

 

标签替换的禁止贪婪使用：

 

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <main>         <span>cyy1</span>         <span>cyy2</span>         <span>cyy3</span>     </main>      <script>         //把span换成h4，标红，前缀加上小可爱-          const main = document.querySelector('main');         // ?禁止贪婪         let reg = /<span>([sS]+?)</span>/ig;         main.innerHTML = main.innerHTML.replace(reg, (res, h1) => {             return `<h4 style="color:red;">小可爱-${h1}</h4>`;         });      </script> </body>  </html>

吃通js正则表达式

 

 

使用matchAll完成全局匹配：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <h1>cyy1</h1>     <h2>cyy2</h2>     <h3>cyy3</h3>      <script>         let reg = /<(h[1-6])>([sS]+?)</1>/ig;          console.log(document.body.innerHTML.match(reg));         console.log(document.body.innerHTML.matchAll(reg));          let res = document.body.innerHTML.matchAll(reg);         let arr = [];         for (const iterator of res) {             console.dir(iterator);             arr.push(iterator[2]);         }         console.table(arr);       </script> </body>  </html>

 

吃通js正则表达式

 

 

为低端浏览器定义原型方法matchAll

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <h1>cyy1</h1>     <h2>cyy2</h2>     <h3>cyy3</h3>      <script>          String.prototype.matchAll = function (reg) {             let res = this.match(reg);             // console.log(res);             if (res) {                 let str = this.replace(res[0], '^'.repeat(res[0].length));                 let match = str.matchAll(reg) || [];                 return [res, ...match];             }         }         let body = document.body.innerHTML;         let res = body.matchAll(/<(h[1-6])>([sS]+?)</1>/ig);         console.log(res);       </script> </body>  </html>

 

使用exec完成全局匹配：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <h1>cyy1</h1>     <h2>cyy2</h2>     <h3>cyy3</h3>      <script>          // let str = 'cyyccyy';         // let reg = /y/gi;//必须加上g修饰符，lastIndex才会发生改变         // console.log(reg.exec(str));         // console.log(reg.lastIndex);          // console.log(reg.exec(str));         // console.log(reg.lastIndex);          // console.log(reg.exec(str));         // console.log(reg.lastIndex);          // console.log(reg.exec(str));         // console.log(reg.lastIndex);          // console.log(reg.exec(str));         // console.log(reg.lastIndex);          // let arr = [];         // while (res = reg.exec(str)) {         //     arr.push(res);         // }         // console.log(arr);           let arr = [];         function search(str, reg) {             while (res = reg.exec(str)) {                 arr.push(res);             }             return arr;         }         search(document.body.innerHTML, /<(h[1-6])>[sS]+?</1>/gi);         console.log(arr);     </script> </body>  </html>

 

字符串正则方法search与match

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>          // search 字符串的搜索         // let str = 'yyccyy';         // console.log(str.search('c'));         // console.log(str.search(/c/g));           // match 字符串的匹配         // let str = 'yyccyy';         // console.log(str.match('c'));         // console.log(str.match(/c/g));           let str = `         https://www.baidu.com         http://www.taobao.com.cn         https://google.cn         `;         let reg = /https?://(w+.)?(w+.)+(com|cn|net|org|cc)/gi;         console.log(str.match(reg));     </script> </body>  </html>

 

字符串正则方法matchAll与split

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>          // search 字符串的搜索         // let str = 'yyccyy';         // console.log(str.search('c'));         // console.log(str.search(/c/g));           // match 字符串的匹配         // let str = 'yyccyy';         // console.log(str.match('c'));         // console.log(str.match(/c/g));           // let str = `         // https://www.baidu.com         // http://www.taobao.com.cn         // https://google.cn         // `;         // let reg = /https?://(w+.)?(w+.)+(com|cn|net|org|cc)/gi;         // console.log(str.match(reg));          // let reg = /https?://(?:w+.)?(?:w+.)+(?:com|cn|net|org|cc)/gi;         // let res = str.matchAll(reg);         // for (const iterator of res) {         //     console.log(iterator);         // }           let str = '2020-11-30';         let str2 = '2020/11/30';         console.log(str.split(/[-/]/));         console.log(str2.split(/[-/]/));     </script> </body>  </html>

 

$符在正则替换中的使用：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>          // let str = '2020/11/30';         // console.log(str.replace(/[/]/, '-'));         // console.log(str.replace(/[/]/g, '-'));           // let str = '(010)99999999 (020)8888888';         // let reg = /((d{3,4}))(d{7,8})/g;         // console.log(str.match(reg));         // console.log(str.replace(reg, "$1-$2"));           let str = '=cyy=';         // $& 匹配到的内容  $` 匹配内容的左边  $' 匹配内容的右边         console.log(str.replace(/cyy/, "$`可爱$&可爱$'"));     </script> </body>  </html>

吃通js正则表达式

 

 

$&使用

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <main>cyy喜欢吃炒年糕，cyy也喜欢吃汤年糕</main>      <script>          const main = document.querySelector('main');         main.innerHTML = main.innerHTML.replace(/年糕/g, "<a href='http://www.baidu.com'>$&</a>")     </script> </body>  </html>

吃通js正则表达式

 

 

原子组在替换中的使用技巧：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <main>         <a href="http://www.baidu.com" style='color:pink'>baidu</a>         <a id='link' href="http://baidu.com">baidu</a>         <a href="http://google.com">baidu</a>         <h4>http://www.baidu.com</h4>     </main>       <script>          const main = document.querySelector('main');         let reg = /(<a.*href=['"])(http)(://)(www.)?(baidu)/gi;         main.innerHTML = main.innerHTML.replace(reg, (v, ...args) => {             console.log(args);             args[1] += 's';             args[3] = args[3] || 'www.';             return args.splice(0, 5).join('');         });     </script> </body>  </html>

 

原子组别名：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>          let str = `       <h1>h1</h1>       <span>span</span>       <h4>h4</h4>       `;         // let reg = /<(h[1-6])>(.*?)</1>/gi;         // console.log(str.replace(reg, "<div>$2</div>"));          //起别名         let reg = /<(h[1-6])>(?<con>.*?)</1>/gi;         console.log(str.replace(reg, "<div>$<con></div>"));     </script> </body>  </html>

 

使用原子组别名优化正则：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <main>         <a href="https://www.baidu.com">baidu</a>         <a href="https://www.taobao.com">taobao</a>         <a href="https://www.google.com">google</a>     </main>      <script>         // [{link:,title:}]          const main = document.querySelector('main');         // let reg = /<a.*?href=(['"])(?<link>.*?)1>(?<title>.*?)</a>/i;         // console.log(main.innerHTML.match(reg));          let reg = /<a.*?href=(['"])(?<link>.*?)1>(?<title>.*?)</a>/gi;         let arr = [];         for (const iterator of main.innerHTML.matchAll(reg)) {             console.log(iterator['groups']);             arr.push(iterator['groups']);         }         console.table(arr);     </script> </body>  </html>

吃通js正则表达式

 

 

正则方法test

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <input type="text" name='email'>      <script>         const mail = document.querySelector('[name=email]');          mail.addEventListener('keyup', (e) => {             let value = e.target.value;             let res = /^[w-]+@[w+.]+(com|cn|org|cc)$/i.test(value);             console.log(res);         })     </script> </body>  </html>

 

正则方法exec

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <main>         cyy非常可爱，cyy到底有多可爱？baidu.com     </main>      <script>         const mail = document.querySelector('main').innerHTML;         let reg = /cyy/gi;         // console.log(mail.match(reg));           // console.log(reg.exec(mail));         // console.log(reg.lastIndex);          // console.log(reg.exec(mail));         // console.log(reg.lastIndex);          // console.log(reg.exec(mail));         // console.log(reg.lastIndex);           let count = 0;         while (res = reg.exec(mail)) {             count++;         }         console.log(count);     </script> </body>  </html>

 

？=  断言匹配：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <main>         cyy非常可爱，cyy可爱就可爱在……     </main>      <script>         const main = document.querySelector('main');         let reg = /cyy(?=可爱)/gi;         main.innerHTML = main.innerHTML.replace(reg, '<a href="https://www.baidu.com">$&</a>');     </script> </body>  </html>

吃通js正则表达式

 

 

使用断言规范价格：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         // 给所有金钱补上 .00 格式         let lessons = `         js,200元,300次         html,300.00元,105次         css,140元,260次         `;         let reg = /(d+)(.00)?(?=元)/gi;         let res = lessons.replace(reg, (v, ...args) => {             console.log(args);             args[1] = args[1] || '.00';             return args.splice(0, 2).join('');         });         console.table(res);     </script> </body>  </html>

 

?<= 断言匹配

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <main>         <a href="https://www.baidu.com">baidu</a>         <a href="https://www.google.com">google</a>     </main>      <script>         // let str = 'cyy123ccc098';         // let reg = /(?<=cyy)d+/gi;         // console.log(str.match(reg));           const main = document.querySelector('main');         const reg = /(?<=href=(["'])).+(?=1)/gi;         // console.log(main.innerHTML.match(reg));          main.innerHTML = main.innerHTML.replace(reg, 'http://www.taobao.com');      </script> </body>  </html>

 

使用断言模糊电话号：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         let users = `         cyy1电话：12345678911         cyy2电话：99999678911         `;          let reg = /(?<=d{7})d{4}/gi;         users = users.replace(reg, '*'.repeat(4));         console.log(users);      </script> </body>  </html>

吃通js正则表达式

 

 

?!断言匹配：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>      <script>         // ?= 后面是什么         // ?! 后面不是什么         let str = 'cyy2020ccc';          let reg = /[a-z]+(?!d)/gi; // 错误         let reg = /[a-z]+(?!d)$/gi; // 正确          console.log(str.match(reg));     </script> </body>  </html>

 

断言限制用户名关键词：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <input type="text" name='user'>      <script>         //要求注册名中不能包含cyy         let input = document.querySelector('[name=user]');         input.addEventListener('keyup', function () {             // let reg = /^(?!.*cyy.*).*/gi;             let reg = /^(?!.*cyy.*)[a-z]{5,6}$/gi;             console.log(this.value.match(reg));         })     </script> </body>  </html>

 

?<!断言匹配：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>       <script>         // ?<! 限制前面不是什么         let str = 'cyy999ccc';         let reg = /^(?<!d+)[a-z]+/gi;         console.log(str.match(reg));      </script> </body>  </html>

 

使用断言排除法统一数据：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Document</title> </head>  <body>     <main>         <a href="https://www.baidu.com/1.jpg">1.jpg</a>         <a href="https://oss.baidu.com/2.jpg">2.jpg</a>         <a href="https://cdn.baidu.com/3.jpg">3.jpg</a>         <a href="https://baidu.com/4.jpg">4.jpg</a>     </main>       <script>         // ?<! 限制前面不是什么         const main = document.querySelector('main');         //过滤oss         let reg = /https://([a-z]+)?(?<!oss)..+?(?=/)/gi;         main.innerHTML = main.innerHTML.replace(reg, (v) => {             return 'https://oss.baidu.com';         });      </script> </body>  </html>

 

便宜好用的国外VPS推荐