资讯详情

正则表达式

正则表达式是字符串(包括普通字符)a 到 z 之间的字母)和特殊字符(称为元字符)的逻辑公式是一个规则字符串,用于表达字符串的过滤逻辑。JavaScript正则表达式也是一种对象。

它经常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单,用户名输入框只能输入英文字母、数字、下划线。昵称输入框中可以输入中文。此外,正则表达式还用于过滤掉页面中的一些敏感词,或从字符串中获取我们想要的特性部分。

1.灵活性强,逻辑性强,功能性强。

2.字符串的复杂控制可以以极简单的方式快速实现。

3.对于刚接触的人来说,比较晦涩难懂。

4.实际开发一般是直接复制的正则表达式,但要求使用正则表达式并根据实际情况进行修改。

//1.利用regexp对象创建正则表达式         var regexp = new RegExp(/123/)         console.log(regexp); //2.用字面量创建正则 表达式         var rg = /123/

其中,test该方法用于检测字符串是否符合正则表达式要求。

符合返回true,反之返回false。

如下:

 var rg = /123/         console.log(rg.test(123));         console.log(rg.test('abc')); 

正则表达式可以由简单的字符串组成,如/abc/。也可以是简单和特殊字符的组合,如/ab*c/.其中,特殊字符又称元字符,是正则表达式中具有特殊意义的特殊符号,如$ ^ 等。

正则表达式中的边界符用于提示字符的位置,主要有两个字符。

注:边界符^假如出现在[ ]内部则表示取反 不同于这里的边界符意义

[ ]只要匹配其中一个,就有一系列的字符可供选择。

如下例子:

 // var rg = /abc/   只要包含abc就可         // 字符类:[ ]只要匹配其中一个,就有一系列的字符可供选择。          var rg = /[abc]/   //只要包含a 或b 或c 都返回true         console.log(rg.test('andy'));    //true         console.log(rg.test('red'));    //false         console.log(rg.test('box'));  //true         var rg1 = /^[abc]$/     //只有a 或只有b 或只有c  直到这三个字母返回true         console.log(rg1.test('a'));     //true         console.log(rg1.test('b'));    //true         console.log(rg1.test('c'));    //true         console.log(rg1.test('ab'));   //false         console.log(rg1.test('abcd'));  //false         console.log(rg1.test('abc'));    //false         var reg = /^[a-z]$/   //26英文字母 一切都回来了true   -表示a到z的范围         console.log(reg.test('a'));   //true         console.log(reg.test('z'));    //true         console.log(reg.test('1'));   //false         console.log(reg.test('A'));    //false         var reg1 = /^[a-zA-Z0-9-_]$/   //26英文字母(大小写均包含) 0-9 和 - _ 任何一个         console.log(reg1.test('a'));    //true         console.log(reg1.test(8);    //true         console.log(reg1.test(');    //true         console.log(reg1.test('_'));    //true         console.log(reg1.test('A'));    //true          var reg2 = /^[^a-zA-Z0-9-_]$/   //在[]内部^表示取反 这里的意思是 不能包含任何描述的内容           console.log(reg1.test('a'));    //false         console.log(reg1.test(8);    //false         console.log(reg1.test(');    //false         console.log(reg1.test('_'));    //false         console.log(reg1.test('A'));    //false  

// *相当于 >=0 可出现0次或多次         var reg = /^a*$/         console.log(reg.test(');   //true         console.log(reg.test('a'));   //true         console.log(reg.test('aaaaa'));    //true         console.log('---------------------');  //   相当于 >=1   可以出现 1次或多次         var reg1 = /^a $/           console.log(reg1.test(');      //false         console.log(reg1.test('a'));    //true         console.log(reg1.test('aaaaa'));     //true         console.log('---------------------'); // ?相当于 1 || 0 一次或0次         var reg2 = /^a?$/         console.log(reg2.test(');  //true         console.log(reg2.test('a'));   //true         console.log(reg2.test('aaaaa'));    //false //  {3}    就是重复3次         var reg3 = /^a{3}$/             console.log(reg3.test(');   //false         console.log(reg3.test('a'));   //false         console.log(reg3.test('aaa'));   //true         console.log('---------------------'); //  {3,}   大于等于3次         var reg4 = /^a{3,}$/         console.log(reg4.test(');     //false         console.log(reg4.test('a'));     //false         console.log(reg4.test('aaa'));    //true         console.log(reg4.test('aaaaaa'));  //true         console.log('---------------------');          // {3,15}  >=3 && <=16 次         var reg5 = /^a{3,16}$/         console.log(reg5.test(');     //false         console.log(reg5.test('a'));    //false         console.log(reg5.test('aaa'));   //true          console.log(reg5.test('aaaaaa'));   //true         console.log(reg5.test('aaaaaaaaaaaaaaaaaaaaaaaaa'));  //false

