我們在編寫代碼的時候一般情況下都少不了和字符串以及“查詢”打交道的，這兩者交集中我們需要接觸到正則表達式，一般正則表達式用來提高編程效率，那么下面我們就去看看實現正則表達式highlight高亮的方法。
關于正則的使用，舉個簡單的例子：
?
?
憋了幾分鐘= =||，我也覺得這個正則不是特別好理解（紅黑相間了，應該稍微清晰點），有些朋友可能不知道（?:content）是什么意思，還有類似（?!content）和(?=content)分組和前瞻的知識，建議去問問度哥和谷娘。
一. 正則應用小DEMO示例
下面是一串隨手寫的代碼，放在textarea中：
?
?
//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：
?
?
//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
?
跟著提示，下一步下一步多點幾下，可以看出效果還是可以滴。主要是這里的正則略微的麻煩，處理一個色變得琢磨老半天。
P.S：上面這玩意兒只是一個小測試，代碼相當不健壯，拿著學習正則練手～
二. 需要注意的地方
?
?
這些正則我是分開來寫的，主要是為了做上面那個demo，方便單步顯示。但是把這些正則分開寫是相當不合理的，放在textarea中的是一串沒有任何標簽的字符串，為了著色，每處理一個正則都會在codes中插入一些標簽（我這里用的是span），當我們處理下一個正則的時候就必須得考慮上一步加入的標簽，這樣會很大程度提高開發難度，最好的做法是把這些正則都放到一坨，然后用|隔開：
?
?
這樣放的好處是可以直接
?
?
一次性處理，不用擔心插入標簽影響最后的結果，因為標簽是同一時間插入的，不會有干擾。
代碼高亮插件highlight的基本原理也差不多，只不過他的容錯機制和代碼健壯性這塊做的更加完善，我在代碼里頭加了一個配置文件，
?
?
按照自己的喜好，也可以加以修改，類似這樣的擴展，我們在寫代碼的時候稍微注意下，多留幾個接口就好了。（不過這些活兒干起來都還挺辛苦的～）
沒有做成插件，也沒這個必要，知道基本原理然后動手實踐下就差不多了。
三. 小結
類似很多的前端模板，artTemplate，baiduTemplate等都是對正則表達式的絕倫應用，很值得去看看源碼，好好鉆研人家都考慮了那些容易出錯的點，源碼都不長，兩三百行。了解一個大概比較容易，但是當自己動手的時候總會發現很多細節問題處理不好，我那上面幾個正則就倒弄了半天= =
上文就是小編為大家介紹實現正則表達式highlight高亮的方法，這個方法用起來還是挺方便的。正則技能，你值得擁有～
新聞熱點
疑難解答
