美文网首页
JS正则表达式

JS正则表达式

作者: 泰格_R | 来源:发表于2016-10-05 21:51 被阅读45次
1.\d,\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^$分别是什么?

\d 匹配0-9之间的任意一位数字,相当于[0-9]

"23456abc12".match(/\d/g)
["2", "3", "4", "5", "6", "1", "2"]
"23456abc12".match(/\d\d/g)
["23", "45", "12"]

\w 匹配字母数字下划线字符,相当于[a-zA-Z0-9_]

**"2A_kc$*)".match(/\w/g)**

**["2", "A", "_", "k", "c"]**

\s匹配空格

"2A K D  S".match(/\s/g)
[" ", " ", " ", " "]

[a-zA-Z0-9]
连字符,匹配设定范围中的任意一位,不要过度使用连字符,最典型的例子就是[A-z],表面上它是选中从大写的A到小写的z之间52个字母,但是由于在ASCII编码之中,大写字母与小写字母之间还有其他字符,反斜杠(\)的ASCII码在大写字母与小写字母之间。**/[A-z]/.test('\\') // true**

\b匹配单词边界
/\bm/代表m是否为开始,/om\b/代表om是否为结尾,/\bhello\b/代表匹配独立单词hello。开头、结尾、空格分割、中横线分割都可视为边界

"start-start start start".match(/\bstart/g)
//["start", "start", "start", "start"]
"start-start start start".match(/start\b/g)
//["start", "start", "start", "start"]
"start-start start startccccc".match(/\bstart\b/g)  //这里两边设定边界表示匹配独立单词start
//["start", "start", "start"]

.匹配一位任意字符(除回车、换行、分隔符以外)

"a c\n *12AB".match(/./g)
["a", " ", "c", " ", "*", "1", "2", "A", "B"]   //\n换行、空格不匹配返回null

? 问号表示某个模式出现0次或1次,等同于{0, 1}。
*** 星号表示某个模式出现0次或多次,等同于{0,}。**
+ 加号表示某个模式出现1次或多次,等同于{1,}。

var s="ababbabbbcccaabbbaaaabcbaaa"
s.match(/ab+/g)  //匹配以a开头b出现1次或多次的字符,b如果出现多次尽量多匹配
["ab", "abb", "abbb", "abbb", "ab"]

s.match(/ab*/g)  //匹配以a开头b出现0次或多次的字符,b如果出现多次尽量多匹配
["ab","abb","abbb","a","abbb","a","a","a","ab","a","a","a"]

s.match(/ab?/g)  //匹配以a开头b出现0次或1次的字符
["ab","ab","ab","a","ab","a","a","a","ab","a","a","a"]

x{3}匹配x出现3次的字符

"cccxxxyyexxxx".match(/x{3}/g)  //匹配x连续出现3次
["xxx", "xxx"]

"cccxxxyyexxxx".match(/x{3,}/g)  //匹配x连续出现3次及以上
["xxx", "xxxx"]

"cccxxxyyexxxx".match(/x{3,4}/g)  //匹配x连续出现最少3次,最多4次
["xxx", "xxxx"]

^k匹配k开始的字符,k$匹配k结尾的字符,$放后面

"kekilly".match(/^k/g)
["k"]
"kekilly".match(/^y/g)
null
"kekilly".match(/y$/g)

2.贪婪模式和非贪婪模式指什么?

贪婪模式:最大可能匹配,即匹配直到下一个字符不满足匹配规则为止。

var s="ababbabbbcccaabbbaaaabcbaaa"
s.match(/a+/g)  //a出现一次或多次,最大限度匹配a
["a", "a", "a", "aa", "aaaa", "aaa"] 

s.match(/a*/g)  //a出现0次或多次,最大限度匹配a
["a", "", "a", "", "", "a", "", "", "", "", "", "", "aa", "", "", "", "aaaa", "", "", "", "aaa", ""]

非贪婪模式:与贪婪模式相反,让正则表达式尽可能少的匹配,也就是一旦匹配成功就不再尝试匹配。量词后加?是非贪婪模式

s.match(/a*?/g)  //a*出现0次或多次,尽可能少匹配就是a出现0次
["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]

s.match(/a+?/g)  //a出现1次或多次,尽可能少匹配就是a出现1次
["a", "a", "a", "a", "a", "a", "a", "a", "a", "a", "a", "a"]

3.写一个函数trim(str),去除字符串两边的空白字符
(function trim(str){
return str.match(/\S+/g)
}(" safasd asdf ad"))
//输出结果:["safasd", "asdf", "ad"]

4.使用实现 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls),使用正则
var reg = new RegExp('(\\s|^)'+cls+'(\\b|$)','g');\\等同于/\bcls\b|\s+cls+\s/g即匹配cls两边有空格的情况和匹配cls为唯一单词的情况。也就是匹配cls是不是class=的类名称

    function addClass(el,cls){
        if(reg.test(el.className)){
            return el.className += " " + cls;
        }
    }

    function hasClass(el,cls){
        return reg.test(el.className);
    }

    function removeClass(el,cls){
        if(reg.test(el.className)){
            return el.className.replace(reg,"")
        }
    }


