正則表達(dá)式

  • \d,\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^$分別是什么?
字符 含義
\d 任何ASCII數(shù)字,等價于[0-9]
\w 任何ASCII字符組成的單詞,等價于[a-zA-Z0-9]
\s 任何Unicode空白符(空格、tab、換行、回車)
[a-zA-Z0-9] a-z的所有字母,A-Z的所有字母,0-9的所有數(shù)字,等價于\w
\b 匹配一個單詞的邊界,位于字符\w和\W之間的位置,或位于字符\w和字符串的開頭或者結(jié)尾之間的位置([\b]匹配的是退格符)
. 除換行符\n和回車\r之外的任意字符
* 匹配前一項0次或多次,等價于[0,],/*a/也可匹配"bbb",因為字符串中含有0個a
+ 匹配前一項1次或多次,等價于[1,]
匹配前一項-次或1此,等價于{0,1},前一項就是可選的
x{3} 匹配x 3次
^ 匹配以xxx開頭
$ 匹配以xxx結(jié)尾
  • 貪婪模式和非貪婪模式指什么?

  • 貪婪模式:{n,m},{n, },{n},?,+,*這些匹配重復(fù)字符都是盡可能多的匹配, 在匹配滿足n的情況下會繼續(xù)匹配m-n直到m的情況,稱為貪婪模式

    貪婪模式

  • 非貪婪模式:非貪婪模式只需在待匹配字符后加一個?,這樣正則表達(dá)式會盡量少的匹配,在匹配不成功時再繼續(xù)嘗試。

    非貪婪模式

  • 寫一個函數(shù)trim(str),去除字符串兩邊的空白字符

        function trim(str) {
            return str.replace(/^\s+|\s+$/g,"");
        }
  • 使用實現(xiàn) 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>正則表達(dá)式</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 + "已經(jīng)存在");
            }
        }
        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>

糾正

參考

  • 寫一個函數(shù)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));
  • 寫一個函數(shù)isPhoneNum(str),判斷用戶輸入的是不是手機(jī)號
        function isPhoneNum(str) {
            var reg = /^1{1}[3875]{1}\d{9}$/;
            return reg.test(str);
        }
        var phoneNum = 13401637929;
        console.log("手機(jī)號" + isPhoneNum(phoneNum));
  • 寫一個函數(shù)isValidUsername(str),判斷用戶輸入的是不是合法的用戶名(長度6-20個字符,只能包括字母、數(shù)字、下劃線)
        function isValidUsername(str) {
            var reg = /^[a-zA-Z0-9_]{6,20}/;
            if (reg.test(str)) {
                console.log(str + " 用戶名合法");
            } else {
                console.log(str + " 非法用戶名");
            }
        }
  • 寫一個函數(shù)isValidPassword(str), 判斷用戶輸入的是不是合法密碼(長度6-20個字符,包括大寫字母、小寫字母、數(shù)字、下劃線至少兩種)
        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("密碼錯誤 密碼至少包含數(shù)字、字母大小寫、下劃線兩種");
                return false;
            }
            console.log("密碼正確 登錄中");
            return true;
        }
        isValidPassword("uuu4");
        isValidPassword("uuuuuuu");
        isValidPassword("uuuuuu443");
  • 寫一個正則表達(dá)式,得到如下字符串里所有的顏色(#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`后,檢查后一位是否為`"`,發(fā)現(xiàn)滿足條件就取出字符串,然后對字符串繼續(xù)進(jìn)行正則的匹配

參考

  • 補(bǔ)全如下正則表達(dá)式,輸出字符串中的注釋內(nèi)容. (可嘗試使用貪婪模式和非貪婪模式兩種方法)
        str = '.. <!-- My -- comment \n test --> ..  <!----> .. '
        re1 = /<!--[^>]*-->/g;
        re2 = /<!--[\w\W]*?-->/g;
        str.match(re1)
        str.match(re2) // '<!-- My -- comment \n test -->', '<!---->'
  • 補(bǔ)全如下正則表達(dá)式
        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)

本博客版權(quán)歸 本人和饑人谷所有,轉(zhuǎn)載需說明來源

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容