正则表达式（ regular expression）描述了字符串的“构成模式”，经常被用于检査字符串是否符合预定的格式要求。
正则表达式“按位”描述规则，是指它是一位一位的描述字符串的构成形式。
正则表达式的创建
①使用/内容/的语法形式，可以快速创建正则表达式
②也可以使用 new RegExp（内容）的形式，创建正则表达式
使用typeof运算符检查正则表达式的类型，结果是object
// 创建正则表达式
var regexp1=/^\d{6}$/;
// 注意\\要写两个
var regexp2=new RegExp('^\\d{6}$');
var str='322322';
console.log(regexp1.test(str));
console.log(regexp2.test(str));
console.log(typeof regexp1); //object
console.log(typeof regexp2); //object
test()方法测试字符串是否匹配正则表达式，返回布尔值。
元字符
元字符”是指一位指定类型的字符。
| 元字符 | 功能 |
|---|---|
| \d | 匹配一个数字 |
| \D | 匹配非数字字符 |
| \w | 匹配一个单字字符（字母、数字或者下划线） |
| \W | 匹配一个非单字字符 |
| \s | 匹配一个空白字符，包括空格、制表符和换行符 |
|.||任意字符
|^|匹配开头|
|$|匹配结尾|
元字符注意事项
如果使用 new RegExp（）写法，反斜杠需要多写一个。比如/^\d$/和new RegExp（"^\\d$"）是相同的意思。
元字符使用举例
1.某快递公司运单号形式是这样的：123-4567-898，请使用正则表达式检查某字符串是否符合此格式
2.某产品的验证秘钥形式是这样的口口口-口口口口-口口口，其中口表示字母数字或者下划线，请使用正则表达式检查某字符串是否符合此格式 。
var regexp1=/^\d\d\d-\d\d\d\d-\d\d\d$/;
var str1="123-4443-444";
console.log(regexp1.test(str1));
var regexp2=/^\w\w\w-\w\w\w\w-\w\w\w$/;
var str2='abc-_232-123';
var str3="abc-123?-123"
console.log(regexp2.test(str2)); //true
console.log(regexp2.test(str3)); //false
字符的转义
在特殊字符之前的反斜杠\表示下一个字符不是特殊字符，应该按照字面理解。
不管一个符号有没有特殊意义，都可以在其之前加上一个\以确保它表达的是这个符号本身。
举例：某产品批号形式为：123.45^67#89，请使用正则表达式检查某字符串是否符合此格式。
var regexp=/^\d\d\d\.\d\d\^\d\d\#\d\d/;
console.log(regexp.test('183.15^83#29')); //true
方括号表示法
使用方括号，比如/[xyz]/，可以创建一个字符集合，表示匹配方括号中的任意字符。
可以使用短横-来指定一个字符范围，^表示否定。
| 元字符 | 等价的方括号表示方法 |
|---|---|
| \d | [0-9] |
| \D | [^0-9] |
| \w | [A-Za-z0-9_] |
| \w | [^A-Za-z0-9_] |
方括号表示法小题目：
题目1：请验证某字符串是否是5位字母，大小写均可
题目2：请验证某字符串是否是5位，且仅有小写字母、点构成
题目3：请验证某字符串是否是4位小写字母，且最后一位不能是m字母
// 题目1：请验证某字符串是否是5位字母，大小写均可
var reg1=/^[a-zA-Z]{5}$/
console.log(reg1.test("abcd8"));
// 题目2：请验证某字符串是否是5位，且仅有小写字母、点构成
var reg2=/^[a-z.]{5}$/;
console.log(reg2.test("abcd&")); //false
console.log(reg2.test("abcd.")); //true
// 题目3：请验证某字符串是否是4位小写字母，且最后一不能是m字母
var reg3=/^[a-z]{3}[a-ln-z]$/;
console.log(reg3.test('abcm')); //false
console.log(reg3.test('abcd')); //true
PS: {}的意思见下方量词
量词
| 量词 | 意义 |
|---|---|
| * | 匹配前一个表达式次或多次。等价于{0,} |
| + | 匹配前面一个表达式次或者多次。等价于{1,} |
| ? | 匹配前面一个表达式次或者0次。等价于{0,1} |
| {n} | n是一个正整数，匹配了前面一个字符刚好出现了n次 |
| {n,} | n是一个正整数，匹配前一个字符至少出现了n次 |
| {n,m} | n和m都是整数。匹配前面的字符至少n次，最多m次 |
量词题目举例
题目1：请验证字符串是否符合手机号码的规则：11位数字，并且肯定以1开头
题目2：请验证某字符串是否是这样的：以字母开头，中间是任意位数字（最少1位）构成，并以字母结尾
题目3：请验证某字符串是否符合网址规则：以www.开头，中间是任意位的字符（字母数字下划线），最后以.com结尾，也可以以.com.cn结尾。
// 题目1：请验证字符串是否符合手机号码的规则：11位数字，并且肯定以1开头
var str1="12345678901";
var reg=/^1\d{10}$/;
console.log(reg.test(str1));
// 题目2：请验证某字符串是否是这样的：以字母开头，中间是任意位数字（最少1位）构成，并以字母结尾
var str2="a123f";
var str3="abcd"
var reg2=/^[a-zA-Z]\d+[a-zA-Z]$/;
console.log(reg2.test(str2));//true
console.log(reg2.test(str3));//false
// 题目3：请验证某字符串是否符合网址规则：以www.开头，中间是任意位的字符（字母数字下划线），最后以com结尾，也可以以.com.cn结尾
var str4="www.baidu.cn";
//.cn 可以有也可以无，也就是出现0次或者1次
var reg3=/^www\.\w+\.com(\.cn)?$/;
console.log(reg3.test(str4)); //false
修饰符
修饰符也叫作标志（flags），用于使用正则表达式实现高级搜索。
| 修饰符 | 意义 |
|---|---|
| i | 不区分不小写 |
| g | 全局搜索 |
修饰符的使用
//定义一
var re=/m/gi;
//定义二
var re=new RegExp("m","gi");
正则表达式的方法
| 方法 | 简介 |
|---|---|
| test() | 测试某字符串是否匹配正则表达式，返回布尔值 |
| exec() | 根据正则表达式，在字符串中进行查找， 返回结果数组或者null |
test()方法
正则表达式的test()方法用来测试某字符串是否匹配此正则表达式，它返回true或 false。
//验证某字符串是否是4位小写字母，且最后一位不能是m字母
/^[a-z]{3}[a-ln-z]$/.test("abcd"); //true
exec()方法
exec()方法功能是：在一个指定字符串中执行一个搜索匹配查找，返回一个结果数组或null。
var str="abc123def456";
var reg=/\d+/;
var result=reg.exec(str);
//["123", index: 3, input: "abc123def456", groups: undefined]
exec()方法的逐条遍历
exec()方法最有趣的是，有"g"修饰符的正则表达式将自动成为“有状态”的，这意味着可以对单个字符串中的多次匹配结果进行逐条的遍历。
var str1="abc123def456ghi789";
var reg=/\d+/g;
console.log(reg.exec(str1));
// ["123", index: 3, input: "abc123def456ghi789", groups: undefined]
console.log(reg.exec(str1));
// ["456", index: 9, input: "abc123def456ghi789", groups: undefined]
console.log(reg.exec(str1));
// ["789", index: 15, input: "abc123def456ghi789", groups: undefined]
console.log(reg.exec(str1));
可以使用while循环进行逐条遍历
var str="abc123def456ghi789";
var reg=/\d+/g;
//用循环语句来遍历
var result;
while(result=reg.exec(str)){
console.log(result);
}
可以使用正则表达式的字符串方法
| 方法 | 简介 |
|---|---|
| search() | 在字符串中根据正则表达式进行查找匹配，返回首次匹配到的位置索引，测试不到则返回-1 |
| match() | 在字符串中根据正则表达式进行查找匹配，返回一个数组，找不到则返回null |
| replace() | 使用替换字符串替换掉匹配到的子字符串，可以使用正则表达式 |
| split() | 分隔字符串为数组，可以使用正则表达式 |
var str="abc123def4567";
var reg=/\d+/g;
// search()方法 返回首次匹配的位置,当没有匹配值时返回-1
console.log(str.search(reg)); //3
console.log(str.search(/m/)); //-1
//match()方法,返回匹配的数组
console.log(str.match(reg)); // ["123", "4567"]
//replace()方法
console.log(str.replace(reg,'*')); //abc*def*
//split()方法，可以把正则表达式当做分割符
console.log(str.split(reg)); //["abc", "def", ""]
正则表达式的应用
表单验证的时候，可以使用正则表达式
<!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>
.warning{
color: red;
display: none;
}
</style>
</head>
<body>
<div>
<p>
请输入中文姓名：
<input type="text" id="name">
<span id="warning1" class="warning">输入的姓名不合法</span>
</p>
<p>
请输入手机号码：
<input type="text" id="phone">
<span id="warning2" class="warning">输入的号码不合法</span>
</p>
<p>
请输入邮箱：
<input type="email" id="email">
<span id="warning3" class="warning">输入的邮箱不合法</span>
</p>
</div>
<script>
var nameField=document.getElementById("name");
var warning1=document.getElementById("warning1");
var number=document.getElementById("phone");
var warning2=document.getElementById("warning2");
var email=document.getElementById("email");
var warning3=document.getElementById("warning3");
// 失去焦点的事件监听，开始验证输入是否合法
nameField.onblur=function(){
//2~4个汉字的正则表达式
var reg= /^[\u4E00-\u9FA5]{2,4}$/;
if(reg.test(nameField.value)){
warning1.style.display="none";
// 用户更改后警告消失
}else{
warning1.style.display="inline";
}
}
number.onblur=function(){
var reg=/^1[3|4|5|7|8|9]\d{8}$/;
if(reg.test(number.value)){
warning2.style.display="none";
}else{
warning2.style.display="inline";
}
}
email.onblur=function(){
var reg=/\w+\w+\.[a-zA-Z]{2,4}/;
if(reg.test(email.value)){
warning3.style.display="none";
}else{
warning3.style.display="inline";
}
}
</script>
</body>
</html>
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