5.写一个函数isEmail(str),判断用户输入的是不是邮箱
function isEmail(str){
var reg=/\w+@\w+\.\w{2,}/ig;   //.后面的域名至少为2位
return reg.test(str)
};
isEmail("Abc_sdfg@regl.com.cn.net")//返回true
isEmail("123@1.c")//返回false

6.写一个函数isPhoneNum(str),判断用户输入的是不是手机号
function isPhoneNum(num){
var reg2=/1[3456789]\d{9}$/g  //第一位1,第二位3456789,第3位为任意数字且出现9次后结束
return reg2.test(num)
};
isPhoneNum(18600000001)  //返回ture

7.写一个函数isValidUsername(str),判断用户输入的是不是合法的用户名(长度6-20个字符,只能包括字母、数字、下划线)
function isValidUsername(str){
var reg=/^\w{6,20}$/g
return reg.test(str)
};
isValidUsername("2cccccllllllll2llll_") //返回ture
isValidUsername("2ccc") //返回false

8.写一个函数isValidPassword(str), 判断用户输入的是不是合法密码(长度6-20个字符,包括大写字母、小写字母、数字、下划线中至少两种类型)
function isValidPassword(str){
var reg=/^\w{6,20}$/g; //先验证是否为字母数字下划线且为6-20位
if(reg.test(str)==true){ //至少两种即只包含一种情况时返回false,直到排除所有仅包含一种的情况
  if(/^[a-z]{6,20}$/.test(str)==true){
    return false;
    }  
    else if(/^[A-Z]{6,20}$/.test(str)){
    return false;
    }
    else if(/^\d{6,20}$/.test(str)){
    return false;
    }
    else if(/^_{6,20}$/.test(str))
    return false;
    else return true;
    }
    else return false;
}

9.写一个正则表达式,得到如下字符串里所有的颜色(#121212)
var re = /*正则...*/
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 " 
alert( subj.match(re) )  // #121212,#AA00ef

代码如下:

var re=/#\w{6}/gi
subj.match(/#\w{6}/gi)
//输出结果为:["#121212", "#AA00ef"]

10.下面代码输出什么? 为什么? 改写代码,让其输出hunger, world.
var str = 'hello  "hunger" , hello "world"';
var pat =  /".*"/g;   //匹配""之间的所有任意字符(非空格换行回车),因为有*,贪婪模式尽可能多的匹配
str.match(pat); //返回"hunger" , hello "world"

代码如下:

var str = 'hello  "hunger" , hello "world"';
var pat =  /".*?"/g;//非贪婪模式,?代表.出现0次或多次取0次
str.match(pat); //返回[""hunger"", ""world""]

11.补全如下正则表达式,输出字符串中的注释内容. (可尝试使用贪婪模式和非贪婪模式两种方法)
str = '.. <!-- My -- comment \n test --> ..  <!----> .. '
re = /.. your regexp ../
str.match(re) // '<!-- My -- comment \n test -->', '<!---->'

代码如下:

非贪婪模式:
re =/<!--[^]*?-->/g  //<!--开始,-->结尾,中间[^]代表任意字符(包括空格回车换行),其出现0次或多次取0次
str.match(/<!--[^]*?-->/g)
/*返回结果["<!-- My -- comment 
 test -->", "<!---->"]*/

贪婪模式:
re=/<!--[^>]*-->/g //匹配<!--开始,-->结尾,中间[^>]即中间只要不是>的字符串出现0次或多次
str.match(/<!--[^>]*-->/g)
/*返回结果["<!-- My -- comment 
 test -->", "<!---->"]*/


12.补全如下正则表达式
var re = /* your regexp */
var str = '<> <a href="/"> <input type="radio" checked> <b>' 
str.match(re) // '<a href="/">', '<input type="radio" checked>', '<b>'

代码如下:

var re=/<[^<^>]+>/g  //<开头,>结尾,且中间不是<>的字符必须出现一次(排除第一个<>)
str.match(/<[^<^>]+>/g)
//输出结果["<a href="/">", "<input type="radio" checked>", "<b>"]

相关文章

网友评论

      本文标题:JS正则表达式

      本文链接:https://www.haomeiwen.com/subject/dtqeyttx.html