javascript 正则表达式详细入门教程

1.什么是正则表达式

　　定义：一个用来搜索、匹配、处理一些符合特定语法规则的一个强大的字符串处理工具。

　　用途：进行特定字符和字符串的搜索

　　　　　替换字符串中指定的字符或字符串

　　　　　验证字符串是否符合需求

2.为什么使用正则表达式？

大多数时候做开发其实不用正则表达式也能完成开发，但是学会了正则表达式可以帮助我们更加快速开发。

这是一个栗子：

str = "sad213jkls456poi412poippsd987a1";

将上面的字符串中的数字全部提取出来保存为数组，要求相连的数字保存为一个值

最终答案应该为： [213,456,412,987,1]

我们先不使用正则表达式去提取数据:

        let testStr = "sad213jkls456poi412poippsd987a1";
        let arr = [];
        let tempStr ="";
        for(let i=0; i< testStr.length;i++){
            let n = testStr.charAt(i);
            if(n>=0 && n<=9){
                //如果n是数字
                tempStr+=n;
                //验证最后的数字
                // if(i == testStr.length-1){
                //     if(tempStr) arr.push(tempStr);
                //     tempStr = "";
                // } 
            }else{
                //不是数字将temlStr push到arr中，并清空tempStr重新计算
                if(tempStr) arr.push(tempStr);
                tempStr = "";
             }
        }
        if(testStr) arr.push(tempStr); //验证最后的数字
        console.log(arr)

接下来使用正则表达式验证：

let testStr = "sad213jkls456poi412poippsd987a1";
let arr = testStr.match(/\d+/g);
console.log(arr)

我那个去，一句话就能提取了，牛x！

3.正则表达式的书写规则

//正则的书写方法

//1.字面量写法 优点：书写方便简介，缺点： 不支持变量
let re = /abc/;

//2.构造函数形式  优点：支持变量，缺点： 需要注意字符转义规则
let re2 = new RegExp('abc'); //使用new

4.元字符 -- 有特殊意义的标识

\d : 匹配数字

\w : 匹配数字、字母、下划线

\s ：查找空白字符

\D : 查找非数字字符。

\W : 匹配除了数字、字母、下划线

\S : 查找非空白字符。

\b : 匹配单词边界。

\B : 匹配非单词边界。

//元字符 有特殊含义的标识
let testStr = "sdasda-a123-sifah12300a.sadmn"
//假如我们要查找字符串中出现的第一个数字，并且知道该数字为1，可以使用indexOf
console.log(testStr.indexOf('1'));
//但是如果我们不知道该数字是多少呢？
let re = /\d/; // \d 表示匹配数字
console.log(testStr.match(re)); //返回一个数组，包括第一个数字出现的位置，值，还有操作的字符串

5.量词--代表匹配多少个

let re = /\d+/gm; //要提取数字的正则表达式
let testStr = "sad213jkls456poi412poippsd987a1";
//\d 后面的 '+' 就是一个量词，他代表匹配至少一个
let arr = testStr.match(/\d+/g);
console.log(arr)

值得注意的是可以使用 {n,m}来表示最少匹配和最多匹配

{n,m}最少匹配n次和最多匹配m次

{n}, 表示匹配n次.

{n,} 只写了n，并且留了', '，不写m ,则表示至少匹配n次，不限制最多匹配

更多元字符和量词可以参考菜鸟教程 - > 点我查看

6.范围匹配

[asdf] 匹配asdf中任意一个

[0-9] 匹配0-9数字

[a-z] 匹配小写字母a到小写字符z中任意一个字母

[A-Z] 匹配大写字母A到大写字符Z中任意一个字母
[A-z] 匹配任意一个字母，不区分大小写

[\u4e00-\u9fa5] 匹配中文

let testStr = "abcsadarcadcjlsjja2coqweycyaRc";
//匹配axc 模式的字符串,x为字母
let re = /a[A-z]c/g;
console.log(testStr.match(re),"字母")// ["abc", "arc", "adc", "aRc"] "字母"
let re2 = /a[0-9]c/g; //匹配axc 模式的字符串,x为数字
console.log(testStr.match(re2),"数字") //["a2c"] "数字"

