站長資訊網
        最全最豐富的資訊網站

        幾個小例子教你如何實現正則表達式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  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:

        復制代碼 代碼如下:
        /**
        * @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

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

        P.S:上面這玩意兒只是一個小測試,代碼相當不健壯,拿著學習正則練手~

        二. 需要注意的地方

        復制代碼 代碼如下:
        //step config
        var config = {
            regs: [
                /^s+|s+$/g,
                /([“‘])(?:\.|[^\n])*?1/g,
                //(?!*|span).+/(?!span)[gim]*/g,
                /(//.*|/*[Ss]+?*/)/g,
                /(*s*)(@w+)(?=s*)/g,
                /b…b/g
            ],
          //…
        };

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

        復制代碼 代碼如下:
        var reg = (/^s+|s+$/)|(/([“‘])(?:\.|[^\n])*?1/)|(//(?!*|span).+/(?!span)[gim]*/)|(/(//.*|/*[Ss]+?*/)/)|(/(*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等都是對正則表達式的絕倫應用,很值得去看看源碼,好好鉆研人家都考慮了那些容易出錯的點,源碼都不長,兩三百行。了解一個大概比較容易,但是當自己動手的時候總會發現很多細節問題處理不好,我那上面幾個正則就倒弄了半天= =

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

         

         

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 99热精品毛片全部国产无缓冲| 国产一区二区三区精品视频| 69堂午夜精品视频在线| 日本精品少妇一区二区三区| 99久久精品国内| 日韩精品无码一本二本三本| 久久97久久97精品免视看秋霞| 九九热精品在线| 国内精品伊人久久久久AV影院| 四虎永久在线精品免费一区二区 | 午夜国产精品无套| 国产高清精品一区| 精品一区二区久久| 国产精品一久久香蕉国产线看观看| 亚洲国产婷婷综合在线精品| 精品成人av一区二区三区| 在线欧美v日韩v国产精品v| 91麻豆精品视频| 久久亚洲国产成人精品性色| 亚洲性日韩精品国产一区二区 | 精品熟女少妇aⅴ免费久久| 欧美精品亚洲精品日韩| 国产成人久久精品激情 | 无码8090精品久久一区| 精品欧美一区二区三区久久久| 99免费精品国产| 欧美日韩精品一区二区| 国产精品天天影视久久综合网| 99在线精品视频观看免费| 日产精品久久久久久久| 无码久久精品国产亚洲Av影片 | 日韩精品在线播放| 欧美精品在线免费| 欧美成人精品欧美一级乱黄一区二区精品在线 | 国内精品久久久久影院优 | 无翼乌无遮挡全彩老师挤奶爱爱帝国综合社区精品 | 精品国产一区二区三区2021| 国产三级精品三级在专区| 国产精品香蕉在线观看| 国内精品久久久久久久coent | 国产偷窥熟女高潮精品视频|