量词

预定义类

边界(前面或者后面有空格或者是字符开头)

边界运用

1. \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

2. ^或$
   这个可以结合字符串的长度进行综合。

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},^$分别是什么?

1. \d:查找数字字符（digital）
2. \w:查找单词字符（包裹字母数字下划线）0-9a-zA-Z_
3. \s:查找空白字符（space）
5. \b 单词边界（border）
6. .可以表示除了回车换行符之外的所有字符。如果想用的只是点，可以用转义字符\.
7. *: 表示出现的次数任意次
8. +: 表示一次或多次（至少一次）
9. ？:表示零次或一次（最多一次）
10. x{3}: 表示x字符出现三次
11. ^以……结束

• 贪婪模式和非贪婪模式指什么？
  贪婪模式: 尽可能多的匹配，例如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.补全如下正则表达式，输出字符串中的注释内容. (可尝试使用贪婪模式和非贪婪模式两种方法)

1. 非贪婪模式

str = '.. <!-- My -- comment \n test --> ..  <!----> .. '
re =/(<!--[\w\W]*?-->)/g;
str.match(re) // '<!-- My -- comment \n test -->', '<!---->'

2. 贪婪模式

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>'