let testStr = "ad啊萨达sduiow萨达-sd我我 萨达apoi";
let re = /[\u4e00-\u9fa5]/g; //匹配单个中文
console.log(testStr.match(re)) //["啊", "萨", "达", "萨", "达", "我", "我", "萨", "达"]
let re2 = /[\u4e00-\u9fa5]+/g; //匹配多个中文
console.log(testStr.match(re2)) //["啊萨达", "萨达", "我我", "萨达"]

接下来做一个组合练习

//组合练习 
let testStr = "adsas22jl98dkkkja213jklsd9qwe9t9yt9xz98xcz4xzc23";
//提取数字加字母组合的数组，要求字母至少一个，数字只能有一个

let re = /[A-z]+\d{1}/g;
console.log(testStr.match(re));//["adsas2", "jl9", "dkkkja2", "jklsd9", "qwe9", "t9", "yt9", "xz9", "xcz4", "xzc2"]

{1} 可以省略，因为\d默认只会匹配一次

7.分组

使用()对正则表达式进行分组,每一个()为子组

每一个子组都是一个正则表达式

通过分组，可以改变量词的影响范围

/[a-z]\d+/ 和 /([a-z]\d)+/ 匹配的就不同

let testStr = "a12jsdj2j1s4du2u1y24osf9lo90msad90xc0";
//找到 1个字母加一个数字组合的数组
let re = /([A-z]\d)+/g; //量词只能影响前面一个匹配模式或者前面一个分组--'()'的内容
console.log(testStr.match(re),"分组")//["a1", "j2j1s4", "u2u1y2", "f9", "o9", "d9", "c0"] "分组"

8.位置限制

^ : 匹配字符串开始位置的字符

$: 匹配字符串结束位置的字符

//位置限制
let testStr = "123adsad7986adsla290";
let re = /^\d+/g; //匹配开始位置的多个数字
console.log(testStr.match(re)); //["123"]
let re2 = /\d+$/g; //匹配结束位置的多个数字
console.log(testStr.match(re2)); //["290"]

9.修饰符

g: 匹配所有符合规则的字符串

i: 忽略大小写

m: 匹配多行（需要配合 ^ 或者 $ 使用才容易看出区别）

举个栗子：

以下是html 内容和js内容

<div class="main">
    <textarea id="txt"></textarea>
    <button id="btn">获取</button>
</div>

//修饰符
let testStr = "ASDAad213AAW2378SDLXNszx0808Ads08";
let re = /[a-z]+/g; //全局搜索
let re1 = /[a-z]+/gi; //全局搜索 + 忽略大小写
console.log(testStr.match(re)); //  ["ad", "szx", "ds"]
console.log(testStr.match(re1)); //["ASDAad", "AAW", "SDLXNszx", "Ads"]

let oBtn = document.getElementById("btn");
let oTxt = document.getElementById("txt");
let re3 = /^\d+/g;//获取数字开头的字符串
let re4 = /^\d+/gm;//获取数字开头的字符串， 多行
oBtn.onclick = function(){
    let val = oTxt.value;
    console.log(val.match(re3)) //["1231"]
    console.log(val.match(re4)) //["1231", "123", "56"]
}

下面是textarea填写内容

10.范围排除

[^abc] : 表示除了abc之外的字符
[^0-9] : 表示除了0-9之外的字符
[^a-z] : 表示除了a-z之外的字符

......

在范围匹配里面用 ^ 开头的表示除了xx以外

[a^bc] : 这里的^不是在开头位置，只能表示一个普通的字符

//范围排除
let testStr = "abc-adc-aac-aec-akcadl123kas21chcl2a^c";
let re = /a[bcd]c/g; //匹配 ["abc", "adc"]
let re2 = /a[^bcd]c/g;//匹配除了abc,acc,adc
let re3 = /a[b^cd]c/g;//匹配abc,acc,adc,a^c
console.log(testStr.match(re)); //["abc", "adc"] 
console.log(testStr.match(re2));  // ["aac", "aec", "akc", "a^c"]
console.log(testStr.match(re3));  // ["abc", "adc", "a^c"]

11.多选匹配

使用 | 隔开分别返回 | 两边各自匹配的结果

举个栗子:

将大写字母和小写字符分别匹配

//多选匹配
let testStr = "sdad23ASDAkjlOU20isdEWYmz082";
let re = /[a-z]+|[A-Z]+/g;
console.log(testStr.match(re));// ["sdad", "ASDA", "kjl", "OU", "isd", "EWY", "mz"]

12.正则方法

