使用正則表達式優化網頁代碼
正 則表達式最早在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代碼進行編輯，適合對正則表達式不熟悉的人使用。