正则表达式的创建
- 使用/内容/的语法形式,可以快速创建正则表达式。
- 也可以使用new RegExp('内容')的形式,创建正则表达式。
- 使用typeof运算符检查正则表达式的类型,结果是object。
<!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 regexp1 = /^\d{6}$/; // 创建正则表达式方法2 var regexp2 = new RegExp('^\\d{6}$'); var str = '555666'; console.log(regexp1.test(str)); // true console.log(regexp2.test(str)); // true console.log(typeof regexp1); // object console.log(typeof regexp2); // object </script> </body> </html>
元字符
- “元字符”是指一位指定类型的字符。
元字符
功能
\d
匹配一个数字
\D
匹配一个非数字字符
\w
匹配一个单字字符(字母、数字或者下划线)
\W
匹配一个非单字字符
\s
匹配一个空白字符,包括空格、制表符和换行符
.
任意字符
- 开头和结尾
元字符
功能
^
匹配开头
$
匹配结尾
元字符注意事项
- 如果使用new RegExp()写法,反斜杠需要多写一个。
- 比如/^\d$/和new RegExp('^\\d$')是相同的意思。
元字符使用举例
- 某快递公司运单号形式是这样的:123-4567-890,请使用正则表达式检查某字符串是否符合此格式。
<!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 regexp1 = /^\d\d\d-\d\d\d\d-\d\d\d$/; // 待测试的字符串 var str1 = '444-5555-000'; console.log(regexp1.test(str1)); // true </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> </head> <body> <script> // 正则表达式 var regexp2 = /^\w\w\w-\w\w\w\w-\w\w\w$/; // 待测试的字符串 var str2 = 'abc-__ab-123'; console.log(regexp2.test(str2)); // true </script> </body> </html>
字符的转义
- 在特殊字符之前的反斜杠\表示下一个字符不是特殊字符,应该按照字面理解。
- 不管一个符号有没有特殊意义,都可以在其之前加上一个\以确保它表达的是这个符号本身。
- 举例:某产品批号形式为:123.45^67#89,请使用正则表达式检查某字符串是否符合此格式。
<!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> // 题目3:某产品批号形式为:123.45^67#89,请使用正则表达式检查某字符串是否符合此格式 var regexp3 = /^\d\d\d\.\d\d\^\d\d\#\d\d$/; // 待测试的字符串 var str3 = '666.66^66#66'; var str4 = '123.45^67#89'; console.log(regexp3.test(str3)); // true console.log(regexp3.test(str4)); // true </script> </body> </html>
方括号表示法
- 使用方括号,比如[xyz],可以创建一个字符集合,表示匹配方括号中的任意字符。
- 比如某学校的学号规定:第1位是一个字母,b表示本科生, y表示研究生,后面是7位数字,用正则表示为:
- 可以使用短横-来指定一个字符范围,^表示否定。
元字符
等价的方括号表示法
\d
[0-9]
\D
[^0-9]
\w
[A-Za-z0-9_]
\W
[^A-Za-z0-9_]
方括号表示法小题目
- 题目1:请验证某字符串是否是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> // 题目1:请验证某字符串是否是5位字母,大小写均可 var str2 = 'abcde'; var str3 = 'abcd5'; console.log(/^[a-zA-Z]{5}$/.test(str2)); // true console.log(/^[a-zA-Z]{5}$/.test(str3)); // false </script> </body> </html>
- 题目2:请验证某字符串是否是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> // 题目2:请验证某字符串是否是5位,且仅由小写字母、点构成 var str4 = 'mnp..'; var str5 = 'mnp.#'; console.log(/^[a-z\.]{5}$/.test(str4)); // true console.log(/^[a-z\.]{5}$/.test(str5)); // false </script> </body> </html>
- 题目3:请验证某字符串是否是4位小写字母,且最后一位不能是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> // 题目3:请验证某字符串是否是4位小写字母,且最后一位不能是m字母 var str6 = 'abcd'; var str7 = 'abcm'; var str8 = 'ab1c'; console.log(/^[a-z]{3}[a-ln-z]$/.test(str6)); // true console.log(/^[a-z]{3}[a-ln-z]$/.test(str7)); // false console.log(/^[a-z]{3}[a-ln-z]$/.test(str8)); // false </script> </body> </html>
量词
量词
意义
*
匹配前一个表达式0次或多次。等价于{0,}
+
匹配前面一个表达式1次或者多次。等价于{1,}
?
匹配前面一个表达式0次或者1次。等价于{0,1}
{n}
n是一个正整数,匹配了前面一个字符刚好出现了n次
{n,} n是一个正整数,匹配前一个字符至少出现了n次
{n,m}
n和m都是整数。匹配前面的字符至少n次,最多m次
量词小题目
- 题目1:请验证字符串是否符合手机号码的规则:11位数字,并且肯定以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:请验证字符串是否符合手机号码的规则:11位数字,并且肯定以1开头 var str1 = '13812345678'; var str2 = '138123456789'; var str3 = '38123456789'; var regexp1 = /^1\d{10}$/; console.log(regexp1.test(str1)); // true console.log(regexp1.test(str2)); // false console.log(regexp1.test(str3)); // false </script> </body> </html>
- 题目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> // 题目2:请验证某字符串是否是这样的:以字母开头,中间是任意位数字(最少1位)构成,并以字母结尾 var str4 = 'a123123123b'; var str5 = 'abcd'; var str6 = 'a1b'; var regexp2 = /^[a-zA-Z]\d+[a-zA-Z]$/; console.log(regexp2.test(str4)); // true console.log(regexp2.test(str5)); // false console.log(regexp2.test(str6)); // true </script> </body> </html>
- 题目3:请验证某字符串是否符合网址规则:以www.开头,中间是任意位的字符(字母数字下划线),最后以.com结尾,也可以以.com.cn结尾。
<!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> // 题目3:请验证某字符串是否符合网址规则:以www.开头,中间是任意位的字符(字母数字下划线,最少一位),最后以.com结尾,也可以以.com.cn结尾 var str7 = 'www.imooc.com'; var str8 = 'www.sina.com.cn'; var str9 = 'www.news.cn'; var regexp3 = /^www\.\w+\.com(\.cn)?$/; console.log(regexp3.test(str7)); // true console.log(regexp3.test(str8)); // true console.log(regexp3.test(str9)); // false </script> </body> </html>
修饰符
- 修饰符也叫作标志(flags),用于使用正则表达式实现高级搜索。
修饰符
意义
i 不区分大小写搜索
g 全局搜索
- 修饰符的使用: