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

1.什么是正则表达式

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

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

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

验证字符串是否符合需求

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

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

这是一个栗子：

str = "";

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

最终答案应该为： [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)); //返回一个数组，包括第一个数字出现的位置，值，还有操作的字符串

//空白字符 \s（包括空格，制表符，特殊空白字符等）
let testStr = "   我的左边  有空白，右边还是 有空白  ";
let re = /\s/g; //匹配所有空白字符 
let re2 = /^\s+/g; //匹配开头的空白字符
let re3 = /\s+$/g; //匹配结尾的空白字符
let re4 = /^\s+ | \s+$/g; //匹配开头和结尾的空白字符
let re5 = /[^\s+]\s+[^\s+$]/g; //匹配字符串中间空白字符
console.log('('+testStr+')');//(   我的左边  有空白，右边还是 有空白  )
//去除字符串的所有空白字符
console.log('('+testStr.replace(re,"")+')');//(我的左边有空白，右边还是有空白)
//去除开头的空白字符
console.log('('+testStr.replace(re2,"")+')');//(我的左边  有空白，右边还是 有空白  )
//去除结尾的空白字符
console.log('('+testStr.replace(re3,"")+')');//(我的左边  有空白，右边还是 有空白  )
//去除字符串开头和结尾字符
console.log('('+testStr.replace(re4,"")+')');//(我的左边  有空白，右边还是 有空白)
//去除字符串中间的字符
console.log('('+testStr.replace(re5,"")+')');//(   我的左空白，右边还空白  )

//单词边界
let testStr = "active act sky";
//匹配act 
let re = /act/;
//匹配单独的act 不匹配active 
let re2 = /act\b/;
console.log(testStr.match(re));//act", index: 0, input: "active act sky"...
console.log(testStr.match(re2)); //"act", index: 7, input: "active act sky" ..//匹配左右都不属于单词边界的't'
let testStr2 = "act active sky";
let re3 = /\Bt\B/;
console.log(testStr2.match(re3)); //"t", index: 6, input: "act active sky"...

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"]
}

下面是填写内容

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

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

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

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

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

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

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

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

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

栗子：

()

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

() 过滤敏感词

//正则表达式字符串方法 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"]

match() 被吃掉了，不清楚的重新再看此博客..

最后做两个小练习吧!

1.手动封装 e() 方法.

html部分：

<ul id="testUl"><li class="active">我的className是activeli><li>2li><li>3li>
ul>
<div class="active"><input type="text" id="phone" placeholder="输入手机号"> <button id="verfityPhone">验证手机号button>
div>

js部分：

//根据类名查找元素
function getElByClass(cName,container){//匹配单词边界的 cNamelet re = new RegExp('\\b' +cName+ '\\b');//查找到所有的tagName标签，可以传入指定的容器，然后查找let allElem = (container || document).getElementsByTagName('*');//初始化返回数据let arr = [];for(let i=0 ;i){//判断dom元素是否满足匹配的正则表达式，是的话就存入数组if(re.test(allElem[i].className)){arr.push(allElem[i]);}}return arr;
}
getElByClass('active'); //[li.active, div.active]
getElByClass('active',document.getElementById('testUl')); //[li.active]

2.实现简单的数据绑定模板.

html:

<div><h2>简易模板渲染引擎h2><div id="wrap">div>
div>

js:

最终效果就是这样的：

拜了个拜。