1. 正则表达式简介
.1 什么是正则表达式
正则表达式:用于匹配规律规则的表达式,正则表达式最初是科学家对人类神经系统的工作原理的早期研究,现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。 正则表达式(Regular Expression)是一种描述字符模式的对象。JavaScript中的RegExp类表示正则表达式,String和RegExp类型都定义了使用正则的方法,后者使用正则表达式进行强大的模式匹配和文本检索与替换功能。
1.2 正则表达式的作用
-
给定的字符串是否符合正则表达式的过滤逻辑(匹配)
-
可以通过正则表达式,从字符串中获取我们想要的特定部分(提取)
-
强大的字符串替换能力(替换)
提示:对于复杂的正则表达式不用过多研究,在工作都是写好复制的,但是要求根据需求使用正则表达式。
2. 正则表达式的使用
JavaScript中的正则表达式用RegExp类型的对象表示。我们可以通过RegExp()构造函数来创建RegExp对象,也可以通过直接量语法来创建。
2.1 创建正则表达式的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.字面量形式
var reg = /a/;
// 2.通过构造函数创建
var reg2 = new RegExp(/b/);
console.log(reg);
console.log(reg2);
</script>
</body>
</html>
2.2 参数(匹配的模式)
i | 忽略大小写 |
g | 全局匹配 |
gi | 全局匹配+忽略大小写 |
m | 多行匹配 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// i 忽略大小写
// g 全局匹配
// gi 全局匹配 + 忽略大小写
var reg = /abc/gi;
var str = "abc";
var str2 = "defabc";
var str3 = "defghabc";
console.log(reg.test(str));
console.log(reg.test(str2));
console.log(reg.test(str3));
console.log(reg.test(str3));
</script>
</body>
</html>
2.3 测试正则表达式
test() 正则对象方法,用于检测字符串是否符合该规则,该对象会返回 true 或 false,其参数是测试字符串。
exec() 方法用于检索字符串中的正则表达式的匹配。如果字符串中有匹配的值返回该匹配值,否则返回 null。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var str = "abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabc";
var reg = /abc/gi;
// exec() 方法用于检索字符串中的正则表达式的匹配。如果字符串中有匹配的值返回该匹配值,否则返回 null。
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
</script>
</body>
</html>
3. 正则表达式的组成
-
普通字符abc 123
-
特殊字符:正则表达式中有特殊意义的字符
3.1 边界符
正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符--精确匹配
边界符 | 说明 |
---|---|
^ | 表示匹配行首的文本(以谁开始) |
$ | 表示匹配行尾的文本(以谁结束) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// ^ 以谁开始
// $ 以谁结束
var reg = /^abc$/;
var str = "abcabc";
console.log(reg.test(str));
</script>
</body>
</html>
3.2 [ ] 中括号
有一系列字符用中括号括起来,表示匹配其中的任一字符,多选一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var reg = /[abc]/;
var str = "agfjdhfdhfjsdh";
console.log(reg.test(str));
var reg2 = /^[a-zA-z]/;
var userName = "123zq123456";
console.log(reg2.test(userName));
</script>
</body>
</html>
3.3 量词符
量词符用来设定某个模式出现的次数。
量词 | 说明 |
---|---|
* | 出现0次或更多次 |
+ | 出现1次或更多次 |
? | 出现0次或1次 |
{n} | 出现n次 |
{n,} | 出现n次或更多次 |
{n,m} | 出现n到m次 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// * 出现0次或更多次
// + 出现1次或更多次
// ? 出现0次或1次
// {n} 出现n次
// {n,} 出现n次或更多次
// // {n,m} 出现n到m次
// var reg = /^[a-z]{3,5}$/;
// var str = "abcde";
// console.log(reg.test(str));
// // var reg2 = /^?$/;
// var str2 = "asdabcabcabc.1";
// console.log(reg2.test(str2));
// var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
// var reg3 = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
var reg4 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;
console.log(reg4.test("ASDasdasd"));
</script>
</body>
</html>
3.4 元字符类
预定义类指的是某些常见模式的简写方式.
元字符 | 说明 |
---|---|
\d | 匹配数字,任何ASCII数字,等价于[0-9] 匹配一个数字 |
\D | 匹配任意非数字的字符,除了ASCII数字之外的任何字符,等价于[^0-9] |
\w | 匹配字母或数字或下划线,等价于[a-zA-Z0-9_] |
\W | 匹配任意不是字母,数字,下划线,等价于[^a-zA-Z0-9_] |
\s | 匹配任意的空白符[\t\r\n\v\f] <br>空格(‘ ’)、换页(‘\f’)、换行(‘\n’)、回车(‘\r’)、水平制表符(‘\t’)、垂直制表符(‘\v’) |
\S | 匹配任意不是空白符的字符[^\t\r\n\v\f] |
. | 匹配除换行符和行结束符以外的任意单个字符 |
| | 或者,选择两者中的一个。将左右两边分为两部分,而不管左右两边有多长多乱 |
\. | 将特殊字符转义成(.)当成普通字符. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var reg1 = /\d/; // [0-9]
var reg2 = /\D/; // 非数字 [^0-9]
var reg3 = /\w/; // 字母或数字或下划线 [a-zA-Z0-9_]
var reg4 = /\W/; // 非字母数字下划线 [^a-zA-Z0-9_]
var reg5 = /\s/; // 任意的空白符 [\t\n\r\v\f]
var reg6 = /\S/; // 任意的非空白符 [^\t\n\r\v\f]
var reg7 = /a|b/;
var reg8 = /\./;
var str1 = ".";
console.log(reg8.test(str1));
</script>
</body>
</html>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.danger {
color: red;
}
</style>
</head>
<body>
<span class="">用户名:</span><input type="text"><br>
<span>密码:</span><input type="text">
<script>
var userReg = /^[a-z]\d{6,10}$/;
var psdReg = /^[a-zA-Z0-9_-]{6,16}$/;
var phoneReg = /^1[3|5|7|8|9]\d{9}$/;
var emailReg = /\w+@\w+\.\w+(\.\w+)?/;
var userName = document.getElementsByTagName("input")[0];
var psd = document.getElementsByTagName("input")[1];
var nameTxt = document.getElementsByTagName("span")[0]
var psdTxt = document.getElementsByTagName("span")[1]
userName.oninput = function () {
if (!userReg.test(userName.value)) {
nameTxt.className = "danger";
} else {
nameTxt.className = "";
}
}
psd.oninput = function(){
if (!emailReg.test(psd.value)) {
psdTxt.className = "danger";
} else {
psdTxt.className = "";
}
}
</script>
</body>
</html>
4. 正则提取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// match() 可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。返回值是存放匹配结果的数组。该数组的内容依赖于RegExp 是否具有全局标志 g。
var str = "123123@qq.com,ziyuanyihe@163.cn 87666444@qq.com englishtown.com";
var str2 = "name=zs&psd=123&gender=nan";
var reg = /\w+@\w+\.\w+(\.\w+)?/g;
var reg2 = /\w+=\w+/g;
console.log(str.match(reg));
console.log(str2.match(reg2));
</script>
</body>
</html>
5. 正则替换和查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var str = "hello world";
var reg = /o/g;
console.log(reg.lastIndex);
console.log(reg.exec(str));
console.log(reg.lastIndex);
console.log(reg.exec(str));
console.log(reg.lastIndex);
// console.log(str.search(/o/g));
// console.log(str.replace(/o/g, "O"));
</script>
</body>
</html>