>

多少个小例子教你怎么落到实处正则表明式high

- 编辑:正版管家婆马报彩图 -

多少个小例子教你怎么落到实处正则表明式high

看到网上有那种标签云觉得蛮炫的,想自己玩玩

程序员在编写代码的时候少不了和字符串以及“查询”打交道,两者的交集中有一个叫做正则表达式的的东西,这家伙用好了可以提高编程效率,用不好的话...你可以先去好好学一学。

/**
* 云标签
*
* @author xuyw

  关于正则的使用,举个简单的例子:

* @email [email protected]
* @date 2014-05-27
*/

复制代码 代码如下:

无标题文档






 明星
 帅哥
 JAVA
 xuyw
 银行利率
 PHP
 android
 C
 C#
 ORACLE
 Mysql
 银行贷款利率表
 银行存款利率
 银行利率
 银行贷款利率
 银行存款利率
 银行利率
 VB
 银行存款利率
 银行贷款利率
 银行利率
 房贷利率2013
 银行存款利率表
 银行贷款利率表


<script src='tag.js' type="text/javascript"></script>



var radius = 90;
var d = 200;
var dtr = Math.PI / 180;
var mcList = [];
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed = 11;
var size = 200;
var mouseX = 0;
var mouseY = 10;
var howElliptical = 1;
var aA = null;
var oDiv = null;
window.onload=function ()
{
 var i=0;
 var oTag=null;
 oDiv=document.getElementById('yuntags');
 aA=oDiv.getElementsByTagName('a');
 for(i=0;iseover = (function (obj) {
   return function () {
    obj.on = true;
    this.style.zIndex = 9999;
    this.style.color = '#fff';
    this.style.padding = '5px 5px';
    this.style.filter = "alpha(opacity=100)";
    this.style.opacity = 1;
   }
  })(oTag)
  aA[i].onmouseout = (function (obj) {
   return function () {
    obj.on = false;
    this.style.zIndex = obj.zIndex;
    this.style.color = '#fff';
    this.style.padding = '5px';
    this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")";
    this.style.opacity = obj.alpha;
    this.style.zIndex = obj.zIndex;
   }
  })(oTag)
  oTag.offsetWidth = aA[i].offsetWidth;
  oTag.offsetHeight = aA[i].offsetHeight;
  mcList.push(oTag);
 }
 sineCosine( 0,0,0 );
 positionAll();
 (function () {
            update();
            setTimeout(arguments.callee, 40);
        })();
};
function update()
{
 var a, b, c = 0;
        a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;
        b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;
        lasta = a;
        lastb = b;
        if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
            return;
        }
        sineCosine(a, b, c);
        for (var i = 0; i < mcList.length; i++) {
            if (mcList[i].on) {
                continue;
            }
            var rx1 = mcList[i].cx;
            var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa);
            var rz1 = mcList[i].cy * sa + mcList[i].cz * ca;

            var rx2 = rx1 * cb + rz1 * sb;
            var ry2 = ry1;
            var rz2 = rx1 * (-sb) + rz1 * cb;

            var rx3 = rx2 * cc + ry2 * (-sc);
            var ry3 = rx2 * sc + ry2 * cc;
            var rz3 = rz2;

            mcList[i].cx = rx3;
            mcList[i].cy = ry3;
            mcList[i].cz = rz3;

            per = d / (d + rz3);

            mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2);
            mcList[i].y = ry3 * per;
            mcList[i].scale = per;
            var alpha = per;
            alpha = (alpha - 0.6) * (10 / 6);
            mcList[i].alpha = alpha * alpha * alpha - 0.2;
            mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz));
        }
        doPosition();
}
function positionAll()
{
 var phi = 0;
    var theta = 0;
    var max = mcList.length;
    for (var i = 0; i < max; i++) {
        if (distr) {
            phi = Math.acos(-1 + (2 * (i + 1) - 1) / max);
            theta = Math.sqrt(max * Math.PI) * phi;
        } else {
            phi = Math.random() * (Math.PI);
            theta = Math.random() * (2 * Math.PI);
        }
        //坐标变换
        mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi);
        mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi);
        mcList[i].cz = radius * Math.cos(phi);

        aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px';
        aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px';
    }
}
function doPosition()
{
 var l = oDiv.offsetWidth / 2;
        var t = oDiv.offsetHeight / 2;
        for (var i = 0; i < mcList.length; i++) {
            if (mcList[i].on) {
                continue;
            }
            var aAs = aA[i].style;
            if (mcList[i].alpha > 0.1) {
                if (aAs.display != '')
                    aAs.display = '';
            } else {
                if (aAs.display != 'none')
                    aAs.display = 'none';
                continue;
            }
            aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';
            aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';
            //aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
            //aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")";
            aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";
            aAs.zIndex = mcList[i].zIndex;
            aAs.opacity = mcList[i].alpha;
        }
}
function sineCosine( a, b, c)
{
 sa = Math.sin(a * dtr);
    ca = Math.cos(a * dtr);
    sb = Math.sin(b * dtr);
    cb = Math.cos(b * dtr);
 sc = Math.sin(c * dtr);
 cc = Math.cos(c * dtr);
}

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);

图片 1

  憋了几分钟= =||,我也觉得这个正则不是特别好理解(红黑相间了,应该稍微清晰点),有些朋友可能不知道(?:content)是什么意思,还有类似(?!content)和(?=content)分组和前瞻的知识,建议去问问度哥和谷娘。

/** * 云标签 * * @author xuyw * @email [email protected] * @date 2014-05-27 */ 无标题文档 明星帅哥JAVAxuyw银...

一. 正则应用小DEMO示例

下面是一串随手写的代码,放在textarea中:

复制代码 代码如下:

/**
* @author barret lee
* @date   2013-10-06
* @email  [email protected]
*/

//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 [email protected]
*/

//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等都是对正则表达式的绝伦应用,很值得去看看源码,好好钻研人家都考虑了那些容易出错的点,源码都不长,两三百行。了解一个大概比较容易,但是当自己动手的时候总会发现很多细节问题处理不好,我那上面几个正则就倒弄了半天=

正则表达式,用起来还是挺方便的。正则技能,你值得拥有~

 

 

...

本文由web前端发布,转载请注明来源:多少个小例子教你怎么落到实处正则表明式high