快捷導(dǎo)航

jQuery中用dom操作替代正則表達(dá)式

更新時(shí)間：2014年12月29日 15:09:39 投稿：hebedich

這篇文章主要介紹了jQuery中用dom操作替代正則表達(dá)式的方法,需要的朋友可以參考下

在B/S結(jié)構(gòu)客戶端越來(lái)越“胖”的今天，作為一名全端程序員，您很可能會(huì)在前端操作html字符串，注意，是操作html字符串，不是操作當(dāng)前頁(yè)面的html。

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

通過(guò)某個(gè)方法，我們可以拿到文本編輯器中的html字符串，假設(shè)字符串如下：

復(fù)制代碼代碼如下:

<p>花一樣的騷年</p>

<img src="./saonian.png" alt="騷年自拍" >

<p>迷一樣的金字塔</p>

<img style="height:30px;" src="./jinzita.png" alt="中國(guó)金字塔" >

<p>夢(mèng)一樣的人生</p>

<img style="width:50px;height:30px;" src="./rensheng.png" alt="人生百態(tài)" >

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

答案是肯定的，先試試正則的效果。把所有圖片寬度設(shè)成90%，最簡(jiǎn)單的方法是在img標(biāo)簽中加入style屬性，然后在style中指定寬度。

用正則，第一步，先要匹配到所有img標(biāo)簽，由于img標(biāo)簽不一定有style屬性，要先判斷是否有style屬性，接下來(lái)直接在style屬性中加入width: 90%;？不，這樣可能會(huì)覆蓋掉原有的其他屬性，那就直接追加，追加不會(huì)覆蓋！還是不行，萬(wàn)一原來(lái)就有width呢。。。

還沒(méi)開(kāi)始寫(xiě)正則表達(dá)式，先想想過(guò)程，就已經(jīng)很繁瑣了，其實(shí)實(shí)現(xiàn)起來(lái)更加復(fù)雜。

幸好我們可以換個(gè)思路，借助于jQuery解決這個(gè)問(wèn)題。

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

通過(guò)jQuery，只需要這樣一段代碼即可實(shí)現(xiàn)：

復(fù)制代碼代碼如下:

 //定義容器，方便獲取修改后的html字符串

 //直接用jQuery包裝"<div></div>"，此時(shí)在內(nèi)存中就有了一個(gè)div元素

 var $container = $("<div></div>");

 //假設(shè)這是需要修改的html字符串

 var html = "<img style='width: 50%;' src='./test.jpg' >";

 //直接將要修改的html字符串插入到容器中

 //jQuery強(qiáng)大到自動(dòng)將html字符串包裝成dom元素，然后插入到內(nèi)存中的div容器中

 $container.append(html);

 //在容器中搜索所有的img標(biāo)簽，并遍歷

 $container.find("img").each(function(i,n){

   //對(duì)于每一個(gè)img元素，直接修改其style屬性中的width屬性

   //如果style屬性沒(méi)有，自動(dòng)添加；如果已經(jīng)有width屬性，直接修改；完全不用過(guò)多操心

   $(n).css({

     width: "90%"

   });

 });

 //獲取修改后的html字符串，即容器的html內(nèi)容

 alert($container.html());