javascript 知识点 第八篇 正则表达式

八正则表达式

一 正则基础

1.正则的概念

正则表达式:
        1.一种高效处理字符串的规则
        2.正则表达式,是一种逻辑公式
        3.正则表达式由普通字符和元字符组成(一种有特殊意义的符号)
        4.正则表达式执行逻辑:正则是一种规则,对字符串进行验证,如果验证正确,则返回true,否则返回false;
        5.正则表达式的作用:对字符串进行匹配,查找,替换,获取

2.正则的创建

正则表达式的创建:
   字面量:
        var reg = /匹配规则/i g    (var  reg = /G$/i;//注:i要写在外面)
           第一个 / 表示正则表达式的开始
           最后一个 / 表示正则表达式的结束

           注:匹配规则不能接收变量
     构造函数:
            var reg = new RegExp('表达式','i/g');
            表达式可以接受变量
            i:忽略大小写  g:全局匹配

3.正则的匹配

正则的匹配:
        正则表达式.test(要匹配的字符串)
        返回值为:true  false

   var str = '拼搏到无能为力,坚持到感动自己';
//字面量
    var reg = /拼搏/;
    console.log(reg.test(str));

 var str = "HOW are you";
    var reg = new RegExp('how','i');
    console.log(reg);
    console.log(reg.test(str));

二 元字符

元字符:具有特殊意义的字符
    以a 开头 /^a/
    以b结尾 /b$/

    /^$/  全部匹配一遍,限制字符数量必须和正则保证一致
	不设置^ $ 检查 字符创是否包含了正则规则
    如果设置了^ $ 匹配整个字符串,必须每一个字符都要对应的上

判断一个字符串是不是包含字母:
    字符的集合[]代表一个字符的集合
        [a-z]  小写的集合
        [A-Z]  大写的集合
        [0-9]  数字的集合
        \d     数字的匹配
        {n} n是一个非负整数,匹配确定的n次  
        {n,} 最少匹配次
        {n,m} 最少匹配n 次 最多m 次


        + {1,} 至少匹配一次
        * {0,} 有也行没有也行
        ? {0,1}  0或者是1次
        
        \w 数字 字母 下划线 
        . 任意字符
        如果要匹配. ,要进行转义(\.)
        \b 边界符(包括空格,也包括一个字符串的开头和结尾)
        \s 空格
        | 或模式匹配

案例:
var  reg = /G$/i;//注:i要写在外面
var reg = /[a-zA-Z]/;//只要包含大小写就可以
var reg = /^[a-zA-Z]{5}/  //字符串前五个是字母
var reg = /\d{5}$/ //后五个是数字
var reg = /^\d[a-z]?$/; ///^*/意味着必须每一个字符都能匹配上
var reg = /abc?/;//判断一个字符串是不是包含ab或者abc 
var reg = /abc?$/;//一个字符以ab或者abc结尾
var reg = /[a-zA-Z]{3,6}/;//是否有三位到六位的字母
var reg = /^[a-zA-Z]{3,6}$/;//一个字符串全部是字母并且是三到六位的
var reg = /^[a-zA-Z_][A-Za-z_\d]{3,7}$/;//字母数字下划线的组合\不能以数字开头\长度4-8位
var reg = /^.{3,}$/;//三个任意字符
var reg = /^0\.\d*[1-9]\d*$/;// 用正则判断 大于 0 小于1的字符
var reg = /ow\b/;//边界符(可以是空格,或者是字符的开头或结尾)

//判断压缩包格式
var reg = /^.+\.((zip)|(gz)|(rar))$/;
//判断手机号
var reg =/^1[356789]\d{9}$/ 
//日期格式
var reg = /^\d{4}[-\/\.]\d{2}[-\/\.]\d{2}$/
var reg = /^\d{4}([-\/\.]\d{2}){2}$/
//身份证号
var reg = /^(\d{17}(\d|x))|(\d{15})$/

三 脚本工具网站

http://tools.jb51.net/

四 正则替换(重)

str.replace(reg,替换内容)
replace  使用正则替换  
str.replace(正则表达式,替换结果)  

 var str = 'abcAdAead';
 var reg = /a/gi;//g全局匹配(所有符合要求的都进行替换) i(忽略大小写)
 console.log(str.replace('a','0'));
 console.log(str.replace(reg,"你")); 

五 正则查找

str.indexOf('不能接收正则表达式')
str.search(接收正则表达式) 返回值为下标  如果找不到返回-1    

 var str1 = "abcdef";
    console.log(str1.indexOf("c"));

    var str = "我是xx,手机号为18333610977"
    var reg = /1[356789]\d{9}/;
    console.log(str.search(reg));

六正则获取

正则方法:
reg.exec(str);
返回值为一个数组:
    数组第一项[0]:正则所匹配到的所有信息
    数组第二项[1]:正则第一个()所取到的信息
    数组第三项[2]:正则第二 个()所取到的信息
字符串方法:
    str.match(reg); 

var str = '我是xx,身份证132280199909093123'
	//想要得到谁,就把谁放在括号里面,称为子匹配项
     var reg = /\d{6}(\d{4})(\d{2})(\d{2})\d{3}(\d|X)/;
     var str1 = reg.exec(str);//返回值是一个数组
     var str1 = str.match(reg);
     console.log(str1[i]);//获取的是字符串身份证中第一个括号里面的信息(年份)

案例:正则做表单验证
<label for="">请输入名称(字母下划线开头字母数字下划线组合,'6-10位')</label>
    <input type="text">
    <span></span>
    <script>
        var
            oInput = document.querySelector('input'),
            oSpan = document.querySelector('span');
        //第一个字符已经占了一位
        var reg = /^[a-zA-Z_]\w{5,9}$/;
        //onblur 获取焦点
        oInput.oninput = function () {
            var info = oInput.value;
            if (reg.test(info)) {
                oSpan.innerHTML = '验证成功';
            } else {
                oSpan.innerHTML = '验证失败';
            }
        }

案例:正则动态添加类名
 var oDiv = document.querySelector('.box');
        //动态添加类名  如果存在 则不添加
        function addClass(ele, classN) {
            //先获取元素现有的类名 
            var _className = ele.getAttribute('class');
            //创建正则,用来匹配_className
            //正则分析 类名左侧  可能是^ 可能\s  类名右侧可能是\s 也可能是$
            var reg = new RegExp('(^|\\s)' + classN + '($|\\s)', 'g');
            console.log(reg);
            if (!reg.test(_className)) {
                ele.className += ' ' + classN;
            }
        }
        //注:new RegExp  正则中\需要转义 \\
        addClass(oDiv, 'aaa');
        var reg = new RegExp('(^|\\s)bbb($|\\s)', 'g');
        var str = 'box aaa ccc';
        console.log(reg.test(str));

七 正则的高级

 1.()分组模式匹配  

2.\1    \2  \3....
	\1  正则表达式中第一个()里面的表达式
	\2 正则表达式里面第二个()里面的表达式

3.$1 $2 $3  .....
	$1 第一个(),匹配到的信息
    	替换的时候,匹配到正则里面()的信息

4.[^]  非

案例:
 var reg = /^(\d)\1+$/ ;//任意数字的叠字 
 var reg = /^(\d)(3)\2+$/;//第一位是任意数字,后面是3的重叠数

//身份证验证
    var str = '112233445566778899';
    var reg = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})(\d|X)$/; 
    console.log(reg.test(str));
