jQuery中以dom運算取代正規表示式_jquery

在B/S結構客戶端越來越「胖」的今天，作為一名全棧程式設計師，您很可能會在前端操作html字串，注意，是操作html字串，不是操作當前頁面的html。

         舉個例子，百度推出的線上HTML富文本編輯器Ueditor，可線上製作富文本文檔，功能可堪比精簡版的Microsoft Word。雖然Ueditor身披百度的光環，但實際效果不太讓人滿意，我們需要二次處理一下它產生的html字串，例如把所有圖片的寬度設成90%。

         透過某方法，我們可以拿到文字編輯器中的html字串，假設字串如下：

複製程式碼 程式碼如下:

花一樣的騷年

迷一樣的金字塔

夢一樣的人生

         但又該如何處理呢？優雅的處理字串，讓我們很容易想到正規表示式，這裡我們可不可以用正規表示呢？

         答案是肯定的，並先試試正規的效果。把所有圖片寬度設為90%，最簡單的方法是在img標籤中加入style屬性，然後在style中指定寬度。

         以正規則，且第一步，先配對到所有img標籤，由於img標籤不一定有style屬性，要先判斷是否有style屬性，接下來直接在style屬性中加入width: 90%;？不，這樣可能會覆蓋掉原有的其他屬性，那就直接追加，追加不會覆蓋！還是不行，萬一原來就有width。 。 。

         還沒開始寫正規表示式，並先想想過程，就已經很繁瑣了，其實實作更加複雜。

         幸好我們可以換個思路，借助於jQuery解決這個問題。

         jQuery強大之處在於，它能直接將一個html字串包裝成dom元素，這個dom元素不存在於當前頁面中，它是放在記憶體中的。

         透過jQuery，只需要這樣一段程式碼即可實現：

複製程式碼 程式碼如下:

 //定義容器，方便取得修改後的html字串
 //直接用jQuery包裝"

"，此時在記憶體中就有了一個div元素
 var $container = $("

");
 //假設這是需要修改的html字串
 var html = "";
 //直接將要修改的html字串插入到容器中
 //jQuery強大到自動將html字串包裝成dom元素，然後插入到記憶體中的div容器中
 $container.append(html);
 //在容器中搜尋所有的img標籤，並遍歷
 $container.find("img").each(function(i,n){
   //對於每一個img元素，直接修改其style屬性中的width屬性
   //如果style屬性沒有，自動加入；如果已經有width屬性，直接修改；完全不用太多操心
   $(n).css({
     width: "90%"
   });
 });
 //取得修改後的html字串，即容器的html內容
 alert($container.html());

         程式碼中註解很詳細，小菜就不多解釋啦，我們要明白，jQuery不只可以操作實實在在的頁面中的html，也可以操作記憶體中的虛擬html。

         透過兩者對比，並相信讀者立即體會到哪個方法比較好。

         正如小菜常說的一句話：如果你認為一個問題可以解決，但用了很長時間仍然沒有解決，很可能是你的思路錯了，換個角度想一想，問題迎刃而解！