目录
5.1.正则表达式中的括号总结 // [] {} () 及 |
【第三章】正则表达式（重点）
| 概述
简介
-
正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也 是对象。
-
正则表达式通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单
-
应用举例：用户名表单只能输入英文字 母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一 些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。
特点
| 创建正则表达式
方法一：通过调用 RegExp 对象的构造函数创建
-
正则表达式不需要加引号
-
必须使用/ /括起来
var 变量名 = new RegExp(/表达式/);方法二：通过字面量创建
var 变量名 = /表达式/;代码示例
<!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>
<script>
//创建正则表达式 第一种方法
var regexp = new RegExp(/123/);
console.log(regexp); // /123/
//创建正则表达式 第二种方法
var regexp2 = /456/;
console.log(regexp2);// /456/
</script>
</head>
<body>
</body>
</html>| 测试某个字符串是否符合正则
-
test() 是一个正则对象的方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串。
regexObj.test(str)
代码示例
<!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>
<script>
var regexp = /123/;
console.log(regexp.test(123)); //true
console.log(regexp.test(234)); //false
</script>
</head>
<body>
</body>
</html>| 正则符号
什么是正则符号？
-
一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如 /ab*c/ 。其中 特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等
-
在线正则表达式测试网站：正则表达式在线测试 | 菜鸟工具
-
更多正则符号请参考菜鸟：正则表达式 – 运算符优先级 | 菜鸟教程
1.1.边界符 ^ $
-
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
-
如果 ^ 和 $ 在一起，表示必须是精确匹配
代码示例
代码示例2
//边界符 ^ $
var regexp1 = /^a/;
console.log(regexp1.test('ab'));//true
console.log(regexp1.test('ba'));//false1.2.连字符 -
-
若在 / / 内， [ ]外添加的 短横线，则代表这个地方必须写上一个横线。否则为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>
<script>
var r1 = /^A-B$/;
console.log(r1.test('A-B'));//true
console.log(r1.test('A'));//false
</script>
</head>
<body>
</body>
</html>2.1.字符类—方括号符 []
-
字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。
-
需要注意的是：如果供选择的字符是数字，写成 /^[1|2|3]$/ 或者 /^[123]$/ 均可以
代码示例
代码示例2
//方括号符 []
var regexp2 = /[a-b]/;
console.log(regexp2.test('bc'));//true 包含a
console.log(regexp2.test('cd'));//false 不包含a、b的任何一个2.2.字符类—方括号符内 范围符 - （易错）
-
方括号内部加上 - 表示范围，如 /^[a-z]$/ 表示 a 到 z 26个英文字母任意一个都可以。
-
若 - 是在[ ]外部添加的，则代表的是：匹配的字符串中必须在那个位置有 - 短横线
代码示例
2.3.字符类—方括号符内 取反符^ （易错）
-
方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。
-
注意和边界符区分！！ 取反符是写在 [ ] 内部的！ 而边界符是写在 / / 的最左侧的
语法
/[^abc]/.test('andy') // 方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。代码示例
//方括号符-取反符 [^]
var regexp3 = /[^a-b]/
console.log(regexp3.test('a'));//false
var regexp4 = /^[^a-b]/ //必须包含（不含a-b的字符，即：只要不包含a、b即为true）
console.log(regexp4.test('a'));//false
console.log(regexp4.test('c'));//true 2.4.字符类—方括号符内 字符组合
-
方括号内部可以使用字符组合，相当于多个范围
代码示例
/[a-z1-9]/.test('andy') //示包含 a 到 z 的26个英文字母或 1 到 9 的数字都/a-zA-Z1-9/ //代表只要是a-z A-Z 1-9中的任何一个字符即可3.1.量词符
代码示例
//量词符
var regexp5 = /^a*$/ //含义：符号*前面的a可以重复0次/多次 才true
console.log(regexp5.test(''));//true
console.log(regexp5.test('aaaa'));//true
var regexp6 = /^a+$/ //+前面的a必须出现大于等于1次才true
console.log(regexp6.test(''));//false
console.log(regexp6.test('a'));//true
var regexp7 = /^a?$/ //?前面的a 要么出现1次，要么不出现。若大于一次，则false
console.log(regexp7.test(''));//true
console.log(regexp7.test('a'));//true
console.log(regexp7.test('aa'));//false
var regexp8 = /^a{3}$/ //{3}前面的a需要重复三次才true
console.log(regexp8.test('aa'));//false
console.log(regexp8.test('aaa'));//true
console.log(regexp8.test('aaaa'));//false
var regexp9 = /^a{3,}$/ //{3,}前面的a需要重复三次或者更多次才true
console.log(regexp9.test('aa'));//false
console.log(regexp9.test('aaa'));//true
console.log(regexp9.test('aaaa'));//true
var regexp10 = /^a{3,4}$/ //{3,}前面的a需要重复三次或者4次才true
console.log(regexp10.test('aa'));//false
console.log(regexp10.test('aaa'));//true
console.log(regexp10.test('aaaa'));//true
console.log(regexp10.test('aaaaa'));//false3.2.量词符作用：规定某个模式的次数范围
-
如用户名：每个字符只能输入 A-Z a-z 0-9 _ - 且位数为6-18位。
-
上述要求，可以通过正则符号中的 【字符类】+【量词符】做到。前者规定每个字符（只能输入一个）输入的规范，后者规定字符的个数范围
代码示例
<!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>
<script>
var regexp = /^[A-Za-z0-9_-]{6,18}$/ //每个字符规定为A-Z a-z 0-9 下划线 短横线。 字符的长度规定为[6，18]
var userName1 = 'AAAzzz998';
console.log(regexp.test(userName1));//true：每个字符都符合规定，且字符串长度也符合规定
var userName2 = 'abcde';
console.log(regexp.test(userName2));//false：虽然每个字符都符合规定，但是字符串长度不符合规定
var userName3 = '*AAAAAAA';
console.log(regexp.test(userName3));//false：第一个字符 * 不符合规定
</script>
</head>
<body>
</body>
</html>4.1.预定义类
-
预定义类指的是某些常见模式的简写方式。
代码示例
<!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>
<script>
var regexp = /^\W$/ //除所有 字母、数字、下划线以外的字母
console.log(regexp.test('a'));//false
console.log(regexp.test('-'));//true
</script>
</head>
<body>
</body>
</html>案例：座机号验证
5.1.正则表达式中的括号总结 // [] {} () 及 |
/ / 正则表达式的总括号
[ ] 匹配方括号内规则的字符
{ } 量词符，表示重复的次数 注意： /^abc{3,5}$/ 代表的是 c应出现3-5次而不是abc
( ) 小括号表示优先级 上述若想abc出现3次，则应该写成 /^(abc){3,5}$/
| 表示“或”
辨析：
/^abc{3,5}$/ ab + 3-5个c
/^【abc】{3,5}$/ 3-5个字符，字符规则：a、b、c任意一个
/^(abc){3,5}$/ 3-5个abc
6.1.正则替换 replace()
-
replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。
方法一（只能匹配第一个符合的）
语法（第一个参数: 被替换的字符串 或者 正则表达；第二个参数: 替换为的字符串；返回值是一个替换完毕的新字符串）
stringObject.replace(regexp/substr,replacement)若有多个敏感词，可以在正则表达式中用 | 分割
str.replace(/敏感词A|敏感词B|……|敏感词n/,替换为)示例
<!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>
<script>
var oldstr = '我cnm！cnm！';
//单个匹配
console.log(oldstr.replace(/cnm/,'***')); //我***！cnm!
</script>
</head>
<body>
</body>
</html>方法二（可以全局匹配）
语法（就是在正则表达式后面加个 标识符 g 或 i 或 gi）
/表达式/[switch]-
switch(也称为修饰符) 按照什么样的模式来匹配
-
有三种值： g：全局匹配 i：忽略大小写 gi：全局匹配 + 忽略大小
示例
<!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>
<script>
var oldstr = '我cnm！cnm！';
//全局匹配
console.log(oldstr.replace(/cnm/gi,'***')); //我***！***！
</script>
</head>
<body>
</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>
/* 表单父盒子 */
.input1 {
width: 800px;
height: 40px;
margin: 200px auto;
}
/* 输入框 */
.input1 input {
width: 300px;
height: 30px;
margin-left: 10px;
background-color: rgb(209, 227, 248);
}
/* 获得焦点的时候 取消输入框的边框 */
.input1 input:focus {
outline: none;
}
/* 提示输入 */
.input1 .tip {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 500;
color: rgb(115, 168, 228);
}
/* 错误信息 */
.input1 .error {
font-family: 'Microsoft YaHei';
font-weight: 300;
font-size: 13px;
margin-left: 10px;
color: red;
visibility: hidden;
}
</style>
<script>
window.addEventListener('load',function(){
var inputObj = document.querySelector('.input1 input');
var errortipObj = document.querySelector('.input1 .error');
inputObj.addEventListener('blur',function(){
var content = inputObj.value;
console.log(content);
//正则表达式
var regexp = /^[a-zA-Z0-9_-]{6,18}$/;
if(!regexp.test(content)){
//若不符合规则，则span变红，让 .input1 .error的visibility为visible（注意：这个是style里的样式属性，需要obj.style.xxx）
errortipObj.style.visibility = 'visible';
}else{
errortipObj.style.visibility = 'hidden';
}
})
})
</script>
</head>
<body>
<div class="input1">
<span class="tip">设置用户名</span> <input type="text" placeholder="英文字母、数字、下划线，6-18位">
<span class="error"> X Error （请检查英文字母、数字、下划线、6-18位）</span>
</div>
</body>
</html>