//获取身份证里面的生日
var newStr = str.replace(reg,'$2-$3-$4');//第二 三 四个括号里面的值
var newStr = str.replace(reg,function($1,$2,$3){
    return $1;
});//$1返回的是整个字符串
console.log(newStr);

var reg = /^[^abcd]/;//开头不是abcd

DOM获取封装

   <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script>
        //DOM获取的方法
        function $(selector) {
            //对selector 进行判断  #box .txt 标签
            //获取对一个字符(# .)(否则代表是标签)
            var firstLetter = selector.charAt(0);
            //对第一个字符进行判断
            switch (firstLetter) {
                case "#": return idSelector(selector.slice(1));//如果第一个字符为#,调用id方法
                    break;
                case ".": return classSelector(selector.slice(1));//如果第一个字符为,调用class方法
                    break;
                default: return tagSelector(selector);//如果为标签,则调用tag方法
            }
            //函数方法(注意此时传递的参数idS是和selector有区别的  例:"box" 和 ".box")
            function idSelector(idS) {
                return document.getElementById(idS);
            }
            function tagSelector(tagS) {
                return document.getElementsByTagName(tagS);
            }
            function classSelector(classS) {
                // 判断浏览器是否支持getElementsByClassName,支持则执行,否则选择其他地方
                if (document.getElementsByClassName) {
                    return document.getElementsByClassName(classS);//存在兼容问题(IE8以下不支持)
                }else{
                     var domArr = [];//声明一个空数组,用来放置找到的DOM节点
                     var all = document.getElementsByTagName('*');//*表示获取所有节点
                     var reg = new RegExp('(^|\\s)'+classS+'($|\\s)');//正则验证类名(注:此处不要加全局变量)
                     for(var i = 0 , k = all.length; i < k ; i++){
                         var classStr = all[i].getAttribute('class');//每一次循环都获取当前元素的class类名
                        //  var classStr = all[i].className;
                         if(reg.test(classStr)){
                             //如果存在classStr,则将其push到新数组中
                             domArr.push(all[i]);

                         }
                     }
                     return domArr;
                }
            }
        }
        console.log($('.box'));