正则表达式 - JUZI's blog

正则表达式简介

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JS中，正则表达式也是对象。

正则表达式的作用：

被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文。
用于过滤掉页面内容中的一些敏感词（替换），或者从字符串中获取我们想要的特定部分（提取）等。

特点：

灵活性、逻辑性和功能性非常强
可以迅速地用极简单的方式达到字符串的复杂控制

在JavaScript中的使用

创建正则表达式

使用RegExp对象创建
```
let regexp = new RegExp(/123/);
```
直接使用字面量创建
```
let regExp = /123/;
```

测试正则表达式

使用test()正则对象方法，如果符合返回true，不符合返回false

let rg = /123/;
// 只要包含123就返回true
rg.test(123);	// true
rg.test('abc');	// false

特殊字符

详情查看MDN

边界符 ^ $

let reg = /^abc/;	// 以abc开头
let reg1 = /abc$/;	// 以abc结尾
let reg2 = /^abc$/;	// 精确匹配，必须是abc

字符类 [ ]

let reg = /[abc]/;	// 只要包含a或b或c就返回true
let reg1 = /^[a-z]$/;	// 只有是a到z中的单个字母才返回true

字符组合

let reg = /^[a-zA-Z0-9_-]$/;	// 大小写、数字、下划线和短横线中任何一个
let reg1 = /^[^a-zA-Z0-9_-]$/;	//字符类[]中的^表示取反操作，不能包含……

量词符

// * 可以出现0次或多次	
let reg = /^a*$/;	// "", "a", "aaa"	...
// + 出现1次或多次	
let reg1 = /^a+$/;	// "a", "aaa"	...
// ? 0次或1次
let reg2 = /^a?$/;	// "", "a"
// {3} 重复3次
let reg3 = /^a{3}$/;	// "aaa"
// {3,} 大于等于3次
let reg4 = /^a{3,}$/;	// "aaa", "aaaaaaa"	...
// {3, 5} 大于等于3,且小于等于5
let reg5 = /^a{3,5}$/;	// "aaa", "aaaa", "aaaaa"
// 小括号 表示优先级
let reg6 = /^(abc){3}$/;	// "abcabcabc"

注意：{}中间不能加空格

预定义类

常见模式的简单写法

\d   等价于 [0-9]
\D	 等价于 [^0-9]
\w   等价于 [A-Za-z0-9_]
具体查看MDN

正则替换

replace替换

replace方法第一个参数可以为正则表达式

let str = "hello world";
let newStr = str.replace('hello', 'good');
// or
let newStr = str.replace(/hello/, 'good');

正则表达式参数

表达式/[switch]
switch修饰符声明按照什么模式来匹配，有三种值

g：全局匹配
i：忽略大小写
gi：全局匹配+忽略大小写

let str = "big big world";
let newStr = str.replace(/big/, 'small');	// "small big world"
// 不加全局匹配只会替换第一个匹配的
let newStr1 = str.replace(/big/g, 'small'); // "small small world"

简单应用案例

<html>
    <head></head>
    <body>
        <input type="text" class="name">
        <span>请输入用户名</span>
        <script>
			let reg = /^[a-zA-Z0-9_-]{6,16}$/;
			let name = document.querySelector('.name');
            name.onblur = function() {
                if(reg.test(this.value)) {
                    console.log('true')
                    // 修改样式等操作。。。
                } else {
                    console.log('false')
                    // 修改样式等操作。。。
                }
            }
        </script>
    </body>
</html>

工具