2. 科技
    3. JS正则随笔

    JS正则随笔

    科技2022-08-22  109

    文章目录

    1、创建正则选择符字符转义字符边界元子字符模式修饰原子表原子组引用分组分组别名 重复匹配禁止贪婪字符方法searchmatchsplitreplace 正则方法testexec 断言匹配(?=exp)(?<=exp)(?!exp)(?<!exp) 从后盾人文档学习记录

    1、创建正则

    字面量创建 使用//包裹的字面量创建方式是推荐的作法，但它不能在其中使用变量 对象创建

    let hd = "houdunren.com"; let web = "houdunren"; let reg = new RegExp(web); console.log(reg.test(hd)); //true

    选择符

    | 这个符号带表选择修释符，也就是 | 左右两侧有一个匹配到就可以。

    示例： 检测电话是否是上海或北京的坐机

    let tel = "010-12345678"; //错误结果：只匹配 | 左右两边任一结果 console.log(tel.match(/010|020\-\d{7,8}/)); //正确结果：所以需要放在原子组中使用 console.log(tel.match(/(010|020)\-\d{7,8}/));

    字符转义

    转义用于改变字符的含义，用来对某个字符有多种语义时的处理。

    假如有这样的场景，如果我们想通过正则查找/符号，但是 /在正则中有特殊的意义。如果写成///这会造成解析错误，所以要使用转义语法 ///来匹配。

    字符边界

    使用字符边界符用于控制匹配内容的开始与结束约定。

    元子字符

    元字符是正则表达式中的最小元素，只代表单一（一个）字符

    可以使用 [\s\S] 或 [\d\D] 来匹配所有字符

    模式修饰

    正则表达式在执行时会按他们的默认执行方式进行，但有时候默认的处理方式总不能满足我们的需求，所以可以使用模式修正符更改默认方式。

    原子表

    在一组字符中匹配某个元字符，在正则表达式中通过元字符表来完成，就是放到[] (方括号)中。

    使用[]匹配其中任意字符即成功，下例中匹配ue任何一个字符，而不会当成一个整体来对待

    const url = "houdunren.com"; console.log(/ue/.test(url)); //false console.log(/[ue]/.test(url)); //true

    原子组

    如果一次要匹配多个元子，可以通过元子组完成原子组与原子表的差别在于原子组一次匹配多个元子，而原子表则是匹配任意一个字符元字符组用 () 包裹

    没有添加 g 模式修正符时只匹配到第一个，匹配到的信息包含以下数据

    在match中使用原子组匹配，会将每个组数据返回到结果中

    0 为匹配到的完成内容

    1/2 等 为原子级内容

    index 匹配的开始位置

    input 原始数据

    groups 组别名

    引用分组

    \n 在匹配时引用原子组， $n 指在替换时使用匹配的组数据。下面将标签替换为p标签

    let hd = ` <h1>houdunren</h1> <span>后盾人</span> <h2>hdcms</h2> `; let reg = /<(h[1-6])>([\s\S]*)<\/\1>/gi; console.log(hd.replace(reg, `<p>$2</p>`));

    分组别名

    如果希望返回的组数据更清晰，可以为原子组编号，结果将保存在返回的 groups字段中

    let hd = ` <h1>houdunren</h1> <span>后盾人</span> <h2>hdcms</h2> `; let reg = /<(?<tag>h[1-6])>(?<con>[\s\S]*)<\/\1>/gi; console.log(hd.replace(reg, `<p>$<con></p>`));

    重复匹配

    如果要重复匹配一些内容时我们要使用重复匹配修饰符，包括以下几种

    因为正则最小单位是元字符，而我们很少只匹配一个元字符如a、b所以基本上重复匹配在每条正则语句中都是必用到的内容。

    禁止贪婪

    正则表达式在进行重复匹配时，默认是贪婪匹配模式，也就是说会尽量匹配更多内容，但是有的时候我们并不希望他匹配更多内容，这时可以通过?进行修饰来禁止重复匹配

    字符方法

    search

    search() 方法用于检索字符串中指定的子字符串，也可以使用正则表达式搜索，返回值为索引位置

    let str = "houdunren.com"; console.log(str.search("com"));

    使用正则表达式搜索

    console.log(str.search(/\.com/i));

    match

    直接使用字符串搜索

    let str = "houdunren.com"; console.log(str.match("com"));

    使用正则获取内容，下面是简单的搜索字符串

    let hd = "houdunren"; let res = hd.match(/u/); console.log(res); console.log(res[0]); //匹配的结果 console.log(res[index]); //出现的位置

    如果使用 g 修饰符时，就不会有结果的详细信息了（可以使用exec），下面是获取所有h1~6的标题元素

    let body = document.body.innerHTML; let result = body.match(/<(h[1-6])>[\s\S]+?<\/\1>/g); console.table(result);

    split

    用于使用字符串或正则表达式分隔字符串，下面是使用字符串分隔日期

    let str = "2023-02-12"; console.log(str.split("-")); //["2023", "02", "12"]

    如果日期的连接符不确定，那就要使用正则操作了

    let str = "2023/02-12"; console.log(str.split(/-|\//));

    replace

    replace 方法不仅可以执行基本字符替换，也可以进行正则替换，下面替换日期连接符

    let str = "2023/02/12"; console.log(str.replace(/\//g, "-")); //2023-02-12

    替换字符串可以插入下面的特殊变量名：

    replace 支持回调函数操作，用于处理复杂的替换逻辑

    <body> <div class="content"> 后盾人不断更新优质视频教程 </div> </body> <script> let content = document.querySelector(".content"); content.innerHTML = content.innerHTML.replace("后盾人", function( search, pos, source ) { return `<a href="https://www.houdunren.com">${search}</a>`; }); </script>

    正则方法

    下面是 RegExp 正则对象提供的操作方法

    test

    如果匹配到返回真，没有匹配到返回假

    exec

    不使用 g 修饰符时与 match 方法使用相似，使用 g 修饰符后可以循环调用直到全部匹配完。

    使用 g 修饰符多次操作时使用同一个正则，即把正则定义为变量使用使用 g 修饰符最后匹配不到时返回 null

    断言匹配

    断言虽然写在扩号中但它不是组，所以不会在匹配结果中保存，可以将断言理解为正则中的条件。

    (?=exp)

    零宽先行断言 ?=exp 匹配后面为 exp 的内容

    把后面是教程 的后盾人汉字加上链接

    <body> <main> 后盾人不断分享视频教程，学习后盾人教程提升编程能力。 </main> </body> <script> const main = document.querySelector("main"); const reg = /后盾人(?=教程)/gi; main.innerHTML = main.innerHTML.replace( reg, v => `<a href="https://houdunren.com">${v}</a>` ); </script>

    (?<=exp)

    零宽后行断言 ?<=exp 匹配前面为 exp 的内容

    匹配前面是houdunren 的数字

    let hd = "houdunren789hdcms666"; let reg = /(?<=houdunren)\d+/i; console.log(hd.match(reg)); //789

    (?!exp)

    零宽负向先行断言 后面不能出现 exp 指定的内容 使用 (?!exp)字母后面不能为两位数字

    let hd = "houdunren12"; let reg = /[a-z]+(?!\d{2})$/i; console.table(reg.exec(hd));

    (?<!exp)

    零宽负向后行断言 前面不能出现exp指定的内容

    获取前面不是数字的字符

    let hd = "hdcms99houdunren"; let reg = /(?<!\d+)[a-z]+/i; console.log(reg.exec(hd)); //hdcms
    Processed: 0.027, SQL: 9