正则表达式
1.正则对象
正则表达式：是对字符串操作的一种逻辑公式，就是用事先定义好的一些特殊字符，及这些特定字符的组合，组成一个‘规则字符串’，这个规则字符串用来表达对字符串的一种过滤逻辑。简单的说就是规定文本检索的内容 ，通常被用来检索、替换文本。
1.创建正则对象
//1.创建正则对象（\正则表达式）： RegExp
//var reg = new RegExp("检索的内容","修饰符")
var reg = new RegExp("o","ig");
console.log(reg);
//2.字面量创建
var reg = /o/ig;
console.log(reg);
2.修饰符
g: global 全局匹配
i: ignore case 不区分大小写匹配
var str = "w-e-r-t-y";
var reg1 = /-/;
var reg2 = /-/g;
console.log(str.replace(reg1, "*")); //w*e-r-t-y
console.log(str.replace(reg2, "*")); //w*e*r*t*y
var str = "ui0617UI0617";
var reg3 = /ui/g;
var reg4 = /ui/gi;
console.log(str.replace(reg3, "web")); //web0617UI0617
console.log(str.replace(reg4, "web")); //web0617web0617
3.正则的检索方式
a.字符串操作
//1.replace 替换正则匹配的字符串
var str = "w2e3r4t5y";
console.log(str.replace(/\d/g, "*"));//w*e*r*t*y
//2.split() 按正则匹配的内容拆分成数组
console.log(str.split(/\d/));//["w", "e", "r", "t", "y"]
//3.match 返回正则匹配到的内容，并组成一个新的数组
console.log(str.match(/\d/g));//["2", "3", "4", "5"]
//4.search 返回被查询字符串首次出现的位置，找不到返回-1
console.log(str.search(/\d/));//1
b.正则提供的方法
//1.test:检索字符串是否满足条件，满足true 不满足false
var str = "web123";
var reg = /\d/g;
console.log(reg.test(str)); //true
//exec:具体的检索，返回检索到内容
g:全局匹配 默认每次从字符串下标为0的位置开始检索，加了全局匹配，下一次匹配的时候，会从当前匹配到的位置往后//
var str = "web123";
var reg = /\d/g;
console.log(reg.exec(str)); //["1", index: 3, input: "web123", groups: undefined]
console.log(reg.exec(str)); //["2", index: 3, input: "web123", groups: undefined]
console.log(reg.exec(str)); //["3", index: 4, input: "web123", groups: undefined]
console.log(reg.exec(str)); //null
4.元字符
//---------------单个字符串------------------
//1. . :匹配除换行符(\n)以外的任意字符
var str = "\n13fd";
var reg = /./; //从左往右进行匹配，只要有满足条件的就可以
console.log(reg.exec(str));//["1", index: 1, input: "↵13fd", groups: undefined]
var str = "我们1021我们";
var reg = /我们....我们/;
console.log(reg.exec(str)); //"我们1021我们"
//2. []:匹配字符集中的任意一位字符
var str = "fds231";
var reg = /[0-9a-zA-Z*]/; //匹配数字字母或者*
console.log(reg.exec(str));//f
//3.[^]：匹配除字符集中的任意一位字符
var reg = /[^a-zA-Z]/; //除字母以外
var str = "fjsdkf^23d";
console.log(reg.exec(str));//^
//4. \d:匹配数字 ,\D:匹配非数字
var str = "134456";
var reg = /\d\d\d\d\d\d/;
console.log(reg.exec(str)); //"134456"
var str = "*1w2e3r4t5";
console.log(str.split(/\d/));//1
console.log(str.split(/\D/));//*
//5. \w:匹配数字、字母、_ \W:匹配非数字、字母、_ (特殊字符)
var str = "fd12";
console.log(/\w/.exec(str)); //f
//6. \s:匹配空格 \S:匹配非空格
var str =" hello world! ";
var reg = /\s/g;
console.log(str.replace(reg,""));//helloword
//7. ^a : 以a开头
var str = "13455678976RRRRRR";
var reg = /1\d\d\d\d\d\d\d\d\d\d/;
console.log(reg.exec(str));
//8. a$ : 以a结尾
var str = "12a";
var reg = /a$/;
console.log(reg.exec(str));//["a", index: 2, input: "12a", groups: undefined]
var str = "13455678976RRRRRR";
var reg = /^1\d\d\d\d\d\d\d\d\d\d$/;
console.log(reg.exec(str)); //null
//-----------------------多个字符---------------------
//1. a? : 匹配前面符号0次或1次
var str = "web";
var reg = /a?/;
console.log(reg.exec(str)); //["", index: 0, input: "web", groups: undefined]
//2. a* : 匹配前面的符号0次或多次，会尽可能的多匹配(连续的)
var str = "aaaweba";
var reg = /a*/;
console.log(reg.exec(str)); //["aaa", index: 0, input: "aaaweba", groups: undefined]
var str = "webweba";
var reg = /(web)*/;
console.log(reg.exec(str)); // ["webweb", "web", index: 0, input: "webweba", groups: undefined]
//3. a+:匹配前面的符号至少1次，会尽可能的多匹配
var str = "http://www.b.com";
var reg = /^http:\/\/www\.\w+\.[a-zA-Z]+$/; // 转义 \
console.log(reg.exec(str));//["http://www.b.com", index: 0, input: "http://www.b.com", groups: undefined]
//4. a{n,m}:匹配a最少n次，最多m次
//{n,} : 最少n次，最多不限
var str = "http://www.baidu.com";
var reg = /^http:\/\/www\.\w{2,}\.[a-zA-Z]{2,}$/
console.log(reg.exec(str));//["http://www.b.com", index: 0, input: "http://www.b.com", groups: undefined]
//{n}:最多n次
var str = "134456";
var reg = /^\d{6}$/;
console.log(reg.exec(str));//["134456", index: 0, input: "134456", groups: undefined]
//{n,m}
var str = "123344";
var reg = /^[1-9]\d{4,10}$/;
console.log(reg.exec(str));//["123344", index: 0, input: "123344", groups: undefined]
//---------------特殊------------------
//1. | 或 在选项中选一个
//http https
var str = "http://www.baidu.cn";
var reg = /(http|https):\/\/www\.[a-zA-Z0-9]{2,}\. (com|cn|net|udu|org|cc|gov)/;
console.log(reg.exec(str));
//2. () 分组 ：进行正则匹配的时候，会将（）中匹配的到内容，返回,除了匹配到整体之外，还将（）中的内容单独拿出来
var str = "hello world";
var reg = /(hello) (world)/;
console.log(reg.exec(str));//["hello world", "hello", "world", index: 0, input: "hello world", groups: undefined]
console.log(RegExp.$1);//hello 匹配第一个分组里的内容
console.log(RegExp.$2);//world 匹配第二个分组里的内容
console.log(str.replace(reg, "$2 $1"));//world hello
//3.非获取匹配 (?:a|b)
var str = "http://www.baidu.com";
var reg = /^(http|https):\/\/www.baidu.com$/
console.log(reg.exec(str)); //["http://www.baidu.com", "http", index: 0, input: "http://www.baidu.com", groups: undefined]//
var reg = /^(?:http|https):\/\/www.baidu.com$/
console.log(reg.exec(str)); //["http://www.baidu.com", index: 0, input: "http://www.baidu.com", groups: undefined]
//4.正向肯定预查 (?=)
var str = "weg34"; //获取后面接数字的字母
var reg = /[a-zA-Z](?=\d)/; //字母后面必须有数字
console.log(reg.exec(str));//g
//用户名，字母和数字的组合
//(?=.*[a-zA-Z].*)
var reg = /(?=.*[a-zA-Z].*)(?=.*\d.*)^[a-zA-Z0-9]{3}$/;
var str = "q2e";
console.log(reg.exec(str));//["q2e", index: 0, input: "q2e", groups: undefined]
//正向否定预查 (?!)
var str = "f1d2ae3";//获取后面不接数字的字母
var reg = /[a-zA-Z](?!\d)/; //字母后面不能是数字
console.log(reg.exec(str)); //"a"
//用户名，字母和数字的组合
//(?!^[a-zA-Z]+$) 不能是纯字母
var reg = /(?!^[a-zA-Z]+$)(?!^\d+$)^[a-zA-Z0-9]{3}$/; //不能是纯字母
var str = "1e3";
console.log(reg.exec(str));
//反向肯定预查 (?<=) 前面必须是什么
var str = "12w3";
var reg = /(?<=[a-zA-Z])\d/; //数字前面必须是字母
console.log(reg.exec(str)); //3
//反向否定预查 （?<!）
var str = "12w3";
var reg = /(?<![a-zA-Z])\d/; //数字前面不能是字母
console.log(reg.exec(str)); //1
//扩展
str = str.replace(reg,function(a){
console.log(a); //会把每一次正则匹配到的内容，传递到a里面
return a+"*";
});
console.log(str);
5.正则的相关实例
（1）去掉首尾空格
var str=" hello world ";
var reg=/^\s+|\s+$/g;
var s=str.replace(reg,"");
console.log(s);
（2）过滤敏感词
var oIn = document.getElementsByTagName("input")[0];
var oP=document.getElementsByTagName("p")[0];
oIn.onblur = function(){
var reg=/傻逼/g;
oP.innerHTML= oIn.value.replace(reg,function(a){
var n="";
for(var i=0;i<a.length;i++){
n+="*";
}
return n;
})
}
（3）实现注册页面检测操作
<div>
请输入账号: <input type="text"> <span></span> *用户名以字母开头，必须是数字和字母的组合<br>
请输入密码: <input type="password"> <span></span> *必须数字和字母的组合5--10<br>
请输入手机号: <input type="text"> <span></span><br> *必须11位
请输入邮箱: <input type="text"> <span></span>
</div>
<script>
var oIn = document.getElementsByTagName("input");
var oSpan=document.getElementsByTagName("span");
oIn[0].onblur = function () {
if (/(?!^\d+$)(?!^[a-zA-Z]+$)^[a-zA-Z][a-zA-Z0-9]+$/.exec(oIn[0].value)) {
oSpan[0].innerHTML = "正确";
oSpan[0].className = "green";
}else {
oSpan[0].innerHTML = "错误";
oSpan[0].className = "red";
}
}
oIn[1].onblur = function(){
if(/(?!^\d+$)(?!^[a-zA-Z]+$)^[a-zA-Z0-9]{5,10}$/.exec(oIn[1].value)){
oSpan[1].innerHTML = "正确";
oSpan[1].className = "green";
}else{
oSpan[1].innerHTML = "错误";
oSpan[1].className = "red";
}
}
oIn[2].onblur = function(){
if(/^1[3|4|5|6|7|8|9][0-9]{9}$/.exec(oIn[2].value)){
oSpan[2].innerHTML = "正确";
oSpan[2].className = "green";
}else{
oSpan[2].innerHTML = "错误";
oSpan[2].className = "red";
}
}
oIn[3].onblur = function(){
if(/(?!^0)^[a-zA-Z0-9]{1,}@[a-zA-Z0-9]{2,3}\.[a-z]{2,3}$/.exec(oIn[3].value)){
oSpan[3].innerHTML = "正确";
oSpan[3].className = "green";
}else{
oSpan[3].innerHTML = "错误";
oSpan[3].className = "red";
}
}
986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
