正则表达式

2016-07-19 本文已影响75人 coolheadedY

\d，\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^$分别是什么?

字符	含义
\d	任何ASCII数字，等价于[0-9]
\w	任何ASCII字符组成的单词，等价于[a-zA-Z0-9]
\s	任何Unicode空白符(空格、tab、换行、回车)
[a-zA-Z0-9]	a-z的所有字母,A-Z的所有字母,0-9的所有数字，等价于\w
\b	匹配一个单词的边界，位于字符\w和\W之间的位置，或位于字符\w和字符串的开头或者结尾之间的位置([\b]匹配的是退格符)
.	除换行符\n和回车\r之外的任意字符
*	匹配前一项0次或多次，等价于[0,],/*a/也可匹配"bbb",因为字符串中含有0个a
+	匹配前一项1次或多次，等价于[1,]
？	匹配前一项-次或1此，等价于{0,1}，前一项就是可选的
x{3}	匹配x 3次
^	匹配以xxx开头
$	匹配以xxx结尾

贪婪模式和非贪婪模式指什么?
贪婪模式：{n,m},{n, },{n},?,+,*这些匹配重复字符都是尽可能多的匹配，在匹配满足n的情况下会继续匹配m-n直到m的情况，称为贪婪模式

贪婪模式
非贪婪模式：非贪婪模式只需在待匹配字符后加一个?，这样正则表达式会尽量少的匹配，在匹配不成功时再继续尝试。

非贪婪模式
写一个函数trim(str)，去除字符串两边的空白字符

        function trim(str) {
            return str.replace(/^\s+|\s+$/g,"");
        }

使用实现 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)，使用正则//提示: el为dom元素，cls为操作的class， el.className获取el元素的class

    <style>
        div.class1 {
            color: red;
        }
        div.textclass {
            color: yellow;
        }
        div.class2 {
            font-size: 32px;
        }
    </style>
    <div id="reg" class="class1 class2">
        <span>正则表达式</span>
    </div>
    <script>
        var el = document.getElementById("reg");

        function hasClass(el, cls) {
            var reg = new RegExp("\\b" + cls + "\\b");
            if (el.className.search(reg) === -1) {
                return false;
            }
            else {
                return true;
            }
        }
        function addClass(el, cls) {
            if (!hasClass(el, cls)) {
                el.className += " " + cls;
                console.log(cls);
                
            }
            else {
                console.log(cls + "已经存在");
            }
        }
        function removeClass(el, cls) {
            var reg = new RegExp("\\b" + cls + "\\b");
            if (hasClass(el,cls)) {
                el.className = el.className.replace(reg, "");
                console.log(cls + "已删除");
            }
            else {
                console.log(cls + "未找到");
            }
        }
    </script>

纠正
参考

写一个函数isEmail(str)，判断用户输入的是不是邮箱

        function isEmail(str) {
            var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-z]+$/;
            return reg.test(str);
        }
        var email = "sfyr111@163.com";
        console.log("邮箱为" + isEmail(email));

写一个函数isPhoneNum(str)，判断用户输入的是不是手机号

        function isPhoneNum(str) {
            var reg = /^1{1}[3875]{1}\d{9}$/;
            return reg.test(str);
        }
        var phoneNum = 13401637929;
        console.log("手机号" + isPhoneNum(phoneNum));

写一个函数isValidUsername(str)，判断用户输入的是不是合法的用户名（长度6-20个字符，只能包括字母、数字、下划线）

        function isValidUsername(str) {
            var reg = /^[a-zA-Z0-9_]{6,20}/;
            if (reg.test(str)) {
                console.log(str + " 用户名合法");
            } else {
                console.log(str + " 非法用户名");
            }
        }

写一个函数isValidPassword(str), 判断用户输入的是不是合法密码（长度6-20个字符，包括大写字母、小写字母、数字、下划线至少两种）

        function isValidPassword(str) {
            var reg = /^[0-9]+$|^[a-z]+$|^[A-Z]+$|^_+$/;
            if(str.length < 6 || str.length > 20) {
                console.log("密码错误 密码长度为6-20位");
                return false;
            }
            if(reg.test(str) || /\W/.test(str)) {
                console.log("密码错误 密码至少包含数字、字母大小写、下划线两种");
                return false;
            }
            console.log("密码正确 登录中");
            return true;
        }
        isValidPassword("uuu4");
        isValidPassword("uuuuuuu");
        isValidPassword("uuuuuu443");

写一个正则表达式，得到如下字符串里所有的颜色（#121212）

var re = /*正则...*/
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "
alert( subj.match(re) )  // #121212,#AA00ef

        var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "
        function getColor(str) {
            var re = /#[0-9a-fA-F]{6}/g;
            console.log("颜色为" + str.match(re));
            return str.match(re);
        }
        getColor(subj);

下面代码输出什么? 为什么? 改写代码，让其输出hunger, world.

var str = 'hello  "hunger" , hello "world"';
var pat =  /".*"/g;
str.match(pat);  //"hunger" , hello "world"  
//因为".*"为一个贪婪模式，在匹配`"`后匹配`.`到字符串最后一位，然后回溯找到world后面的`"`，并把这一段字符串全部取出。

var str = 'hello  "hunger" , hello "world"';
var pat =  /".*?"/g;
str.match(pat);  //"hunger", "world"
//加上?后为非贪婪模式等价于{0,1}，在匹配到`"`后对`.*`每次只匹配0到1次如果满足就匹配后面的`"`，直到查询到"hunger"中`r`后，检查后一位是否为`"`，发现满足条件就取出字符串，然后对字符串继续进行正则的匹配

参考

补全如下正则表达式，输出字符串中的注释内容. (可尝试使用贪婪模式和非贪婪模式两种方法)

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

补全如下正则表达式

        var re1 = /<[^>]+?>/g;
        var re2 = /<[^>]+>/g;
        var str = '<> <a href="/"> <input type="radio" checked> <b>'
        str.match(re1) // '<a href="/">', '<input type="radio" checked>', '<b>'
        str.match(re2)

本博客版权归本人和饥人谷所有，转载需说明来源

正则表达式

猜你喜欢

热点阅读