Archive for August, 2004

Pages (8): « First ... « 1 2 3 4 5 6 7 » ... Last »

正则的几个基本概念（推荐）

Aug 19, 2004 Author: | Filed under: Uncategorized

关于正则很好的文章！

作者: 秋水无恨

经常看到说正则的文章，但说的只是方法，却很少有说以下几个基本概念：

1.贪婪：+,*,?,{m,n}等默认是贪婪匹配，即尽可能多匹配，也叫最大匹配

如果后面加上?，就转化为非贪婪匹配，需要高版本支持

2.获取：默认用(x|y)是获取匹配，很多时候只是测试，不一定要求得到所匹配的数据，

尤其在嵌套匹配或大数据中就要用非获取匹配(?:x|y)，这样提高了效率，优化了程序。

3.消耗：默认是消耗匹配，一般在预查中是非消耗匹配。

举个例子，2003-2-8要变为2003-02-08

如果用/-(d)-/第二次匹配将从8开始，从而只替换第一个2，错误

如果用/-(d)(?=-)/则第二次匹配从第二个-开始，即不消耗字符-

4.预查：js中分为正向预查和负向预查

如上面的(?=pattern)是正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。

还有(?!pattern)是负向预查，在任何不匹配 pattern 的字符串开始处匹配查找字符串。

负向预查有时会用在对[^]的扩充，[^]只是一些字符，而?!可以使整个字符串。

5.回调：一般用在替换上，即根据不用的匹配内容返回不用的替换值，从而简化了程序，需要高版本支持

6.引用：
um 对所获取的第num个匹配的引用。

例如，’(.)11′ 匹配AAA型。’(.)(.)21′ 匹配ABBA型。

</p> <p><script></p> <p>var str="我不...不...不是...是结...结...结巴...巴"</p> <p>alert(str.replace(/(.)(.+1)+/g,"$1"));</p> <p></script></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

当然还有很多，这些都只是基本的但需要….

遇到正则问题，一般可用以下两种方法解决：

1.分类，即根据所有的可能列出各种情况，如2003以内的数

0 0

1-999 [1-9]d{0,2}

1000-1999 1d{3}

2000-2003 200[0-3]

所以最后的匹配就是 (0|[1-9]d{0,2}|1d{3}|200[0-3])

2.分组，即将整句分为不同的最小单元，如’、%、_成双出现

能成组的，即允许存在的，有

”

%% 如果是大于2的偶数个可细分为多个更小的2字符单元

