DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 使用正則表達式優化網頁(web頁面)代碼實例及代碼
使用正則表達式優化網頁(web頁面)代碼實例及代碼
編輯:AJAX詳解     
正則表達式最早在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的方法。 應用一:刪除空白標簽 像、這類頁面編輯後遺留的空白標簽是可以清理的,但要注意的是,在一些應用中(如AJax的回顯)可能會用到一些有id屬性的空白標簽。 查找 替換 <(.*)\b.*?>\s*     用這個也可以刪除一些不必要的標簽,只要\s*替換成捕獲組: 查找 替換 <(.*)\b.*?>((?:[^ $2 記得把.*換成你要替換的標簽,另外它無法處理嵌套的標簽。但變更一下,可以處理嵌套帶不同屬性的相同標簽。   應用二:刪除文本中的Html標簽 查找 替換 <(?:.|\s)*?>     應用三:刪除多余的空白 比如把   >替換為 查找 替換 \s{2,} (一個空格) \s{1,}(.|/)> $1>   應用四:標簽合並 比如把abcdefedd替換成abcdefedd 對多層嵌套的結構必須一步步“脫殼”:   查找 替換 (<(.*)\b.*?>)((?:[^<\2]|\s)*?)\1((?:.|\s)*?)((?:.|\s)*?) <$2>$3$4$5 這個方法一次只能合並一個內嵌標簽,要多替換幾次。 最好指定(.*)中.*代表的具體標簽,避免合並了不該合並的標簽。比如b或font,如果要合並帶屬性的標簽,只需要把<(.*)\b.*?>改成<(.|\s)*?>就可以了。   應用五:將具有特定屬性的標簽用CSS引用簡化 假設要把 換成 查找 替換 <(.*)\b(.*)width="20px"((.|s)*)> <$1 $2 class=”style1” $3>   你需要將.*換成要處理的標簽。 舉一反三,我們可以把width=”20px”的td加寬2倍 查找 替換 <(.*)\b(.*)width="20px"((.|s)*)> <$1 $2 width="40px"$3>   應用六:刪除Html注釋 查找 替換       以上是幾個正則表達式在簡化代碼方面的簡單例子,這裡雖然只講如何進行網頁代碼的優化,但實際上正則表達式的作用遠不只如此,只要發揮我們的想象力,正則表達式在文本編輯領域必大有所為。 值得一提的是,在FrontPage的“查找替換”功能中,有個“HTML規則”和“HTML標記”的功能,方便了我們對Html代碼進行編輯,適合對正則表達式不熟悉的人使用。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved