正则表达式基础到复杂使用以及常用量词分析

最新推荐文章于 2020-12-24 11:25:26 发布

越努力越

最新推荐文章于 2020-12-24 11:25:26 发布

阅读量158

点赞数

分类专栏： JavaScript 文章标签： javascript 正则表达式

本文链接：https://blog.csdn.net/weixin_45353679/article/details/104954893

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

正则表达式

匹配字符串中字符组合的模式

^\w+([-+.]\w+)*@\w+([-+])

正则测试工具

https://tool.oschina.net/regex

1 正则表达式的使用

1.1 定义

// RegExp
var regexp = new RegExp(/456/);
console.log(regexp); //    /456/
// 直接量
var regexp2 = /abc/;

1.2 正则表达式对象方法 test()

正则表达式对象方法 test()，检测某字符串是不是符合规则

// 返回值true表示有符合规则的字符组合 
console.log(regexp2.test('abcfg')); //true
console.log(regexp2.test('bacfg')); //false
console.log(regexp.test(456)); //true
console.log(regexp.test('456')); //true

2 正则表达式的特殊字符

2.1 边界符

^ 匹配行首的文本以谁开头

$ 匹配行尾的文本以谁结束

var reg = /asd/; // 只要包含asd这个字符串就返回true
console.log(reg.test('asdgfd'));//true
var reg2 = /^asd/;  
console.log(reg2.test('asdgfd'));  //true
console.log(reg2.test('gasdfd')); //false
var reg3 = /^asd$/; //精确匹配
console.log(reg3.test('asdgfd'));  //false
console.log(reg3.test('gasdfd')); //false
console.log(reg3.test('asd')); //true
console.log(reg3.test('asdasd')); //false
var reg4 = /asd$/; //以asd结尾
console.log(reg4.test('asdasd')); //true

2.2 字符类

[] 表示有一系列字符可以选择，只需要匹配一个就可以。

var rg = /[xyz]/; // 字符串有xyz三个其中一个字符
console.log(rg.test('abcd')); // false
console.log(rg.test('abxcd')); // true
console.log(rg.test('abycd')); // true
console.log(rg.test('xabcdz')); // true
var rg2 = /^[xyz]$/; // 只能是x或者y或者z
console.log(rg2.test('xx')); // false
console.log(rg2.test('x')); // true
console.log(rg2.test('xy')); // false
console.log(rg2.test('z')); // true
var rg3 = /^[0-9a-z]$/; // - 范围
console.log(rg3.test(3)); //true
console.log(rg3.test('a3')); // false
// 中括号的^表示取反
var rg4 = /^[^0-9a-z]$/;
console.log(rg4.test('5')); // false
console.log(rg4.test('a')); // false
console.log(rg4.test('A')); //true

2.3 量词类

  *  

  +

  ？

  {n}

  {n,}

  {n,m}

var rg = /^c*$/; // *表示可以出现0次或多次 >=0 相当于 {0,}
console.log(rg.test('')); //true
console.log(rg.test('c')); //true
console.log(rg.test('cc')); //true
console.log(rg.test('adfg')); //false
var rg = /^c+$/; // +表示可以出现1次或多次 >=1 相当于{1,}
console.log(rg.test('')); // false
console.log(rg.test('c')); // true
console.log(rg.test('cc')); // true
console.log(rg.test('adfg')); //false
var rg = /^c?$/; // ?表示可以出现1次或0次 0 || 1 相当于{0,1}
console.log(rg.test('')); // true
console.log(rg.test('c')); // true
console.log(rg.test('cc')); // false
console.log(rg.test('adfg')); //false
var rg = /^c{3}$/; // 重复3次
console.log(rg.test('')); // false
console.log(rg.test('c')); // false
console.log(rg.test('cc')); // false
console.log(rg.test('ccc')); // true
var rg = /^c{3,}$/; // 至少3次
console.log(rg.test('')); // false
console.log(rg.test('c')); // false
console.log(rg.test('cc')); // false
console.log(rg.test('ccccc')); // true
var rg = /^c{3,5}$/; // 至少3次,最多6次
console.log(rg.test('')); // false
console.log(rg.test('c')); // false
console.log(rg.test('ccc')); // true
console.log(rg.test('cccccc')); // false

var rg = /^[a-zA-Z0-9_-]{6,16}$/;
console.log(rg.test('aa')); // false
console.log(rg.test('a123445')); // true

2.4 其他混合使用

var rg = /^[xyz]$/; // 只能是x或y或z
var rg2 = /^xyz{3}$/;
console.log(rg2.test('xyzxyzxyz')); //false
console.log(rg2.test('xyzzzz')); //true
var rg3 = /^(xyz){3}$/;
console.log(rg3.test('xyzxyzxyz')); //true
console.log(rg3.test('xyzxyzxyzxyz')); //false

实例：

检测用户名输入是否合法，合法提示用户名合法字颜色显示绿色；不合法，提示用户名不合法，颜色是红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .right {
            color: green;
        }

        .wrong {
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" id="uname" name="" id=""><span id='tip'></span>
    <script>
        var rg = /^[a-zA-Z0-9_-]{6,16}$/;
        var uname = document.querySelector('#uname');
        var tip = document.querySelector('#tip');
        uname.onblur = function() {
            if (rg.test(this.value)) {
                tip.className = 'right';
                tip.innerHTML = '用户名合法';
            } else {
                tip.className = 'wrong';
                tip.innerHTML = '用户名不合法';
            }
        }
    </script>
</body>
</html>

2.5 预定义类

  \d === [0-9] 

  \D === [^0-9] 

  \w === [a-zA-Z0-9_]

  \W === [^a-zA-Z0-9_]

  \s === [\t\r\n\v\f]   匹配空格

  \S === [^\t\r\n\v\f]  匹配非空格字符

3 正则表达式替换

replace() stringObj.replace(substr/rg,replacement)

var str = 'hello world';
//var newStr = str.replace('hello','hi');
var newStr = str.replace(/hello/, 'hi');
console.log(str); //hello world 原数组不变，产生新的数组
console.log(newStr); //hi world

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <textarea name="" id="msg" cols="30" rows="10"></textarea>
    <button>提交</button>
    <script>
        var btn = document.querySelector('button');
        var tarea = document.querySelector('textarea');
        btn.onclick = function() {
            // g全局匹配  i忽略大小写  gi  默认只会匹配一个
            tarea.value = tarea.value.replace(/激情|gay/gi, '**')
        }
    </script>
</body>

</html>