玩轉正則之highlight高亮

　　程序員在編寫代碼的時候少不了和字符串以及“查詢”打交道，兩者的交集中有一個叫做正則表達式的的東西，這家伙用好了可以提高編程效率，用不好的話...你可以先去好好學一學。

　　關於正則的使用，舉個簡單的例子：

var m = location.href.match(/(\w+:)\/{0,3}([^\/]+)(?:(\/[^\?#]*))?(?:(\?[^#]+|.+))?(?:(#.*))?/);
var res = {
    protocol: m[1],
    host: m[2],
    path: m[3],
    search: m[4],
    hash: m[5]
};
console.log(res);

　　憋了幾分鍾= =||，我也覺得這個正則不是特別好理解（紅黑相間了，應該稍微清晰點），有些朋友可能不知道（?:content）是什么意思，還有類似（?!content）和(?=content)分組和前瞻的知識，建議去問問度哥和谷娘。

 

一. 正則應用小DEMO示例

下面是一串隨手寫的代碼，放在textarea中：

/** * @author barret lee * @date 2013-10-06 * @email [e-mail] */ //outer var var a = "this id outer string"; //closure function b() { //inner var var a = "this is inner string"; var g = a.replace(/this is inner string/g, function() { return new Function("/*clousure*/this.a")(); }); /** * @description closure - regExp test * @author barret lee */ function c() { return { a: a, g: g } } return c; } var s = b()(); //s.a, s.g

 

正則匹配，處理上面那堆字符串的小DEMO：

 

點擊開始演示

 

 

博客園引入個js文件還真羅嗦，有時候會報XSS（跨站腳本攻擊）相關的錯誤，（如果木有正常顯示，刷新下試試）。

如果還是沒有，可以看另外一個demo：SAE/highlight

跟着提示，下一步下一步多點幾下，可以看出效果還是可以滴。主要是這里的正則略微的麻煩，處理一個色變得琢磨老半天。

P.S：上面這玩意兒只是一個小測試，代碼相當不健壯，拿着學習正則練手～

 

二. 需要注意的地方

//step config
var config = {
    regs: [
        /^\s+|\s+$/g,
        /(["'])(?:\\.|[^\\\n])*?\1/g,
        /\/(?!\*|span).+\/(?!span)[gim]*/g,
        /(\/\/.*|\/\*[\S\s]+?\*\/)/g,
        /(\*\s*)(@\w+)(?=\s*)/g,
        /\b...\b/g
    ],
　　//...
};

這些正則我是分開來寫的，主要是為了做上面那個demo，方便單步顯示。但是把這些正則分開寫是相當不合理的，放在textarea中的是一串沒有任何標簽的字符串，為了着色，每處理一個正則都會在codes中插入一些標簽（我這里用的是span），當我們處理下一個正則的時候就必須得考慮上一步加入的標簽，這樣會很大程度提高開發難度，最好的做法是把這些正則都放到一坨，然后用|隔開：

var reg = (/^\s+|\s+$/)|(/(["'])(?:\\.|[^\\\n])*?\1/)|(/\/(?!\*|span).+\/(?!span)[gim]*/)|(/(\/\/.*|\/\*[\S\s]+?\*\/)/)|(/(\*\s*)(@\w+)(?=\s*)/)|(/\b(break|continue|do|for|in|function|if|else|return|switch|throw|try|catch|finally|var|while|with|case|new|typeof|instance|delete|void|Object|Array|String|Number|Boolean|Function|RegExp|Date|Math|window|document|navigator|location|true|false|null|undefined|NaN)\b)

這樣放的好處是可以直接

codes.replace(reg, function(){
    var args = arguments;
    //...
});

一次性處理，不用擔心插入標簽影響最后的結果，因為標簽是同一時間插入的，不會有干擾。

代碼高亮插件highlight的基本原理也差不多，只不過他的容錯機制和代碼健壯性這塊做的更加完善，我在代碼里頭加了一個配置文件，

var colors = {
    string: "#FFA0A0",
    reg: "#16E916",
    note: "#888",
    tag: "orange",
    keywords: "#B0B0FF"
};

按照自己的喜好，也可以加以修改，類似這樣的擴展，我們在寫代碼的時候稍微注意下，多留幾個接口就好了。（不過這些活兒干起來都還挺辛苦的～）

沒有做成插件，也沒這個必要，知道基本原理然后動手實踐下就差不多了。

 

三. 小結

類似很多的前端模板，artTemplate，baiduTemplate等都是對正則表達式的絕倫應用，很值得去看看源碼，好好鑽研人家都考慮了那些容易出錯的點，源碼都不長，兩三百行。了解一個大概比較容易，但是當自己動手的時候總會發現很多細節問題處理不好，我那上面幾個正則就倒弄了半天= =

另外一個配色方案，隨便弄的，戳這里SAE/highlight。

正則表達式，用起來還是挺方便的。正則技能，你值得擁有～