使用正则表达式优化网页代码

 正则表达式最早在perl语言中出现，在此之前为了测试字符串中是否存在某个字符，不得不使用如ChatAt()、indexOf()等函数对字符串循环校验。一旦验证的条件复杂起来（比如身份证校验）实现就变得相当繁杂和艰巨。为此人们就发明了正则语法，使用一个特殊的字符串作为模板，对输入的字符流进行匹配，这跟电子厂的PCB板检测原理很相似。正则表达式在不同工具中实现方式虽然有点不同，但表达语法相同，一般都遵循了ECMPScript 的RegExp类语法标准，具体可以查看，《ECMAScript Language Specification》中有关RegExp的描述，如果想深入了解正则表达式，http://www.regular-expressions.info/是个不错的网站。

       网页代码优化的最主要工作的就是对页面源代码的简化。对于用网页工具或其他转换工具（比如Word—>Html）制作的网页，简化与未简化的网页大小相差往往在一倍以上。别小看简化的作用，对于目前的互联网带宽来说，将50kb的页面缩小成20kb可能感觉不到浏览速度的提升，但对小型手持设备如手机、PDA来说，这是非常致命的，不仅是带宽的问题，页面代码越多，浏览器解析与导航（定位）的速度就越慢，消耗的内存也越厉害。网页代码的精简程度是衡量网页设计人员水平高低的一个重要标准。

闲话说了这么多，现在进入正题。代码简化工作是通过对文本进行“查找替换”实现的。普通的全字符串匹配的查找替换可以帮我们完成大部分的代码简化功能，对于有条件的简化，必须使用正则表达式进行处理。基本上带有文本编辑功能的编辑器（比windows写字板高级点的）都带有支持正则表达式的“查找替换”功能。由于是对网页代码进行优化，因此我们还是使用专门的DreamWeaver或FrontPage进行操作。这两个工具都带有html代码优化功能，但基本上都不能满足我们的要求。而且优化的功能都可以通过使用正则表达式进行实现。FrontPage正则表达式的很多标记跟标准的不同(真不明白ms为什么老是要自己搞另外一套-_-!!），这里我只介绍适合DreamWeaver的方法。

应用一：删除空白标签

像<span></span>、<b></b>这类页面编辑后遗留的空白标签是可以清理的，但要注意的是，在一些应用中（如ajax的回显）可能会用到一些有id属性的空白标签。

查找	替换
<(.*)\b.*?>\s*</\1>

 

用这个也可以删除一些不必要的标签,只要\s*替换成捕获组：

查找	替换
<(.*)\b.*?>((?:[^</\1]|\s)*)</\1>	$2

记得把.*换成你要替换的标签，另外它无法处理嵌套的标签。但变更一下，可以处理嵌套带不同属性的相同标签。

 

应用二：删除文本中的html标签

查找	替换
<(?:.|\s)*?>

 

应用三：删除多余的空白

比如把<div id=””   >替换为<div id=””>

查找	替换
\s{2,}	（一个空格）
\s{1,}(.|/)>	$1>

 

应用四：标签合并

比如把<b><b>abc</b>defedd</b>替换成<b>abcdefedd</b>

对多层嵌套的结构必须一步步“脱壳”：

 

查找	替换
(<(.*)\b.*?>)((?:[^<\2]|\s)*?)\1((?:.|\s)*?)</\2>((?:.|\s)*?)</\2>	<$2>$3$4$5</$2>

这个方法一次只能合并一个内嵌标签，要多替换几次。

最好指定(.*)中.*代表的具体标签，避免合并了不该合并的标签。比如b或font,如果要合并带属性的标签，只需要把<(.*)\b.*?>改成<(.|\s)*?>就可以了。

 

应用五：将具有特定属性的标签用css引用简化

假设要把

<td bgcolor=”#FFFFFF” width=”20px”>换成

<td bgcolor=”#FFFFFF” class=”style1”>

查找	替换
<(.*)\b(.*)width="20px"((.|s)*)>	<$1 $2 class=”style1” $3>

 

你需要将.*换成要处理的标签。

举一反三，我们可以把width=”20px”的td加宽2倍

查找	替换
<(.*)\b(.*)width="20px"((.|s)*)>	<$1 $2 width="40px"$3>

 

应用六：删除html注释

查找	替换
<!(.|\s)*?>
<!--(.|\s)*?-->

 

以上是几个正则表达式在简化代码方面的简单例子，这里虽然只讲如何进行网页代码的优化，但实际上正则表达式的作用远不只如此，只要发挥我们的想象力，正则表达式在文本编辑领域必大有所为。

值得一提的是，在FrontPage的“查找替换”功能中，有个“HTML规则”和“HTML标记”的功能，方便了我们对html代码进行编辑，适合对正则表达式不熟悉的人使用。