将量词与字符结合起来 构成完整用户名单的正则表达式

 // 量词: 用来设定某个模式出现的次数。
        var reg = /^[a-zA-Z0-9-_]{6,15}$/        //{6,15}的左侧不能有空格
        console.log(reg.test('andy123'));    //true
        console.log(reg.test('007-_AZC'));    //true
        console.log(reg.test('andy123456!'));     //false
        console.log(reg.test('andy1234678921521010'));    //false

1.大括号、量词符里边表示重复次数。

2.中括号,字符集合,匹配方括号中的任意字符。

3.小括号表示优先级。

这里有相关小括号的例子:

var reg = /^abc{3}$/     //他只是让c重复3次
        console.log(reg.test('abccc'));   //true
        console.log(reg.test('abc'));   //true
        console.log(reg.test('abcabc'));    //false
        console.log('-------------------------------');
        var reg1 = /^(abc){3}$/     
        console.log(reg1.test('abccc'));    //false
        console.log(reg1.test('abc'));      //false
        console.log(reg1.test('abcabcabc'));       //true

 

利用预定义类进行座机号码验证:

//座机号码验证   两种格式 010-12345678    0530-1234567
        var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/      //  | 在正则表达式中是或的意思

replace替换:

replace()方法可以实现替换字符串操作,用来替换的参数可以是一个字符串或一个正则表达式。

语法格式:

stringObject.replace(regexp/substr,replacement)
var str = 'andy和baby'
        var newStr = str.replace('andy','baby')
        console.log(newStr);

它将andy替换成了baby ,不会影响原来的字符串,而是返回一个新的字符串。 

 

 

/表达式/[switch]

switch也称为修饰符(按照什么样的模式来匹配),有三种值:

p:全局匹配; g是global的意思

i:忽略大小写;   

gi:全局匹配+忽略大小写。

例子:将textarea中的内容在按下按钮后替换我们规定的字符为**。并显示在div里。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: #ccc;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10" class="text"></textarea><button>提交</button>
    <div></div>
    <script>
        // var str = 'andy和baby'
        // var newStr = str.replace('andy','baby')
        // console.log(newStr);
        // console.log(str);
        var text =document.querySelector('.text')
        var btn = document.querySelector('button')
        var div = document.querySelector('div')
        btn.onclick = function() {
            div.innerHTML = text.value.replace(/激情|gay/g,'**')
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .right {
           color: greenyellow;
        }
        .wrong {
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" class="uname"/>
    <span>请输入用户名</span>
    <script>
        // 量词: 用来设定某个模式出现的次数。
        var reg = /^[a-zA-Z0-9-_]{6,15}$/        //{6,15}的中间不能有空格
        var uname = document.querySelector('.uname')
        var span = document.querySelector('span')
        uname.onblur = function() {
            if(reg.test(this.value)) {
                span.innerHTML = '用户名格式输入正确'
                span.className = 'right'
            } else {
                span.innerHTML = '用户名格式输入有误,请重新输入'
                uname.value = ''
                span.className = 'wrong'
            }
        }

    </script>
</body>
</html>

输入正确时:

输入有误时:

菜鸟工具 - 不止于工具。

标签: 实时反映电容状态azc

锐单商城拥有海量元器件数据手册IC替代型号,打造 电子元器件IC百科大全!

锐单商城 - 一站式电子元器件采购平台