js中的正则

js中的正则

一、作用

用来匹配复杂的字符串。

二、正则表达式的书写

1.字面量方式书写

let re = /a/i

2.实例方式书写

let re = new RegExp('a','i')

第一个参数是字符串，第二个参数是表示正则表达式的修饰符。
区别：字面量创建方式特殊含义的字符不需要转义，实例创建方式需要转义。

三、元字符

1. \d：匹配一个数字字符
   \D：除了数字字符
2. \s：空格或空白
   \S：除了空白
3. \w：字母、数字、下划线
   \W：除了字母、数字、下划线
4. . ：除了换行符之外的的任何值。
5. \：转义字符
   在对象方式书写的正则表达式中，返回的其实是字符串，所以还需要再进行一次转义。

let re = /https?:\/\/\w+\.\w+\.\w+/
// 匹配网址

四、修饰符

1. i：匹配时不区分大小写。
2. g：匹配全部。
3. m：多行匹配。
4. y：匹配连续的。
   注：可组合使用

字符属性：都需要加修饰符u
{L}：字母
{P}：标点符号
{sc=}：语言类型

五、正则中的属性

1. lastIndex：表示开始搜索下一个匹配项的字符位置，从0开始；返回每次匹配到的字符的位置，匹配不到则变成0。

六、正则的方法

正则的方法：

1. exec方法：
   规则：正则.exec(字符串)
   作用：获得符合正则规则的字符串，以数组形式返回。
2. test方法：
   规则：正则.test(字符串)
   作用：验证字符串是否符合正则，返回true或flase

字符串方法：

1. search方法：
   搜索正则的内容，返回出现的位置。
2. match方法：
   搜索正则内容，将匹配到的结果放到一个数组内返回。
3. replace方法：
   替换正则匹配到的内容。

   let re = "2020/06/04"
   console.log(re.replace(/\//g,'-'));	// 2020-06-04

七、原子表和原子组

1. 原子表 []：[]中的字符只需要一个匹配成功即可。
   ①区间匹配：[0-9]、[a-z]
   ②排除匹配：[^x]它表示除了x都要匹配
   原子表中的某些特殊字符还是字符本意，并非正则的含义。例如：+、. 、() 等都是字符本身的含义。
2. 原子组()：()内部的字符必须全部匹配，用\1、\2、\3 …代表第n个原子组。

八、贪婪匹配

+、{}、*、？(0个或1个)都是贪婪匹配，会匹配尽可能多的字符。
禁止贪婪：加上?来禁止贪婪匹配，匹配少的。

九、正则的批量使用

可以使用正则的组合的方式来进行验证

// 简单的密码验证
<input type="text" value="" name="password">


const input = document.querySelector(`[name="password"]`)
    input.addEventListener('keyup',(e)=>{
        const value = e.target.value;
        const regs = [
            /^[a-z0-9]{5,10}$/i,
            /[A-Z]/,
            /[0-9]/
        ]
        let state = regs.every(e=>e.test(value));
        console.log(state?"正确":"错误");
    })

十、特殊符号在正则中的使用

1. $：
   可用作字符边界约束：
   表示限制结束边界

let re = /^[a-z]{3,6}$/
// 匹配3到6位的字母

可表示原子组的第几项：

    let str = "(010)666666666 (011)888888888"
    let re = /\((\d{3,4})\)(\d{7,8})/g   // 分为两个组，第一个组(\d{3,4})，第二个组(\d{7,8})
    console.log(str.replace(re,"$1-$2"));   //$1代表第一个组，$2代表第二个组
    // 010-666666666 011-888888888

$&：可表示字符串中匹配到正则的部分。

2. ^:
   表示限制开始边界
3. 断言匹配，可看作条件语句，符合条件则可匹配上。结果中看不到，只是作为条件。

    let str = '.js,200元,300次';
    let re1 = /(?<=,)\w+(?=元)/gi; 
    let re2 = /(?<!,)\w+(?!元)/gi;		//  ?<=：符合前面的条件，?=：符合正则后面的条件；?<!：不符合前面的条件，?!：不符合正则后面的条件。
    console.log(re1.exec(str));	// 200
    console.log(re2.exec(str));	// js

十一、练习

    // 将所有链接中没有https的加上s，没有www.的加上www.
    <main>
        <a style="color: red;" href="http://www.baidu.com">百度</a>
        <a href="http://shidu.com">十度</a>
        <a href="http://taobao.com">淘宝</a>
        <h4>不是链接</h4>
    </main>


    let re = /(<a.*href=['"])(http)(:\/\/)(www\.)?(baidu|shidu)/gi;
    let a = document.querySelector('main');
   a.innerHTML = a.innerHTML.replace(re,(...args)=>{
       args[2]+='s';
       args[4]=args[4]||"www.";
       return args.splice(1,5).join("");
   });

后续还会不断做出修改。