一、正则表达式概述
什么是正则表达式：用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。
正则表达式通常用来检索、替换那些符合某个模式（规则）的文本。例如验证表单（匹配）、过滤页面中的一些敏感词（替换）、从字符串中获取我们想要的特定部分（提取）。
二、正则表达式的特点
- 灵活性、逻辑性和功能性非常的强。
- 可以迅速地用极简单的方式达到字符串的复杂控制。
邮箱：
用户名
三、正则表达式的使用
在 JavaScript 中，可以通过两种方式创建一个正则表达式。
- 通过调用 RegExp 对象的构造函数创建。
let regexp = new RegExp(/表达式/) console.log(regexp) // /123/
- 利用字面量创建正则表达式
let regexp = /123/ console.log(regexp)
四、测试正则表达式
- test()： 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串。
let reg = /123/ console.log(reg.test(123)) //true console.log(reg.test('xbc')) //false
五、正则表达式中的边界符
正则表达式的组成：一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊符号的组合，比如 /ab*c/。其中特殊字符也被成为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等。
边界符：正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。
//只要包含 abc 就可以 let reg = /abc/ console.log(reg.test('abc')) //true console.log(reg.test('abcd')) //true
//必须以 abc 开头 let reg = /^abc/ console.log(reg.test('abc')) //true console.log(reg.test('abcd')) //true console.log(reg.test('cbad')) //false
//只能是 abc let reg = /^abc$/ console.log(reg.test('abc')) //true console.log(reg.test('abcd')) //false
六、正则表达式字符类
- 字符类：[] 表示有一系列字符可供选择，只要匹配其中一个就可以了。
//包含里面的任何一个字符都返回true let reg = /[abc]/ console.log(reg.test('andy')) //true console.log(reg.test('baby')) //true console.log(reg.test('red')) //false
//三选一: 只能是a 或者b 或者c 这三个字母才返回 true let reg = /^[abc]$/ console.log(reg.test('b')) //true console.log(reg.test('abc')) //false console.log(reg.test('andy')) //false
- [-] 方括号内部 范围符号 -
//26个小写英文字母任何一个都返回 true let reg = /^[a-z]$/ console.log(reg.test('a')) //true console.log(reg.test('y')) //true console.log(reg.test('A')) //false console.log(reg.test('abc')) //false
//26个英文字母任何一个都返回 true let reg = /^[a-zA-Z]$/ console.log(reg.test('a')) //true console.log(reg.test('y')) //true console.log(reg.test('A')) //true console.log(reg.test('abc')) //false
- 如果 [] 里面有 ^ 表示取反的意思。
//如果中括号里面有 ^ 表示取反的意思 let reg = /^[^a-zA-Z0-9_-]$/ console.log(reg.test('a')) //false console.log(reg.test('y')) //false console.log(reg.test('A')) //false console.log(reg.test('!')) //true
七、正则表达式量词符
- 量词符用来设定某个模式出现的次数。
- *：重复零次或更多次。
let reg = /^a*$/ console.log(reg.test('')) //true console.log(reg.test('a')) //true console.log(reg.test('aaa')) //true console.log(reg.test('abc')) //false
+：重复一次或更多次。
let reg = /^a+$/ console.log(reg.test('')) //false console.log(reg.test('a')) //true console.log(reg.test('aaa')) //true console.log(reg.test('abc')) //false
?：重复零次或一次。
let reg = /^a?$/ console.log(reg.test('')) //true console.log(reg.test('a')) //true console.log(reg.test('aaa')) //false console.log(reg.test('abc')) //false
{n}：重复 n 次。
let reg = /^a{3}$/ console.log(reg.test('a')) //false console.log(reg.test('aaa')) //true console.log(reg.test('abc')) //false
{n,}：重复 n 次或更多次。
let reg = /^a{3,}$/ console.log(reg.test('a')) //false console.log(reg.test('aaa')) //true console.log(reg.test('aaaaaa')) //true console.log(reg.test('abc')) //false
{n,m}：重复大于等于 n 次且小于等于 m 次。
let reg = /^a{3,5}$/ console.log(reg.test('a')) //false console.log(reg.test('aaa')) //true console.log(reg.test('aaaaa')) //true console.log(reg.test('abc')) //false
量词重复出现
//这个模式用户只能输入英文字母 数字 下划线 短横线 且 6-16 位 let reg = /^[a-zA-Z0-9_-]{6,16}$/ console.log(reg.test('study')) //false console.log(reg.test('andy-666')) //ture console.log(reg.test('andy!666')) //false
八、用户名验证
- 如果用户名输入合法，失去焦点后，提示合法，且颜色为绿色。
- 如果用户名输入不合法，失去焦点后，提示不合法，且颜色为红色。
<!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> span { color: #aaa; } .right { color: green; } .wrong { color: red; } </style> </head> <body> <input type="text" class="uname"><span>请输入用户名</span> <script> let input = document.querySelector('input') let span = document.querySelector('span') let reg = /^[a-zA-Z0-9_-]{6,16}$/ input.onblur = function(){ if(reg.test(this.value)){ span.innerHTML = '格式正确' span.className = 'right' }else{ span.innerHTML = '格式错误' span.className = 'wrong' } } </script> </body> </html>
九、预定义类
- 预定义类是某些常见模式的简写方法。
- \d：匹配 0-9 之间的任一数字，相当于 [0-9]
let reg = /^\d{1,5}$/ console.log(reg.test(123)) //true console.log(reg.test('aa123')) //false
\D：匹配所有 0-9 以外的字符，相当于 [^0-9]
let reg = /^\D{1,5}$/ console.log(reg.test('a-!')) //true console.log(reg.test('777')) //false
\w：匹配任意的字符、数字和下划线，相当于 [A-Za-z0-9_]。
let reg = /^\w{1,5}$/ console.log(reg.test('a-!')) //false console.log(reg.test('Aa66_')) //true
\W：匹配除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_]
let reg = /^\W{1,5}$/ console.log(reg.test('!')) //true console.log(reg.test('Aa66_')) //false
\s：匹配空格(包括换行符、制表符、空格符等)，相当于 [\t\r\n\v\f] 。
let reg = /^\s{1,5}$/ console.log(reg.test(' ')) //true console.log(reg.test('hi')) //false
\S：匹配非空格(包括换行符、制表符、空格符等)字符，相当于 [^\t\r\n\v\f]。
let reg = /^\s{1,5}$/ console.log(reg.test(' ')) //false console.log(reg.test('hi')) //true
十、座机号码验证
- 全国座机号码两种格式：010-12345678 或者 0530-1234567
//正则里面的或者符号 | (一个杠) let reg = /^\d{3}-\d{8}|^\d{4}-\d{7}$/
十一、字符串替换
- replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或者一个正则表达式。
stringObject.replace(regexp/substr,replacement)
- 第一个参数：被替换的字符串或者正则表达式
- 第二个参数：替换为的字符串
- 返回值是一个替换完毕的新字符串
<textarea name="" id="message"></textarea> <button>提交</button> let text = document.querySelector('textarea'); let btn = document.querySelector('button'); let div = document.querySelector('div'); btn.onclick = function() { div.innerHTML = text.value.replace(/激情|gay|jiqing/g, '**'); }
