正则表达式及常见用法介绍

strObj.search(正则) 返回 下标/-1
strObj.match(正则) 返回 数组/null
正则的方法:

re.test(字符) 返回 true/false
特点:只要有一个匹配就为true
解决: $ 解决
问题: 如果找的不是在行首,就不要用test
问题:用来test
g 不要加

正则:
干嘛用? 操作字符
理解:制定一种字符串的规则,以验证该字符串是否符合该规则
应用场景:邮箱验证、手机号验证、ip地址、关键词屏蔽等;

* 正则是一个javascript对象

正则表达式的创建方法:
eg:
var re = new RegExp(‘规则’,’选项’);
var re = 规则/选项

正则表达式语法介绍:
选择
i 忽略大小写
g 全局,通用
m 多行模式
m 只影响 ^ $

量词用法 : (个数、 n==最少 m==最大多 直管前面一个)
{n} 指定了n个
{n,m} 最少n个,最多m个
{n,} 最好n个,多了不限
{0,m} 最多m个,少了不限

+      若干个,不确定
       只管自己前面的那个字符
       eg: ab+ 重复多次出现b
       eg: (ab)+ 重复多次出现abab…

*       任意个 可以没有 
?       有一次或者没有 => {0,1}

条件用法:
^ 开头 行首
$ 结尾 行尾
\b 单词边界(能把单词隔开)

转义:
\d 数字 [0-9]
\w 单词(英文数字下划线) [a-z0-9_]
. 任意字符
特点: 出现在[]里面、可以直接写
出现在[]外面,需要转义 => .

    \D  非数字
    \W  非单词
    \S  非空格

字符的转义:
\ 转义本身
\x 转义字符x
\xnnnn n不转

    转义本身    \\
    \d 数字

或: | 低优先级

方括号[]:
[abc] 方括号 a或b或c 任选一个
[a,b,c] 或 a 或 b 或 c 或 ,
[x-o] 从x到o [0-9] [a-z]
[-] 或-
[a-c] a到c
[ab-] 或a或b或-
排除: / [abc] /
行首符: /^ /

注:默认情况下,正则表达式都是从左到右逐个匹配的

例:

//找字符串的索引
var str='ssssassss';
var re = /A/i   //简写
alert(str.search(re));
//合并空格
window.onload=function(){
    var str='I  love   you';
    str = str.match(/\S+/g).join(' ');
    console.log(str);
    document.write(str);    
};
//最近东哥发话了,“奶茶妹妹”这个词以后不准叫了,广大媒体也应该知道怎么屏蔽敏感词吧,下面就以这个举例子吧!
<script>
var str='章泽天,1993年11月18日出生于南京,网络红人。2009年因一张手捧奶茶的照片走红网络,被称为“奶茶妹妹”。2011年,章泽天就读清华大学。2014年4月14日,章泽天与刘强东的恋情被媒体曝光,引起网友广泛关注。2015年1月2日,奶茶妹主持的《燃烧吧大脑》在江苏卫视播出。';
var re = /奶茶妹妹|章泽天|刘强东/g;
document.write(str.replace(re,function(s){
    var star='';
    for(var i=0;i<s.length;i++){
        star+='*';  
    }
    return star;
}));
</script>

敏感词屏蔽

//剔除左右空格
window.onload=function(){
    var str='   love you  ';
    document.getElementById('ipt1').value = trim(str);

    function trim(str){
        str = str.replace(/^\s+|\s+$/g,'');
        return str; 
    }
};

<input type="text" id="ipt1"></input>
//替换字符里面所有的点
var str='jquery1.11.1.js';
str=str.replace(/\./g,'');
document.write(str);
//校验邮箱
window.onload=function(){
    var oIpt=document.getElementById('ipt1');
    var oBtn=document.getElementById('btn1');   
    var oSpan=document.getElementById('s'); 
    var re = /^[a-zA-Z0-9_\.\-]{3,17}[a-zA-Z0-9]@\w+\.[a-zA-Z]{2,3}(\.[a-zA-Z]{1,2})?$/;
    oBtn.onclick=function(){
        if(re.test(oIpt.value)){
            oSpan.innerHTML='合法'
        }else{
            oSpan.innerHTML='非法'    
        }
    };

<body>
    <input type="text" id="ipt1">
    <input type="button" value="校验邮箱" id="btn1">
    <span id="s"></span>
</body>
//只能输入中文
<script>
window.onload=function(){
    var oIpt=document.getElementById('ipt1');
    var re=/^[\u4e00-\u9fa5]+$/;   
    oIpt.onblur=function(){
        if(re.test(oIpt.value)){
            alert('ok');    
        }else{
            alert('ko');
        }
    };  
};
</script>
//校验座机号
<script>
window.onload=function(){
    var oIpt=document.getElementById('ipt1');
    var oBtn=document.getElementById('btn1');   
    var oSpan=document.getElementById('s'); 
    var re = /^(0[1-9]\d{1,2}-?)?[1-9]\d{6,7}$/;
    oBtn.onclick=function(){
        if(re.test(oIpt.value)){
            oSpan.innerHTML='合法'
        }else{
            oSpan.innerHTML='非法'    
        }
    };
};
</script>
<body>
    <input type="text" id="ipt1">
    <input type="button" value="校验座机" id="btn1">
    <span id="s"></span>
</body>

//表单验证实战

<style>
*{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"}
input{ border:#999 solid 1px;}
.error{ border:#F00 solid 1px;}
.ok{ border:green solid 1px;}
</style>
<script>
window.onload=function(){
    var oFm=document.getElementById('fm');
    var aIpt=document.getElementsByTagName('input');

    var json={
        mail:   /^\w+@\w+\.[a-zA-Z]{2,3}\.[a-zA-Z]{1,2}$/,
        tel:    /^(0[1-9]\d{1,2}-?)?[1-9]\d{6,7}$/,
        age:    /^(1[6-9]|[2-9]\d|100)$/,
        user:   /^[\u4e00-\u9fa5]+$/
    };

    oFm.onsubmit=function(){    
        var bOk=true;//假设校验合格   
        for(var i=0;i<aIpt.length;i++){
            if(aIpt[i].name){//有name属性再向下走
                var re = json[aIpt[i].name];
                if(!check(re,aIpt[i])){//校验后如果返回false
                    bOk=false;  
                }
            }
        }

        if(bOk==false){//如果校验不合格
            return false;   
        }   
    };

    for(var i=0;i<aIpt.length;i++){
        if(aIpt[i].name){
            var re = json[aIpt[i].name];
            (function(re){
                aIpt[i].onblur=function(){
                    check(re,this);
                };  
            })(re);
        }
    }

    function check(re,oIpt){
        if(!re.test(oIpt.value)){
            oIpt.className='error';
            return false;
        }else{
            oIpt.className='ok';
            return true;    
        }   
    }
};
</script>
</head>

<body>

<form action="url" id="fm">
    邮箱:<input type="text" id="mail" name="mail" value="alex@qq.com.cn"><br>
    电话:<input type="text" id="tel" name="tel" value="027-87654321"><br>
    年龄:<input type="text" id="age" name="age" value="18"><br>
    用户名:<input type="text" id="user" name="user" value="大帅哥"><br>
    <input type="submit" value="提交" id="btn1">
</form>

</body>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值