test() ：用于验证字符串是否符合正则表达式的规则

exec(): 匹配符串正则表达式的字符串和改字符串出现的位置（有点类似与macth）

栗子：

test()

<div>
    <input type="text" id="phone" placeholder="输入手机号"> <button id="verfityPhone">验证手机号</button>
</div>
<div>
    <input type="text" id="qq" placeholder="输入qq号"> <button id="verfityQq">验证qq号</button>
</div>

//正则表达式方法 test()
let testStr = "32ads12398829";
let testStr1 = "213908";
let re = /^\d+$/; //验证是否为纯数字
console.log(re.test(testStr)) //false
console.log(re.test(testStr1)) //true

//验证手机号  以1开头 第二个数字可以为[3,5,7,9] 总共11位
let rePhone = /^1[3579]\d{9}$/;
let verfityPhone = document.getElementById("verfityPhone");
let phone = document.getElementById("phone");
verfityPhone.onclick = function(){
    if(rePhone.test(phone.value)){
        alert(phone.value + "是手机号")
    }else{
                alert(phone.value + "不是手机号")
    }
}

//验证邮箱  验证qq号码 5-11位
let reQq = /^[1-9]\d{4,10}$/;
let verfityQq = document.getElementById("verfityQq");
let qq = document.getElementById("qq");
verfityQq.onclick = function(){
    if(reQq.test(qq.value)){
        alert(qq.value + "是qq号")
    }else{
        alert(qq.value + "不是qq号")
    }
}

exec()

//正则表达式方法： exec()
let testStr = "ads213;asdaj230-9ksldakadasd80823hywqey";
let re = /\d+/;  //不在全局作用下和match 返回值一样
let re1 = /\d+/g; 
console.log(re1.lastIndex); //0 初始值
console.log(re1.exec(testStr)); //['213',...]
console.log(re1.lastIndex);//6
console.log(re1.exec(testStr)); //['230',...]
console.log(re1.lastIndex);//15
console.log(re1.exec(testStr)); //['9',...]
console.log(re1.lastIndex);//17
console.log(re1.exec(testStr)); //['80823']
console.log(re1.lastIndex);//33
console.log(re1.exec(testStr)); //null
console.log(re1.lastIndex);//0 找不到后重置为0

lastIndex: 用于标记exec() 下一次执行匹配的开始位置

非全局模式下 exec()和match()返回值是一样的。

全局作用下，exec()一次只能返回一个匹配的值，但是会记录上一次值的lastIndex位置，依次执行就会依次查找，直到最后找不到匹配的字符返回null，然后重置lastIndex 为0，循环往复。

13.支持正则表达式的字符串方法

search() : 查找指定字符在字符串中出现的位置（只能返回字符第一次出现的位置，若没有找到，返回-1）

match(): 匹配正则表达式的

split(); 按某种格式分割字符串，返回数组

replace(): 替换字符串中符合正则表达式匹配的的值

栗子：

search()

//正则表达式字符串方法 search()
let testStr = "asd2131sad";
let re = /\d+/g; //只返回第一个匹配到的index,没有找到则返回-1
console.log(testStr.search(re)); //3

replace() 过滤敏感词

//正则表达式字符串方法 replace()
let testStr = "我是中华人民共和国公民,我爱我的祖国!";
let re = /中华人民共和国/g;
let res = testStr.replace(re,"*******");
console.log(testStr,res);//我是中华人民共和国公民,我爱我的祖国! 我是*******公民,我爱我的祖国!

split()

//正则表达式字符串方法 split()
let testStr = "asd-123sad-12ad-lgk-sasd";
let arr = testStr.split("-"); //简单的分割方式
console.log(arr); // ["asd", "123sad", "12ad", "lgk", "sasd"]

let testStr2 = "asd-123sad-12ad-lgk-sasd";
let re2 = /[a-z]\-/g; //字母- 组合形式的分割
let arr2 = testStr2.split(re2); 
console.log(arr2); //["as", "123sa", "12a", "lg", "sasd"]

let testStr3 = "asd-123sad-12ad-lgk-sasd";
let re3 = /\d+/g; //使用数字进行分割
let arr3 = testStr3.split(re3); 
console.log(arr3); //["asd-", "sad-", "ad-lgk-sasd"]

continue...

javascript 正则表达式 详细入门教程

猜你喜欢

javascript 正则表达式详细入门教程