程序員在編寫(xiě)代碼的時(shí)候少不了和字符串以及“查詢”打交道，兩者的交集中有一個(gè)叫做正則表達(dá)式的的東西，這家伙用好了可以提高編程效率，用不好的話...你可以先去好好學(xué)一學(xué)。
關(guān)于正則的使用，舉個(gè)簡(jiǎn)單的例子：
復(fù)制代碼 代碼如下:
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);
憋了幾分鐘= =||，我也覺(jué)得這個(gè)正則不是特別好理解（紅黑相間了，應(yīng)該稍微清晰點(diǎn)），有些朋友可能不知道（?:content）是什么意思，還有類似（?!content）和(?=content)分組和前瞻的知識(shí)，建議去問(wèn)問(wèn)度哥和谷娘。
一. 正則應(yīng)用小DEMO示例
下面是一串隨手寫(xiě)的代碼，放在textarea中：
復(fù)制代碼 代碼如下:
/**
* @author barret lee
* @date 2013-10-06
* @email barret.china@gmail.com
*/
//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：
復(fù)制代碼 代碼如下:
/**
* @author barret lee
* @date 2013-10-06
* @email barret.china@gmail.com
*/
//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
跟著提示，下一步下一步多點(diǎn)幾下，可以看出效果還是可以滴。主要是這里的正則略微的麻煩，處理一個(gè)色變得琢磨老半天。
P.S：上面這玩意兒只是一個(gè)小測(cè)試，代碼相當(dāng)不健壯，拿著學(xué)習(xí)正則練手～
二. 需要注意的地方
復(fù)制代碼 代碼如下:
//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
],
//...
};
這些正則我是分開(kāi)來(lái)寫(xiě)的，主要是為了做上面那個(gè)demo，方便單步顯示。但是把這些正則分開(kāi)寫(xiě)是相當(dāng)不合理的，放在textarea中的是一串沒(méi)有任何標(biāo)簽的字符串，為了著色，每處理一個(gè)正則都會(huì)在codes中插入一些標(biāo)簽（我這里用的是span），當(dāng)我們處理下一個(gè)正則的時(shí)候就必須得考慮上一步加入的標(biāo)簽，這樣會(huì)很大程度提高開(kāi)發(fā)難度，最好的做法是把這些正則都放到一坨，然后用|隔開(kāi)：
復(fù)制代碼 代碼如下:
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)
這樣放的好處是可以直接
復(fù)制代碼 代碼如下:
codes.replace(reg, function(){
var args = arguments;
//...
});
一次性處理，不用擔(dān)心插入標(biāo)簽影響最后的結(jié)果，因?yàn)闃?biāo)簽是同一時(shí)間插入的，不會(huì)有干擾。
代碼高亮插件highlight的基本原理也差不多，只不過(guò)他的容錯(cuò)機(jī)制和代碼健壯性這塊做的更加完善，我在代碼里頭加了一個(gè)配置文件，
復(fù)制代碼 代碼如下:
var colors = {
string: "#FFA0A0",
reg: "#16E916",
note: "#888",
tag: "orange",
keywords: "#B0B0FF"
};
按照自己的喜好，也可以加以修改，類似這樣的擴(kuò)展，我們?cè)趯?xiě)代碼的時(shí)候稍微注意下，多留幾個(gè)接口就好了。（不過(guò)這些活兒干起來(lái)都還挺辛苦的～）
沒(méi)有做成插件，也沒(méi)這個(gè)必要，知道基本原理然后動(dòng)手實(shí)踐下就差不多了。
三. 小結(jié)
類似很多的前端模板，artTemplate，baiduTemplate等都是對(duì)正則表達(dá)式的絕倫應(yīng)用，很值得去看看源碼，好好鉆研人家都考慮了那些容易出錯(cuò)的點(diǎn)，源碼都不長(zhǎng)，兩三百行。了解一個(gè)大概比較容易，但是當(dāng)自己動(dòng)手的時(shí)候總會(huì)發(fā)現(xiàn)很多細(xì)節(jié)問(wèn)題處理不好，我那上面幾個(gè)正則就倒弄了半天= =
正則表達(dá)式，用起來(lái)還是挺方便的。正則技能，你值得擁有～
您可能感興趣的文章:- 用正則表達(dá)式格式化html標(biāo)簽的代碼
- 正則表達(dá)式搭配js輕松處理json文本方便而老古
- 如何使用Javascript正則表達(dá)式來(lái)格式化XML內(nèi)容
- 如何實(shí)現(xiàn)正則表達(dá)式的JavaScript的代碼高亮
- js 玩轉(zhuǎn)正則表達(dá)式之語(yǔ)法高亮
- 使用正則表達(dá)式的格式化與高亮顯示json字符串
