使用正規表達式優化網頁代碼

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