欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery中用dom操作替代正則表達式

 更新時間:2014年12月29日 15:09:39   投稿:hebedich  
這篇文章主要介紹了jQuery中用dom操作替代正則表達式的方法,需要的朋友可以參考下

在B/S結構客戶端越來越“胖”的今天,作為一名全端程序員,您很可能會在前端操作html字符串,注意,是操作html字符串,不是操作當前頁面的html。

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

         通過某個方法,我們可以拿到文本編輯器中的html字符串,假設字符串如下:

復制代碼 代碼如下:

<p>花一樣的騷年</p>
<img src="./saonian.png" alt="騷年自拍" >
<p>迷一樣的金字塔</p>
<img style="height:30px;" src="./jinzita.png" alt="中國金字塔" >
<p>夢一樣的人生</p>
<img style="width:50px;height:30px;" src="./rensheng.png" alt="人生百態(tài)" >

         但是接下來如何處理呢?優(yōu)雅的處理字符串,讓我們很容易想到正則表達式,這里我們可不可以用正則呢?

         答案是肯定的,先試試正則的效果。把所有圖片寬度設成90%,最簡單的方法是在img標簽中加入style屬性,然后在style中指定寬度。

         用正則,第一步,先要匹配到所有img標簽,由于img標簽不一定有style屬性,要先判斷是否有style屬性,接下來直接在style屬性中加入width: 90%;?不,這樣可能會覆蓋掉原有的其他屬性,那就直接追加,追加不會覆蓋!還是不行,萬一原來就有width呢。。。

         還沒開始寫正則表達式,先想想過程,就已經(jīng)很繁瑣了,其實實現(xiàn)起來更加復雜。

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

         jQuery強大之處在于,它能直接將一個html字符串包裝成dom元素,這個dom元素不存在于當前頁面中,它是放在內(nèi)存中的。

         通過jQuery,只需要這樣一段代碼即可實現(xiàn):

復制代碼 代碼如下:

 //定義容器,方便獲取修改后的html字符串
 //直接用jQuery包裝"<div></div>",此時在內(nèi)存中就有了一個div元素
 var $container = $("<div></div>");
 //假設這是需要修改的html字符串
 var html = "<img style='width: 50%;' src='./test.jpg' >";
 //直接將要修改的html字符串插入到容器中
 //jQuery強大到自動將html字符串包裝成dom元素,然后插入到內(nèi)存中的div容器中
 $container.append(html);
 //在容器中搜索所有的img標簽,并遍歷
 $container.find("img").each(function(i,n){
   //對于每一個img元素,直接修改其style屬性中的width屬性
   //如果style屬性沒有,自動添加;如果已經(jīng)有width屬性,直接修改;完全不用過多操心
   $(n).css({
     width: "90%"
   });
 });
 //獲取修改后的html字符串,即容器的html內(nèi)容
 alert($container.html());

         代碼中注釋很詳細,小菜就不多解釋啦,我們要明白,jQuery不僅僅可以操作實實在在的頁面中的html,也可以操作內(nèi)存中的虛擬html。

         通過兩者對比,相信讀者立即可以體會到哪個方法更好一些。

         正如小菜經(jīng)常說的一句話:如果你認為一個問題可以解決,但用了很長時間仍然沒有解決,很可能是你的思路錯了,換個角度想一想,問題迎刃而解!

相關文章

最新評論