[記錄] JavaScript 中的正則表達式(案例分析) -开发者知识库

[記錄] JavaScript 中的正則表達式(案例分析) -开发者知识库,第1张

正則可視化工具: Regexper

案例分析:

匹配16進制顏色值

要求匹配:
#ffbacd、#FC01ad、#FFF、#ffE

分析:

// 16進制字符, 可以用字符組 [0-9a-fA-F]
// 字符可以出現3 或 6次, 需要用到量詞和分支結構
// 使用分支時,需要注意順序

var reg = /#([0-9a-fA-f]{6}|[0-9a-fA-f]{3})/g;

"#ffbacd;#FC01ad;212#FFF;#ffE1".match(reg);
// ["#ffbacd", "#FC01ad", "#FFF", "#ffE"]

 

匹配24小時制的時間

匹配要求:
08:59、23:59、3:7
分析:
時間划分 - 小時:
上午 00點到09點(0可選); 白天10點到19點;晚上20點到23點;
方法一: 第一位是[01],則第二位是[0-9], 如果第一位是2,則第二位[0-3]
[01]?[0-9]|2[0-3]

方法二: 分為[0-3]和[4-9]
[記錄] JavaScript 中的正則表達式(案例分析) -开发者知识库,第2张
[012]?[0-3]|[01]?[4-9]

分鍾: 00分鍾到59分鍾; 第一個數范圍在0-5之間, 第二個數在0-9之間;
[0-5][0-9]

最終結果:
用於復雜的字符串搜索替換時, 如: "跑步用時19:50", 表示的是19分50秒;
由於是在整個字符串中查找,用到了\b單詞的開始和結束

/\b(?:[01]?[0-9]|2[0-3]):[0-5][0-9]\b/
// 或者
/\b(?:[012]?[0-3]|[01]?[4-9]):[0-5][0-9]\b/

var reg = /\b(?:[01]?[0-9]|2[0-3]):[0-5][0-9]\b/g;
"18:30開始跑步,18:52結束,用時22:30".match(reg);
// ["18:30", "18:52", "22:30"]


用於數據驗證, 如表單中的字符串必須是24小時制的時間 08:59

/^(?:[01]?[0-9]|2[0-3]):[0-5][0-9]$/
// 或者
/^(?:[012]?[0-3]|[01]?[4-9]):[0-5][0-9]$/

var reg = /^(?:[012]?[0-3]|[01]?[4-9]):[0-5][0-9]$/;
reg.test("08:59");
// true

 

數字的千分位分隔表示法

// 示例 (數字, 從右往左, 每隔3個用逗號分隔)
// 把 "12345678", 變成 "12,345,678"

// 因為逗號出現的位置, 要求3個數字一組, 至少出現一次
// /(\d{3}) /
// 從右往左 用先行正向斷言 
var reg = /(?=(\d{3}) $)/g;
"12345678".replace(reg, ",");
// "12,345,678"

// 正則表示, 從結尾向前數,是3的倍數,就把其前面的位置替換成逗號。
"123456789".replace(reg, ",");
// ",123,456,789" 

// 解決方案:
// 要求匹配到的這個位置不能是開頭
// (?!^) 先行逆向斷言, 非開頭
var reg = /(?!^)(?=(\d{3}) $)/g;
"123456789".replace(reg, ",");
// "123,456,789"

// 把"12345678 123456789", 替換成"12,345,678 123,456,789"
// 此時需要把正則里的開頭^和結尾$,替換成\b
var reg = /(?!\b)(?=(\d{3}) \b)/g;
"12345678 123456789".replace(reg, ",");
// "12,345,678 123,456,789"

// 其中的(?!\b) 表示的是非單詞邊界, 等價於 \B
// /\B(?=(\d{3}) \b)/g;

 

去掉字符串首尾空白符

匹配到開頭和結尾的空白符,然后替換成空字符串.

var reg = /^\s |\s $/g;
" Miss You!   ".replace(reg, "");
// "Miss You!"


匹配整個字符串, 用引用來提取相應的數據

// 這里使用*?惰性匹配,不然也會匹配對一個空格之前的所有空格
var reg = /^\s*(.*?)\s*$/g;
" Miss You!   ".replace(reg, "");
// "Miss You!"

 

將每個單詞的首字母轉為大寫

// 思路: 找到每個單詞的首字母, 開頭是字母或\s空格后是字母的
function firstLetterToUpperCase(str){
    var reg = /(?:^|\s)\w/g;
    return str.toLowerCase().replace(reg, function(c){
        return c.toUpperCase();
    });    
}
console.log( firstLetterToUpperCase("my    name is epeli!") );
// "My    Name Is Epeli!"

 

駝峰化

function camelize(str){
    var reg = /[-_\s] (.)?/g;
    return str.replace(reg, function(match, c){
        return c ? c.toUpperCase() : "";
    });
}
console.log(camelize('--moz-transform _class-name'));
// "MozTransformClassName"

 

逆轉駝峰化

function dasherize(str){
    var reg = /([A-Z])/g;
    str = str.replace(reg, "-");
    var reg = /[-_\s] /g;
    str = str.replace(reg, "-");
    return str.toLowerCase()
}
console.log( dasherize("MozTransform") );
// "-moz-transform"

 

匹配HTML成對標簽

// 匹配要求:
<title>標題</title>
<p>段落</p>

// 不匹配: 
<title>不成對<p>

// 匹配一個開始標簽, <[^>] >
// 匹配一個結束標簽, <\/[^>] >
// 為了匹配成對的標簽, 需要使用反向引用
// <([^>] )> 結束標簽反向引用前面的分組 <\/>
// [\d\D] 表示的是數字或者不是數字。也就是匹配任意字符
// [^>] 表示匹配除>以為的任意字符

var reg = /<([^>] )>[\d\D]*<\/>/g;
reg.test("標題"); // true
reg.test("

段落

"); // true
reg.test("<p>error</title>"); // false

 

匹配身份證號

/^(\d{15}|\d{7}[\dxX])$/

// 正則分成兩部分
// \d{15} 表示15位連續數字
// \d{17}[\dxX] 表示17位連續數字,最后可以是數字或大小寫"x"

 

使用構造函數生成正則表達式

// getElementsByClassName 函數的實現思路:
// A. 比如要獲取className為 "item" 的dom元素
// B. 首先生成一個正則 /(^|\s)item(\s|$)/;
// C. 然后再逐一驗證頁面上的所有dom元素的類名,取滿足匹配的元素

function getElementsByClassName(className){
    // 獲取頁面中所有的標簽元素
    var elements = document.getElementsByTagName('*');
    var reg = new RegExp("(^|\s)"   className   "(\s|$)");
    var result = [];
    for (var i = 0; i < elements.length; i  ){
        var element = elements[i];
        if( reg.test(element.className)){
            result.push(element);
        }
    }
    return result;
}
console.log( getElementsByClassName('item') );
// [a.item, div.item, p.item, ...]


最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复