正则表达式
首先我们要知道正则表达式是什么?
-----正式表达式又称规则表达式,通常用来检索或替换那些符合某些模式(规则)的文本。
正则主要用来搭配字符数的一下方法
search 查找
substring 获取子字符串
charAt 获取某个字符
split 分割字符串,获得到数组
replace 替换
match 获取匹配的项目
先来看看一个demo,来体会一下为什么要用正则表达式。
这里有一个需求就是过滤出所有的数字
var str = " 12 as,12das asdf 12 asdf";
var list = [];
var data = "";
//常规方法
for(var i = 0;i<str.length;i++){
if(str.charAt(i)>="0"&&str.charAt(i)<="9"){
data +=str.charAt(i);
}else{
if(data.length>0){
list.push(data);
data = "";
}
}
}
console.log(list);
//正则过滤
var list1 = [];
var reg = /\d+/g
console.log(str.match(reg));
其实所有的字符串操作都可以自己写,不用正则慢慢写总能写出来的,但是通过正则可以大大的简化流程更加方便。接下里我们来学习学习正则表达式。
RegExp对象
其实RegExp对象就是一个正则表达式的对象,表示匹配某一规则。共有两种写法js风格和perl风格。
js风格 new RegExp("a","i");
perl风格 /a/i
demo.1 正则基本使用
我们来看看这两组输出
var reg = new RegExp("a","");//第1个参数表示限制内容,第二个参数表示修饰符
console.log("123Asdasd 1 2 asd".search(reg)); //6
console.log("123asdasd 1 2 asd".search(/a/)); //3
用js风格去写正则表达式的话,逻辑都放在了第一个参数里。
用perl风格去写正则表达式的话,逻辑都用//来包裹这。
a 就是需要匹配的规则,search到a这个字符串第一次出现的位置对应的下标。
需要注意的是正则表达式是区分大小写的。两个内容是不一样的,A和a的原因所以最后的值是不一样的。
demo.2 search结合正则小案例 (i的修饰符)
if (window.navigator.userAgent.search(/firefox/i)!=-1) {
console.log("火狐");
}else if(window.navigator.userAgent.search(/chrome/i)!=-1){
console.log("chrome");
}
通过userAgent 来获取当前浏览器的相关信息,我们可以通过正则去判断浏览器的信息里是否含有相关字符串,来判断当前浏览器的信息。
后面的 i 表示修饰符,表示忽略大小写。
字符类
转义字符
.(点)---表示任意字符
\d 表示数字 \D 表示除了数字以外
\w 表示字母和数字 \W 表示除了字母和数字
\s 表示空格 \S表示除了空格
组合
[ ] 如[a-z0-9A-Z]表示a到z或者0到9或者A到Z的一个范围
量词
{n,m}最少出线n次 最多出线m次
* 表示任意次={0,}
?表示零次或一次 {0,1}
+表示一次或任意次{1,}
{n}表示正好n次
中文匹配
[\u4e00-\u9fa5]
行首行位
^ $ --->如去除空格 ^\s ..... \s$
非或
|表示或,^表示非--->^需要放在[]组合里面使用 如[^0-9] 非0-9
单词边界
\b 详见demo 9
修饰符
i 表示忽略大小写
g 表示全文查找
demo.3 \d的使用
并且正则表达式还支持 \ 转义字符,d表示字符串d,\d 表示数字
console.log("asd123asdasd 1 2 asd".search(/\d/));// 3 表示字符串中第一个数字对应的下标
demo.4 \s 的使用 去掉空格
console.log("a sd12 3asda sd 1 2 asd".search(/\s/g));
demo.5 + 和 g的使用
var str = "asdas 231,sad5645,2 210zx 1";
alert(str.match(/\d/));//2
alert(str.match(/\d/g));//2,3,1,5,6,4,5,2,2,1,0,1
alert(str.match(/\d\d\d/g));//231,564,210
alert(str.match(/\d+/g));//231,5645,2,210,1
match的作用表示获取匹配的项目
来看看第一个输出和第二个输出的区别,第一个只输出了一个也就是2,第二个却输出了全部的数字,说明g的修饰符的作用表示符合前者的所有的数据。
第二个输出和第三个输出的区别就是,输出了三位数因为用了\d\d\d来表示正则
第三个输出和第四个输出的区别就是,后者输出的是一个完整的数字,在数字的前后字符都不是数字。\d+就表示后面会有不止一个数据,如a+,就表示后面会有不止一个a。
demo.6 【xxx】组合
字符类表示一个范围,可以理解为多个 | | |
var str = "asdasdasdasdc";
console.log(str.match(/[abcde]/g));
console.log(str.match(/a|b|c|d|e/g));
以上两个结果是相同的。
如 \d=[0-9] \w=[0-9a-zA-Z]
demo.7 ^ 表示除了
var str = "asdasd123as123dasd,c哈哈";
console.log(str.match(/^[0-9a-z]/g));
该正则表达式表示除了0到9的数字和a到z的字符
demo.8 replace和(ig)正则的结合
var str = "asdas 231,sAd5645,2 210zx 1";
alert(str.replace(/a/ig,"哈"));
以上正则的意思就是找到所有的a无论大小写,配合replace去替换成 哈,若不加g,则只能替换最早出现的那个。
demo.9 \b
var str = "asdashello,asd hello,123hello hello";
console.log(str.match(/hello/g)); // 4个hello
console.log(str.match(/\bhello\b/g)); // 2个hello
我们可以看到 没有\b 边界符来修饰的,表示含有hello就符合筛选,一共有四处hello
若用\b修饰,表示hello是一个单独的单词,并不是某一个单词中包含hello,故符合要求的就第二个和第四个hello。
demo.10 敏感词过滤
将所有的数字过滤成***
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<textarea id="textarea1" rows="10" cols="40"></textarea>
<button id="btn">提交</button>
<textarea id="textarea2" rows="10" cols="40"></textarea>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
var textarea1 = document.getElementById("textarea1");
var textarea2 = document.getElementById("textarea2");
btn.onclick = function(){
textarea2.value = textarea1.value.replace(/\d+/g,"***");
}
}
</script>
</body>
</html>
如果说想要多个条件可以用 | 如\d+|a 就表示不匹配到数字或者字符a
demo.11 qq号码验证 首位不为0 长度5位到11位
var str = "我的qq号1013152446 你的qq号503684";
console.log(str.match(/[1-9]\d{4,10}/g));
首先首位不能为0,正则是[1-9]
除了首位,那么剩下的长度就是4-10,因为总长度是5-11,正则是\d{4,10}
demo.12 邮箱验证
如 h ahahaha_ha @ 163 . com,我们来分析一下结构
名字(首字符必须是字母,可以有字母,数字和_ . -组成) +@+域名(不能有下划线,数组,字母,-)+.+后缀(长度是2位到6位的字母)
[a-zA-Z] \w+ @ [a-z0-9A-Z-]+ . [a-z0-9A-Z]{2,6}
var red = /[a-zA-Z] [\w\.-_]+@[a-z0-9A-Z-]+\.[a-z0-9A-Z]{2,6}/
加上行首行尾 才够完美
var red = /^[a-zA-Z][\w\.-_]+@[a-z0-9A-Z-]+\.[a-z0-9A-Z]{2,6}$/
因为.(点)表示所有,所以需要加\表示转义
正则表达式的基本使用已经讲解完毕,若有阐述错误的地方,请指出并已改正。