量词
| 语法 | 含义 |
|---|---|
| * | 表示匹配 零次或者多次（任意次） |
| ？ | 表示匹配零次或者一次（最多一次） |
| + | 表示匹配一次或者多次（至少一次） |
| {n} | 表示匹配n次 |
| {n,m} | 表示匹配n次到m次 |
| {n,} | 表示匹配至少n次 |
预定义类
| 语法 | 含义 |
|---|---|
| . | 表示匹配除了回车换行的其他所有字符 |
| \d | (digital)表示匹配数字字符[0-9] |
| \D | 表示匹配非数字字符[^0-9] |
| \w | (word)表示单词字符[0-9][a-z][A-Z]_字母数字下划线 |
| \W | 表示非单词字符 |
| \s | (space)表示空白字符 |
| \S | 表示非空白字符 |
| [\w\W] | 表示所有字符 |
边界(前面或者后面有空格或者是字符开头)
| 语法 | 含义 |
|---|---|
| ^XXX | 表示以XXX开头 |
| XXX$ | 表示以XXX结尾 |
| 注意 | 当^在类中的时候表示取反^0-9 |
| \b | 表示单词的边界 |
| \B | 表示非单词边界 |
边界运用
- \b或\B
var str = 'huang chu cai yang xiao'
str.match(/huang\b/) // huang 表示字符串选中字符串中的huang，并且必须是边界（后面有空格）
str.match(/huan\b/) // null 匹配huan后,但是发现后面并不满足条件，有g
str.match(/\bhuan/) // huan 匹配huan,前面又是边界
str.match(/an\b/) // null 匹配ang,但是ang不是边界，前面还有u，后面有g
- ^或$
这个可以结合字符串的长度进行综合。
var str ="xiao xiao hcc xiao"
str.match(/^xiao/g) // xiao
str.match(/xiao$/g) // xiao
str.match(/^xiao$/g) // null 就是匹配'xiao'字符串
如果想针对字符的整体，我们同时添加^$
var str ='xiao';
/^xiao$/.test(str); //true
//想匹配6-20个数字的字符串
var patt1 =/^\d{6,20}$/
patt1.test("11111") // false
patt1.test("11113313151") // true
综合运用
// 取得里面的<!-- My -- comment \n test -->,<!---->
var str = '.. <!-- My -- comment \n test --> .. <!----> .. '
//贪婪模式和非贪婪模式
var patt1 = /<!--[\w\W]*?-->/g
var patt2 =/<!--[^>]*>/g
var str = '<> <a href="/"> <input type="radio" checked> <b>'
var patt1 = /<[^>]+>/g
str.match(patt1) // '<a href="/">', '<input type="radio" checked>', '<b>'
问答
-
\d，\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^$分别是什么?
- \d:查找数字字符（digital）
- \w:查找单词字符（包裹字母数字下划线）0-9a-zA-Z_
- \s:查找空白字符（space）
- \b 单词边界（border）
-
.可以表示除了回车换行符之外的所有字符。如果想用的只是点，可以用转义字符
\. - *: 表示出现的次数任意次
- +: 表示一次或多次（至少一次）
- ？:表示零次或一次（最多一次）
- x{3}: 表示x字符出现三次
- ^
以……结束
- 贪婪模式和非贪婪模式指什么？
贪婪模式: 尽可能多的匹配，例如x{3,6},默认情况下，正则表达式会尽可能多的匹配，所以它会选择6。
var str="xxxxxx6yyy3"
undefined
str.match(/x{3,6}/g)
//["xxxxxx"]
非贪婪模式:让正则表达式尽可能少的匹配，在量词后面添加一个问号
var str="xxxxxx6yyy3"
undefined
str.match(/x{3,6}?/g)
//["xxx","xxx"]
代码题
//提示: el为dom元素，cls为操作的class， el.className获取el元素的class
1.写一个函数isEmail(str)，判断用户输入的是不是邮箱
function isEmail(str){
var patt1 = /(\S)+[@]{1}(\S)+\.(\w)+/;
if(patt1.test(str)){
return "输入正确"
}else{
return "请输入正确邮箱"
}
}
判定是不是邮箱
2.写一个函数isPhoneNum(str)，判断用户输入的是不是手机号
function isPhoneNum(str){
if(str.length=== 11){
var patt1 = /1[3456789]([0-9]{9})/;
if(patt1.test(str)){
return "输入正确";
}
else{
return "请重新输入正确的手机号码";
}
}
else{
return "请重新输入正确的手机号码";
}
}
验证手机号码
3.写一个函数isValidUsername(str)，判断用户输入的是不是合法的用户名（长度6-20个字符，只能包括字母、数字、下划线）
function isValidUsername(str){
if(str.length>5&&str.length<21){
var patt1 = /\w{6,20}/;
if(patt1.test(str)){
return "输入正确"
}
else{
return "请输入正确的用户名"
}
}
else{
return "请输入正确的用户名"
}
}
判定用户名是否正确
4.写一个函数isValidPassword(str), 判断用户输入的是不是合法密码（长度6-20个字符，只包括大写字母、小写字母、数字、下划线，且至少至少包括两种）
function isValidPassword(str){
var patt1 = /^\w{6,20}$/;
var patt2 = /^[a-z]{6,20}$/g;
var patt3 = /^[A-Z]{6,20}$/g;
var patt4 = /^\d{6,20}$/g;
var patt5 = /^_{6,20}$/g;
if(patt1.test(str)){
if(patt2.test(str)||patt3.test(str)||patt4.test(str)||patt5.test(str)){
return "请重新输入正确的密码"
}
else{
return "输入正确"
}
}
else{
return "请重新输入正确的密码"
}
}
合法密码
5.写一个正则表达式，得到如下字符串里所有的颜色（#121212）
var re = /#(\d|[A-Z]|[a-z]){6}/g ;
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "
alert( subj.match(re) ) // #121212,#AA00ef
6.下面代码输出什么? 为什么? 改写代码，让其输出hunger, world.
解析.表示任意字符，*表示任意次数，所有这个var pat = /".*"/g表示在全局中搜索""中的包含任意字符任意次数，由于默认的贪婪模式，所有它会全部都匹配。
var str = 'hello "hunger" , hello "world"';
var pat = /".*"/g;
str.match(pat); // [""hunger" , hello "world""]
我们把贪婪模式改成非贪婪模式，在量词后面添加？
var patt2 = /".*?"/g
str.match(patt2) //[""hunger"", ""world""]
7.补全如下正则表达式，输出字符串中的注释内容. (可尝试使用贪婪模式和非贪婪模式两种方法)
- 非贪婪模式
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re =/(<!--[\w\W]*?-->)/g;
str.match(re) // '<!-- My -- comment \n test -->', '<!---->'
- 贪婪模式
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
var patt3=/<!--[^>]*-->/g
str.match(patt3) // '<!-- My -- comment \n test -->', '<!---->'
8.补全如下正则表达式
var re = /<[^<]+>/g
var str = '<> <a href="/"> <input type="radio" checked> <b>'
str.match(re) // '<a href="/">', '<input type="radio" checked>', '<b>'
