在B/S結構客戶端越來越“胖”的今天，作為一名全端程式員，您很可能會在前端操作html字元串，註意，是操作html字元串，不是操作當前頁面的html。 舉個例子，百度推出的線上HTML富文本編輯器Ueditor，可以線上製作富文本文檔，功能堪比精簡版的Microsoft Word。雖然Ueditor ...
在B/S結構客戶端越來越“胖”的今天，作為一名全端程式員，您很可能會在前端操作html字元串，註意，是操作html字元串，不是操作當前頁面的html。
舉個例子，百度推出的線上HTML富文本編輯器Ueditor，可以線上製作富文本文檔，功能堪比精簡版的Microsoft Word。雖然Ueditor身披百度的光環，但實際效果不太讓人滿意，我們需要二次處理一下它生成的html字元串，比如把所有圖片的寬度設成90%。
通過某個方法，我們可以拿到文本編輯器中的html字元串，假設字元串如下：
1 <p>花一樣的騷年</p> 2 <img src="./saonian.png" alt="騷年自拍" > 3 <p>迷一樣的金字塔</p> 4 <img style="height:30px;" src="./jinzita.png" alt="中國金字塔" > 5 <p>夢一樣的人生</p> 6 <img style="width:50px;height:30px;" src="./rensheng.png" alt="人生百態" >
但是接下來如何處理呢？優雅的處理字元串，讓我們很容易想到正則表達式，這裡我們可不可以用正則呢？
答案是肯定的，先試試正則的效果。把所有圖片寬度設成90%，最簡單的方法是在img標簽中加入style屬性，然後在style中指定寬度。
用正則，第一步，先要匹配到所有img標簽，由於img標簽不一定有style屬性，要先判斷是否有style屬性，接下來直接在style屬性中加入width: 90%;？不，這樣可能會覆蓋掉原有的其他屬性，那就直接追加，追加不會覆蓋！還是不行，萬一原來就有width呢。。。
還沒開始寫正則表達式，先想想過程，就已經很繁瑣了，其實實現起來更加複雜。
幸好我們可以換個思路，藉助於jQuery解決這個問題。
jQuery強大之處在於，它能直接將一個html字元串包裝成dom元素，這個dom元素不存在於當前頁面中，它是放在記憶體中的。
通過jQuery，只需要這樣一段代碼即可實現：
1 //定義容器，方便獲取修改後的html字元串 2 //直接用jQuery包裝"<div></div>"，此時在記憶體中就有了一個div元素 3 var $container = $("<div></div>"); 4 //假設這是需要修改的html字元串 5 var html = "<img style='width: 50%;' src='./test.jpg' >"; 6 //直接將要修改的html字元串插入到容器中 7 //jQuery強大到自動將html字元串包裝成dom元素，然後插入到記憶體中的div容器中 8 $container.append(html); 9 //在容器中搜索所有的img標簽，並遍歷 10 $container.find("img").each(function(i,n){ 11 //對於每一個img元素，直接修改其style屬性中的width屬性 12 //如果style屬性沒有，自動添加；如果已經有width屬性，直接修改；完全不用過多操心 13 $(n).css({ 14 width: "90%" 15 }); 16 }); 17 //獲取修改後的html字元串，即容器的html內容 18 alert($container.html());
代碼中註釋很詳細，小菜就不多解釋啦，我們要明白，jQuery不僅僅可以操作實實在在的頁面中的html，也可以操作記憶體中的虛擬html。
通過兩者對比，相信讀者立即可以體會到哪個方法更好一些。
正如小菜經常說的一句話：如果你認為一個問題可以解決，但用了很長時間仍然沒有解決，很可能是你的思路錯了，換個角度想一想，問題迎刃而解！
