JavaScript 正则表达式1. 什么是正则表达式正则表达式（Regular Expression）是用于匹配字符

正则表达式的作用

注意：一定不要再正则表达式里面乱加空格

正则表达式概述

1. 什么是正则表达式

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

2. 正则表达式的作用

匹配字符串
替换字符串
提取字符串

3. 正则表达式的特点

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

4. 正则表达式的缺点

比较难以阅读，难以理解。
我们在实际开发中一般都是直接复制写好的正则表达式，但是也要会更具实际情况修改。比如：用户名只能够输入 abcd..z 或 0-9 或下划线（ _ ）或横线（ - ）这些字符，并且不能小于 3 位，不能大于16 位。

/^[a-z0-9_-]{3,16}$/

正则表达式再 JavaScript 中的使用

1. 通过 RegExp 创建一个正则表达式

语法：（正则表达式中不需要加引号，不管是数字还是字符串型）

let 变量名 = new RegExp(/表达式/)

例子：可以通过 RegExp 对象创建正则表达式：

let regexp = new RegExp(/123/)
console.log(regexp) // 结果 /123/

例子：可以通过字面量的方式创建正则（推荐写法）

let regexp = /123/
console.log(regexp) // 结果 /123/

2. 使用 test 方法检测正则表达式

test() 是正则表达式专用的一个方法，主要用来检测字符串是否符合正则表达式的规则，它的返回值是 true (符合规范) 和 false (不符合规范) ，其参数是字符串。

语法：注意传值为字符串，不推荐传入 Number 类型

regexObj.test( str )

regexObj 正则表达式
str 要测试的字符串
就是检测 str 文本是否符合我们写的正则表达式规范

例子：

let str1 = 123
let str2 = '123'
let str3 = '124'
let regexp = /123/
console.log("str1", regexp.test(str1))
console.log("str2", regexp.test(str2))
console.log("str3", regexp.test(str3))

正则表达式中的特殊字符

1. 正则表达式的组成

一个正则表达式可以由简单字符构成，比如 /123/ , /abc/ , 也可以是简单和特殊字符的组合 ，比如 /12*3/ (* 就是一个特殊字符)其中特殊字符也被叫做元字符 , 在正则表达式中是具有特殊意义的专用符号，如 * , ^, $, + 等.. 。

查看所有的特殊字符访问 developer.mozilla.org/zh-CN/docs/…

边界符

例子：（不写边界符的结果）只要包含 123 就返回 true

let str1 = '123'
let str2 = '123777'
let str3 = '777123'

let regexp = /123/

console.log("str1", regexp.test(str1)) //true
console.log("str2", regexp.test(str2)) //true
console.log("str3", regexp.test(str3)) //false

例子：（写 ^ 边界符的结果）开头必须只能是 123 就返回 true

let str1 = '123'
let str2 = '123777'
let str3 = '777123'

let regexp = /^123/

console.log("str1", regexp.test(str1)) //true
console.log("str2", regexp.test(str2)) //true
console.log("str3", regexp.test(str3)) //false

例子：（写 $ 边界符的结果）结尾必须只能是 123 就返回 true

let str1 = '123'
let str2 = '123777'
let str3 = '777123'

let regexp = /123$/

console.log("str1", regexp.test(str1)) //true
console.log("str2", regexp.test(str2)) //false
console.log("str3", regexp.test(str3)) //true

例子：（写 ^ 和 $ 边界符的结果）精确匹配必须只能是 123 就返回 true。

let str1 = '123'
let str2 = '123777'
let str3 = '777123'
let str4 = '123123'

let regexp = /^123$/

console.log("str1", regexp.test(str1)) //true
console.log("str2", regexp.test(str2)) //false
console.log("str3", regexp.test(str3)) //false
console.log("str4", regexp.test(str4)) //false

2. 字符类 [] （字符类）表示有一系列字符可提供选择，只要匹配其中一个就可以了，只要加了 [] 就是多选一。

例子：第二位字符 0-9 都可以

let str1 = '123'
let str2 = '103'
let str3 = '113'
let str4 = '193'

let regexp = /^1[0-9]3$/

console.log("str1", regexp.test(str1)) //true
console.log("str2", regexp.test(str2)) //true
console.log("str3", regexp.test(str3)) //true
console.log("str4", regexp.test(str4)) //true

例子：只要包含 a 或 b 或 c 的字符串都符合规范

let str1 = 'apple'
let str2 = 'border'
let str3 = 'red'
let str4 = 'color'

let regexp = /[abc]/

console.log("str1", regexp.test(str1)) //true
console.log("str2", regexp.test(str2)) //true
console.log("str3", regexp.test(str3)) //false
console.log("str4", regexp.test(str4)) //true

例子：三选一只有是 a 或者 b 或者 c 这三个字母才返回 true

let str1 = 'a'
let str2 = 'border'
let str3 = 'b'
let str4 = 'color'
let str5 = 'c'
let str6 = 'abc'

let regexp = /^[abc]$/

console.log("str1", regexp.test(str1)) //true
console.log("str2", regexp.test(str2)) //false
console.log("str3", regexp.test(str3)) //true
console.log("str4", regexp.test(str4)) //false
console.log("str4", regexp.test(str5)) //true
console.log("str4", regexp.test(str6)) //false

3.范围符 [-] （方括号内的横线）

