正则表达式基础及应用

正则表达式,按照我自己的理解,其实就是字符串的操作校验,所以先介绍关于字符串操作的知识:

第一个是search 查找搜索:

var str='abcdef'
alert(str.search('b'))    
//找到对应的位置 下标从0开始  没有找到对应的 返回是-1

第二个是substring 字符串截取

var str='abcdef' 

//第一个参数是起点  第二个参数是终点  截取的范围不包括终点的值----------
alert(str.substring(2,5)) 

//从起点开始 范围包括起点
alert(str.substring(1)) 

第三个是 charAt  返回字符串的某一位 下标从0开始

var str='abcdef'
//charAt 返回字符串的某一位  下标从0开始
alert(str.charAt(3))

第四个是  split  切割后存放到数组

 var text = '1995-11-20'
 var arr = text.split('-')
 alert(arr)

下面举例通过字符串操作的方法,将一串字符串中的数字提取出来:

 var str = '12 fff 87 er334 233 -=-=fa80';
 var arr=[];
 var tmp = '';
 //循环字符串
 for(var i=0;i<str.length;i++){
      //判断字符串中的每一位是否为数字 如果是的话就存进到tmp中 然后推进到arr数组中
      if(str.charAt(i)>='0' && str.charAt(i)<='9'){
           tmp +=str.charAt(i) 
      }else{
           if(tmp){
              arr.push(tmp);
                  tmp=''
              }
           }
 }
 if(tmp){
     arr.push(tmp);
     tmp=''
 }
 alert(arr)

可以看出 这种方法,代码量多,并且只是一个小功能而已,那么如果用正则表达式去匹配呢?


正则表达式对字符串的操作

正则表达式的 search 字符串搜索

var re = new RegExp('a');//获取一个字符串

var re = new RegExp('a','i');//获取一个字符串 忽略大小写

var str = 'hdjoAAAshd ';

alert(str.search(re));

正则表达式的 match 获取匹配的项目 把所有匹配的东西都提取出来

\d 表示一位数字 如果要匹配多位数 就要多一个\d 
g表示匹配对应得上的全部项目 +代表若干个 就是多少都可以

 var re = /\d+/g;

 var str ='adsf 34 656 cvs33'

 alert(str.match(re));

//正则表达式的 replace 替换所有匹配项

var str = 'abc aaa erw'

var re = /a/g;

alert(str.replace(re,'0'));//将匹配项替换成0

正则表达式的量词

{n} 代表n个 {n,m} 最少n个,最多m个 {n,}最少m个,最多不限

校验电话号码

/[1-9]\d{7}/

校验QQ号最少五位数 最多11位数 且开头数字不为0

/[1-9]\d{4,10}/

校验固话

比如 010-87496698-分机号 前面010不一定需要 规则加上?号 表示可有可无

分为三块 (0\d{2,3}-)? 代表区号 (-\d{1,5})?表示分机号 加上问号都是可有可无

/(0\d{2,3}-)?[1-9]\d{7}(-\d{1,5})?/

+号表示 至少1个 最多不限 {1,}

*号表示 至少0个 最多不限 {0,}

正则表达式的量词

方括号作用是 里面的值 任选一个 和外部的字符结合 进行匹配

[0-9] 0到9选一个 等价于 \d [a-z] a到z选一个

[^a-z] 除了字母 其他都要 [^a-z0-9] 除了数字和字母 其他都要

var str = 'apc vpc dpc gpc';

var re = /[ad]pc/g;

alert(str.match(re));

正则表达式的转义字符

\d 代表数字 等价于  [0-9]            \D 代表除了数字以外的  等价于 [^0-9]

\w 代表英文数字下划线 等价于[a-z0-9_]             \W 代表除了英文数字下划线以外的  等价于 [^a-z0-9_]

\s 代表空白字符  不可打印不可显示的字符             \D 代表非空白字符 

. 代表任意字符

接下来看一些基础应用实例:

第一个:敏感词过滤: 在第一个文本框输入敏感词 点击按钮过滤 将过滤后的内容 体现在第二个文本框

正则的写法就是就是 匹配字有 背景 大会上 但收到货 都要变成 ***

<body>
        <textarea  id="txt1" cols="40" rows="10"></textarea><br>
        <input type="button" id="btn" value="过滤">
        <textarea  id="txt2" cols="30" rows="10"></textarea>

        <script>
            window.onload=function(){
                var oTxt1 = document.getElementById('txt1');
                var oTxt2 = document.getElementById('txt2');
                var oBtn = document.getElementById('btn')
                
                oBtn.onclick=function(){
                    //编写规则
                    var re =/背景|大会上|但收到货/g;   //  |代表或的意思
                    //将敏感词过滤成*号
                    oTxt2.value = oTxt1.value.replace(re,'***')

                }

            }
        </script>
    </body>

第二个:过滤html标签: 在第一个文本框输入含html标签的内容 点击按钮过滤 将过滤后的内容 体现在第二个文本框

正则表达式就是将html标签替换成空字符  :

<body>
        <textarea  id="txt1" cols="40" rows="10"></textarea><br>
        <input type="button" id="btn" value="过滤">
        <textarea  id="txt2" cols="30" rows="10"></textarea>
        <script>
            window.onload=function(){
                var oTxt1 = document.getElementById('txt1');
                var oTxt2 = document.getElementById('txt2');
                var oBtn = document.getElementById('btn')
                
                oBtn.onclick=function(){
                    //编写规则
                    var re =/<[^<>]+>/g;   //  
                    //将敏感词过滤成*号
                    oTxt2.value = oTxt1.value.replace(re,' ')

                }

            }
            


            
            
        </script>
    </body>

第三个:校验邮箱,在输入框输入一个邮箱,点击验证,通过正则表达式的规则来判断输入的邮箱是否合法:

<body>
        <input type="text" id="txt"/><br>
        <input type="button" id="btn" value="检验"/>
        <script>
            //邮箱校验
            window.onload=function(){
                var oTxt = document.getElementById('txt');
                var oBtn = document.getElementById('btn');
                

                oBtn.onclick=function(){

                    // 邮箱组成  一串 英文数字下划线 加上 @ 加上 一串数字英文  加上.(需要转义)  加上一串英文  不区分大小写
                    //并且开头到结尾都必须遵守这个规则
                    //开头  ^  结尾  $
                    var re = /^\w+@[a-z0-9]+\.[a-z]+$/i
                    //正则检验 test
                    if(re.test(oTxt.value)){
                        alert('合法邮箱')
                    }else{
                        alert('不合法')
                    }
                }
            }
            


        </script>
    </body>

如果觉得有用的朋友可以加个关注,点个赞哦,欢迎交流!

猜你喜欢

转载自blog.csdn.net/zhangzeshan/article/details/84644429