1.正则表达式的创建方式
字面量方式
构造函数new RegExp
<!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.匹配模式 test
<!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>
3.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>
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>
// ^ 以谁开始
// $ 以谁结束
var reg = /^abc$/;
var str = "abcabc";
console.log(reg.test(str));
</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 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>
6.量词符
<!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>
7.元字符
<!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>
8.正则案例
<!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>
9.正则提取 match() 可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。返回值是存放匹配结果的数组。该数组的内容依赖于RegExp 是否具有全局标志 g。
<!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>
10.正则替换和查询
<!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>