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

        幾個小例子教你如何實現正則表達式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號
        主站蜘蛛池模板: 老年人精品视频在线| 精品无码国产污污污免费网站国产 | 日韩精品成人亚洲专区| 999精品视频这里只有精品| 呦交小u女国产精品视频| 久久91精品综合国产首页| 四虎国产精品永久地址49| 国产精品人成在线播放新网站 | 欧美午夜精品久久久久久浪潮| 欧美精品一本久久男人的天堂| 久久精品国产亚洲AV嫖农村妇女| 日韩精品一区二区三区影院| 国产精品视频九九九| 98香蕉草草视频在线精品看| 午夜精品视频在线观看| 国产精品黄网站| 91探花福利精品国产自产在线| 国内精品伊人久久久久av一坑| 欧美精品hdvideosex4k| 亚洲精品卡2卡3卡4卡5卡区| 亚洲精品无码成人片在线观看 | 亚洲综合精品网站| 久久久久亚洲精品无码网址| 国产在线精品国自产拍影院| 国产精品污WWW一区二区三区| 99久久国产综合精品网成人影院 | 久久久精品午夜免费不卡| 国产精品久久99| 日韩精品免费在线视频| 久久精品视频网| 欧美成人精品一级高清片| 久久99精品国产麻豆宅宅| 精品国产欧美一区二区| 国产在线不卡午夜精品2021| 久久精品成人国产午夜| 午夜精品在线观看| 国产精品青青在线观看爽香蕉| 国产精品v欧美精品v日本精| 精品人体无码一区二区三区| 日韩精品成人a在线观看| 精品一区二区三区免费毛片爱|