RegExp

正则表达式是一种描述性语言的规则来检测字符串的写法是否符合标准。

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

  • \d:匹配数字;
  • \w:匹配字母,数字,下划线;
  • \s:匹配空格,Tab,\t等空字符;
  • [a-zA-z0-9]:匹配所有的英文字母与数字;
  • \b:匹配单词边界;
  • .:匹配任意字符;
  • *:匹配任意数量的字符;
  • +:匹配至少有一个先关字符;
  • ?:设置非贪婪匹配;
  • x{3}; 匹配3个x;
  • ^$; 规定^后面与$前面分别是正则匹配的头和尾部;
  • 各种/W,/S,/D等大写字母代表了小写字母的反义,例如/W代表匹配除了字母,数字,下划线以外的一切字符。

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

先来看一段代码及其结果:

var a = /^(\d+)(0*)$/
a.exec(1254000)  //    ["1254000", "1254000", ""]

这段代码所期望的结果应该是将前面的数字和0分开,但是由于正则表达式默认的方式为贪婪匹配,它会默认将前面的匹配规则尽可能匹配最大化,因为0也属于/d,故/d就把后面所有的0顺带的匹配了。所以我们需要使用?来进行非贪婪匹配,其意思是尽可能少的按照当前规则匹配:

var a = /^(\d+?)(0*)$/
a.exec(1254000)  //   ["1254000", "1254", "000"]

3、写一个函数trim(str),去除字符串两边的空白字符

法一:

function trim(str){
    var arr = str.split(/\s+/g);
    for(var i = 0; i < arr.length; i++){
         if(arr[i] == ""){
         arr.splice(i,1);
         i--;
        } 
    }
    return arr.join(" ");
}
trim(" 1 2 3 4 5 ")

法二:

function trim(str){
    str = str.split(/\s+/g).join(" ");
    str = str.replace(/^\s+|\s+$/g,"");
    return str;
}
trim(" 1 2 3 4 5 ");

4、使用实现 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls),使用正则:

function addClass(el, cls){       //cls是新的类名,el是DOM元素
    var re = new RegExp('(\\s|^)' + cls + '(\\s|$)','g');
    if (! re.test(el.className) ){
        el.className += " " + cls;
    }
    else {
        console.log("hasclass " + cls);
    }
}

function hasClass(el,cls){
    var re = new RegExp('(\\s|^)' + cls + '(\\s|$)','g');
    if ( re.test(el.className)){
        return true;
    }
    else {
        return false;
    }
}

function removeClass(el,cls) {
    var re = new RegExp('(\\s|^)' + cls + '(\\s|$)','g');
    if ( re.test(el.className)){
        el.className = el.className.replace((" " + cls)||(cls + " ") ,"");
    }
    else{
        console.log("has no class "+ cls);
    }
}

这里有几个要注意的地方:

  • 从外部想要向正则表达式传递数据时,用var reg = / /的方法是没法传递的,所以只能用创立原型的办法,var reg = new RegExp()
  • 由于RegExp在此传递的参数为字符串格式,‘(\\\s|^)’代表了字符串形式的\s或^,后面的同理。
  • g代表了全局搜索(globle),此参数位置还可以传递i(ignore)忽略大小写和m(multiply)多行搜索(这个得和g一块用才能显现效果)

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

function isEmail(str){
    var email = /(\w+)@(\w+).(\w+)/
    return email.test(str);
}

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

function isPhoneNum(num){
    var tel = /^1[3,5,8]\d{9}$/;
    return tel.test(num);
}

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

function isValidUsername(str){
    var username = /^\w{6,20}$/;
    return username.test(str);
}

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

function isValidPassword(str){
    var fundenmental = /[\w]{6,20}/;
    var w = /[a-z]{6,20}/,
        W = /[A-Z]{6,20}/,
        num = /[0-9]{6,20}/,
        line = /[_]{6,20}/;
    if(fundenmental.test(str)){                                       //先判断是否为6-20的下划线,数字,字母的构成
        if(w.test(str) | W.test(str) | num.test(str) | line.test(str)){    //再判断是否仅是单个特性的构成
            return false;
        }
        else {
            return true;
        }
    }
    else {
        return false;
    }
}

9、写一个正则表达式,得到如下字符串里所有的颜色(#121212)

var re = /#[0-9a-zA-z]{6}/g;

var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "

alert( subj.match(re) )

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;
str.match(pat);    //[""hunger"", ""world""]

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

str = '.. <!-- My -- comment \n test --> ..  <!----> .. '
re = /.. your regexp ../

str.match(re) // '<!-- My -- comment \n test -->', '<!---->'

贪婪模式:

str = '.. <!-- My -- comment \n test --> ..  <!----> .. '
re = /<!--[^\.]*/g;    //匹配“<!-- 非.的所有字符”,遇到.停止。
str.match(re);                  

非贪婪模式:

str = '.. <!-- My -- comment \n test --> ..  <!----> .. '
re = /<!--[^\.]*?-->/g;    //匹配“<!-- 非.的所有字符-->”
str.match(re);  

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;        //这里必须使用非贪婪匹配;
var str = '<> <a href="/"> <input type="radio" checked> <b>';
str.match(re); // '<a href="/">', '<input type="radio" checked>', '<b>'
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容

  • '^'必须才开头开始匹配'$'必须在末尾结束匹配'|' 表示‘或’/ab|cd/匹配ab或者cd'.'表示点字符(...
    zjh111阅读 412评论 0 0
  • 一、概述 正则表达式(regular expression)是一种表达字符串结构的方法,有点像字符串的模版,常常用...
    周花花啊阅读 571评论 0 1
  • 请移步:https://blog.cdswyda.com/post/20161102
    依韵宵音阅读 818评论 0 21
  • 初衷:看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印...
    DCbryant阅读 3,995评论 0 20
  • 深度阅读,其实就是精读。在学习的过程中,有些书我们可以大致翻阅,但是,对于一些比较难理解,但是又能够让自己改变认知...
    晓芸will阅读 123评论 0 1