[^'%_] 非以上字符

所以最后的匹配就是 ^(”|%%|__|[^'%_])*$

</p> <p><script></p> <p>function f2c(s) {</p> <p> var test = /(d+(.d*)?)F/g; // 初始化模式。</p> <p> return(s.replace</p> <p> (test,</p> <p> function($0,$1,$2) { </p> <p> return((($1-32) * 5/9) + "C");</p> <p> }</p> <p> )</p> <p> );</p> <p>}</p> <p>document.write(f2c("Water freezes at 32F and boils at 212F."));</p> <p></script></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

0 Comments

源代码中找不到正确邮箱地址

Aug 18, 2004 Author: | Filed under: Uncategorized

guoshuangweb/coding/noemail.htm

其实这样也可以

</p> <p>guoshuang@butone.com</p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

这样就不会被一些垃圾邮件软件从你的网页上拿走你的邮箱地址。

[Edit on 2004-8-18 18:15:11 By guoshuang]

[Edit on 2004-8-18 18:15:30 By guoshuang]

0 Comments

样式表效果二

Aug 18, 2004 Author: | Filed under: Uncategorized

</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"</p> <p> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></p> <p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" ></p> <p><head></p> <style type="text/css"> <p>body {font:11px verdana;}</p> <p>oShow {position:absolute;}</p> <p>img {border:none;}</p> <p>#oShow a {color:#fff;text-decoration:none;position:absolute;width:50px;height:50px;background-color:#5c6773;}</p> <p>#oShow a img {position:absolute;left:-999px;top:-999px;}</p> <p>.a1 {left:50px;}</p> <p>.a2 {left:100px;}</p> <p>.a3 {left:150px;}</p> <p>#oShow a:hover {background-color:#8c97a3;}</p> <p>#oShow a.a1:hover img {left:-50px;top:0px;}</p> <p>#oShow a.a2:hover img {left:-100px;top:0px;}</p> <p>#oShow a.a3:hover img {left:-150px;top:0px;}</p> <p>#footer {margin-top:160px;float:left;}</p> </style> <p></head></p> <p><body bgcolor="#ffffff"></p> <div id="oShow"> <p> <a href="#1" class="a1">1<img src="mywebcodingpic1.gif" alt="test1" /></a><a href="#1" class="a2">2<img src="mywebcodingpic2.gif" alt="test2" /></a><a href="#1" class="a3">3<img src="mywebcodingpic3.gif" alt="test3" /></a></p> </div> <div id="footer"> </div> <p></body></p> <p></html></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[Edit on 2004-8-18 17:37:57 By guoshuang]

0 Comments

css做图例子解析

Aug 18, 2004 Author: | Filed under: Uncategorized

</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"</p> <p> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></p> <style type="text/css"> <p>#leaf {position:absolute;left:20px;top:20px;height:0px;width:0px;border-bottom:solid 70px #080;border-left:solid 70px #040;overflow:hidden;}</p> <p>#curve1 {position:absolute;font-size:150px;top:-50px; left:76px;color:white}</p> <p>#curve2 {position:absolute;font-size:150px;top:-16px;left:63px;color:white}</p> <p>#curve3 {position:absolute;font-size:180px;top:-6px; left:38px;color:white}</p> <p>#curve4 {position:absolute;font-size:120px;top:30px;left:13px;color:white}</p> <p>#curve5 {position:absolute;font-size:150px;top:-78px; left:50px;color:white}</p> <p>#curve6 {position:absolute;font-size:150px;top:-68px;left:18px;color:white}</p> <p>#curve7 {position:absolute;font-size:180px;top:-65px; left:-20px;color:white}</p> <p>#curve8 {position:absolute;font-size:120px;top:5px;left:-7px;color:white}</p> <p>#fruit1 {position:absolute;font-size:60px;top:-10px;left:80px;color:#900}</p> <p>#fruit2 {position:absolute;font-size:55px;top:-3px;left:70px;color:#c00}</p> <p>#fruit3 {position:absolute;font-size:65px;top:0px;left:78px;color:#e00}</p> <p>#hilight1 {position:absolute;font-size:16px;top:18px;left:72px;color:#c99}</p> <p>#hilight2 {position:absolute;font-size:16px;top:14px;left:85px;color:#c99}</p> <p>#hilight3 {position:absolute;font-size:22px;top:23px;left:82Px;color:#fcc}</p> </style> <div id="leaf"></div> <div id="curve1">•</div> <div id="curve2">•</div> <div id="curve3">•</div> <div id="curve4">•</div> <div id="curve5">•</div> <div id="curve6">•</div> <div id="curve7">•</div> <div id="curve8">•</div> <div id="fruit1">•</div> <div id="fruit2">•</div> <div id="fruit3">•</div> <div id="hilight1">•</div> <div id="hilight2">•</div> <div id="hilight3">•</div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

其实就是方块和圆（•）组成的，采用绝对定位构成的。

首先是这样的代码：

</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"</p> <p> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></p> <style type="text/css"> <p>#leaf {height:200px;width:200px;border-bottom:solid 70px #080;border-left:solid 70px #040;}</p> </style> <div id="leaf"></div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

通过这种方式可以得到斜线（除了45度，还可以得到任意角度的，只要两个边的宽度不一样）

</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"</p> <p> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></p> <style type="text/css"> <p>#leaf {height:0px;width:0px;border-bottom:solid 70px #080;border-left:solid 70px #040;overflow:hidden;}</p> </style> <div id="leaf"></div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

加入圆点

</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"</p> <p> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></p> <style type="text/css"> <p>#leaf {height:0px;width:0px;border-bottom:solid 70px #080;border-left:solid 70px #040;overflow:hidden;}</p> <p>#curve1 {font-size:150px;}</p> <p>#curve2 {font-size:200px;}</p> </style> <div id="leaf"></div> <div id="curve1">•</div> <div id="curve2">•</div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

加入绝对定位，排好位置。（为了大家看清楚，加了颜色区分）

其他就是耐心了，放上水果和高光。

[Edit on 2004-8-18 16:34:15 By guoshuang]

0 Comments