例如：第二位 a-z 都返回 true //true

let str1 = 'a'
let str2 = 'A'
let str3 = 'cc'
let str4 = '1'
let str5 = 'h'
let str6 = 'zz'
let str7 = 'z'

let regexp = /^[a-z]$/

console.log("str1", regexp.test(str1)) //true
console.log("str2", regexp.test(str2)) //fasle
console.log("str3", regexp.test(str3)) //fasle
console.log("str4", regexp.test(str4)) //fasle
console.log("str4", regexp.test(str5)) //true
console.log("str4", regexp.test(str6)) //fasle
console.log("str4", regexp.test(str7)) //true

例子：[^a-zA-Z0-9_-] 这里再 [] 里面的 ^ 表示的是取反。

let str1 = '1111'
let str2 = '22222'
let str3 = '33333'
let str4 = '44444'
let str5 = '!#@$%'
let str6 = '@#$@'
let str7 = '###!'

let regexp = /^[^a-zA-Z0-9_-]{1,10}$/

console.log("str1", regexp.test(str1)) //false
console.log("str2", regexp.test(str2)) //false
console.log("str3", regexp.test(str3)) //false
console.log("str4", regexp.test(str4)) //false
console.log("str4", regexp.test(str5)) //true
console.log("str4", regexp.test(str6)) //true
console.log("str4", regexp.test(str7)) //true

注意：如果将 ^ 写在了 [] 的里面表示取反的意思，千万不要和边界符的 ^ 搞混了。

量词符：用来设定某个模式出现的次数。

例子：下面的 a 这个字符必须重复出现 1~2 （可以理解为出现次数大于等于 1 并且小于等于 2）次才返回 true

let str1 = 'a'
let str2 = 'aa'
let str3 = 'aaa'

let regexp = /^a{1,2}$/

console.log("str1",regexp.test(str1)) //true
console.log("str2",regexp.test(str2)) //true
console.log("str3",regexp.test(str3)) //false

例子：下面的 a 这个字符必须重复出现 3~6 （可以理解为出现次数大于等于 3 并且小于等于 6）次才返回 true

let str1 = 'aaaaaa'
let str2 = 'aa'
let str3 = 'aaa'

let regexp = /^a{3,6}$/

console.log("str1",regexp.test(str1)) //true //true
console.log("str2",regexp.test(str2)) //false
console.log("str3",regexp.test(str3)) //true

例子：出现次数必须等于三次

let str1 = 'aaaaaaaaaaa'
let str2 = 'aaaaaaaa'
let str3 = 'aaa'

let regexp = /^a{3}$/

console.log("str1",regexp.test(str1)) //false
console.log("str2",regexp.test(str2)) //false
console.log("str3",regexp.test(str3)) //true

例子：出现必须次数大于等于三次

let str1 = 'aaaaaaaaaaa'
let str2 = 'aaaaaaaa'
let str3 = 'aaa'

let regexp = /^a{3,}$/

console.log("str1",regexp.test(str1)) //true
console.log("str2",regexp.test(str2)) //true
console.log("str3",regexp.test(str3)) //true

总结：这里结合 [] 和 {} 重点记一下，只要使用了 [] 括起来，就是多选一（只关注一位），如果想多个位置都已 [] 的规范来匹配就要用到 {} （量词）

括号总结

大括号 {n,m} 量词符里面表示重复次数
中括号字符集合匹配方括号中的任意字符
小括号表示由优先级大括号：

//这里只是让 c 可以重复三次 let reg = /^abc{3}$/

中括号：

//单个字符 a 或 b 或 c 都可以
let reg = /^[abc]$/

小括号：

//小括号表示优先级，这里就表示可以重复三次abc
let reg = /^(abc){3}$/

正则表达式对表单进行验证

例子：用户名验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: #aaa;
        }
        .wrong{
            color: red;
        }
        .success{
            color: #4de206;
        }
    </style>
</head>
<body>
    <label></label>
    <input type="text" class="uname" id="uname"><span id="span" class="">请输入用户名</span>

    <script>
        let reg = /^[a-zA-Z0-9]{4,6}$/
        let inputs = document.getElementById('uname')
        let spans = document.getElementById('span')
        inputs.addEventListener('keyup', function (){
            let val = this.value
            console.log(spans.className)
            if (reg.test(val)){
                spans.className = 'success'
            }else{
                spans.className = 'wrong'
            }
        })
    </script>
</body>
</html>

正常表达式替换内容

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

语法：

stringObject.replace(regexp|substr,replacement)

regexp: 正则表达式 substr: 被替换的字符串 replacement: 要替换什么字符串

例子：将字符串中的 123 替换为 abc

let str = 'abc123aaa123'
let reg = /123/
let new_str = str.replace(reg,'abc')
console.log(new_str)  //abcabcaaa123
console.log(str)

注意：replace 默认值替换一次

正则表达式的参数

语法：

/表达式/[switch]

g: 全局匹配（如果所有的内容都要进行匹配）
i: 忽略大小写
gi: 全局匹配和忽略大小写

例子：将字符串中的 abc 全部替换为 123 （注意这里使用了 g 全局匹配和 i 忽略大小写）

let str = 'Abc123aAa123ABC123abc'
let reg = /abc/gi
let new_str = str.replace(reg,'123')
console.log(new_str)

注意：replace 默认值替换一次