jQuery中用dom操作替代正則表達(dá)式
在B/S結(jié)構(gòu)客戶端越來越“胖”的今天,作為一名全端程序員,您很可能會(huì)在前端操作html字符串,注意,是操作html字符串,不是操作當(dāng)前頁面的html。
舉個(gè)例子,百度推出的在線HTML富文本編輯器Ueditor,可以在線制作富文本文檔,功能堪比精簡(jiǎn)版的Microsoft Word。雖然Ueditor身披百度的光環(huán),但實(shí)際效果不太讓人滿意,我們需要二次處理一下它生成的html字符串,比如把所有圖片的寬度設(shè)成90%。
通過某個(gè)方法,我們可以拿到文本編輯器中的html字符串,假設(shè)字符串如下:
<p>花一樣的騷年</p>
<img src="./saonian.png" alt="騷年自拍" >
<p>迷一樣的金字塔</p>
<img style="height:30px;" src="./jinzita.png" alt="中國金字塔" >
<p>夢(mèng)一樣的人生</p>
<img style="width:50px;height:30px;" src="./rensheng.png" alt="人生百態(tài)" >
但是接下來如何處理呢??jī)?yōu)雅的處理字符串,讓我們很容易想到正則表達(dá)式,這里我們可不可以用正則呢?
答案是肯定的,先試試正則的效果。把所有圖片寬度設(shè)成90%,最簡(jiǎn)單的方法是在img標(biāo)簽中加入style屬性,然后在style中指定寬度。
用正則,第一步,先要匹配到所有img標(biāo)簽,由于img標(biāo)簽不一定有style屬性,要先判斷是否有style屬性,接下來直接在style屬性中加入width: 90%;?不,這樣可能會(huì)覆蓋掉原有的其他屬性,那就直接追加,追加不會(huì)覆蓋!還是不行,萬一原來就有width呢。。。
還沒開始寫正則表達(dá)式,先想想過程,就已經(jīng)很繁瑣了,其實(shí)實(shí)現(xiàn)起來更加復(fù)雜。
幸好我們可以換個(gè)思路,借助于jQuery解決這個(gè)問題。
jQuery強(qiáng)大之處在于,它能直接將一個(gè)html字符串包裝成dom元素,這個(gè)dom元素不存在于當(dāng)前頁面中,它是放在內(nèi)存中的。
通過jQuery,只需要這樣一段代碼即可實(shí)現(xiàn):
//定義容器,方便獲取修改后的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屬性沒有,自動(dòng)添加;如果已經(jīng)有width屬性,直接修改;完全不用過多操心
$(n).css({
width: "90%"
});
});
//獲取修改后的html字符串,即容器的html內(nèi)容
alert($container.html());
代碼中注釋很詳細(xì),小菜就不多解釋啦,我們要明白,jQuery不僅僅可以操作實(shí)實(shí)在在的頁面中的html,也可以操作內(nèi)存中的虛擬html。
通過兩者對(duì)比,相信讀者立即可以體會(huì)到哪個(gè)方法更好一些。
正如小菜經(jīng)常說的一句話:如果你認(rèn)為一個(gè)問題可以解決,但用了很長(zhǎng)時(shí)間仍然沒有解決,很可能是你的思路錯(cuò)了,換個(gè)角度想一想,問題迎刃而解!
- jQuery EasyUI 開源插件套裝 完全替代ExtJS
- 深入理解jQuery中l(wèi)ive與bind方法的區(qū)別
- jQuery中.live()方法的用法深入解析
- 解析jQuery的三種bind/One/Live事件綁定使用方法
- jQuery中bind,live,delegate與one方法的用法及區(qū)別解析
- jquery live()調(diào)用不存在的解決方法
- jQuery的live()方法對(duì)hover事件的處理示例
- jQuery中對(duì)未來的元素綁定事件用bind、live or on
- jQuery 1.9使用$.support替代$.browser的使用方法
- jQuery 1.9移除了$.browser可以使用$.support來替代
- 淺談被jQuery拋棄的函數(shù)及替代函數(shù)
- jQuery中bind(),live(),delegate(),on()綁定事件方法實(shí)例詳解
- jquery ui dialog替代confirm實(shí)例分析
- jQuery1.9+中刪除了live以后的替代方法
相關(guān)文章
JQuery和PHP結(jié)合實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條上傳顯示
本文給大家介紹JQuery和PHP結(jié)合實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條上傳顯示功能,本文分步驟給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2016-11-11利用jQuery操作對(duì)象數(shù)組的實(shí)現(xiàn)代碼
利用jQuery操作對(duì)象數(shù)組的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-04-04jquery網(wǎng)頁加載進(jìn)度條的實(shí)現(xiàn)
本篇文章主要介紹了jquery網(wǎng)頁加載進(jìn)度條的實(shí)現(xiàn) ,在頁面加載的時(shí)候,上方紅色的進(jìn)度條,有興趣的可以了解一下2017-06-06基于jquery點(diǎn)擊自以外任意處,關(guān)閉自身的代碼
主要功能是點(diǎn)擊顯示,然后通過點(diǎn)擊頁面的任意位置都能關(guān)閉顯示效果,主要是$(document).click的作用2012-02-02jQuery實(shí)現(xiàn)表單提交時(shí)判斷的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單提交時(shí)判斷的方法,涉及針對(duì)表單提交時(shí)的判斷方法,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12JQuery 1.6發(fā)布 性能提升,同時(shí)包含大量破壞性變更
JQuery 1.6剛剛發(fā)布了,有幾處性能和跨瀏覽器兼容性的改進(jìn),專門重寫了屬性模塊2011-05-05推薦11款jQuery開發(fā)的復(fù)選框和單選框美化插件
web開發(fā)中所有的輸入控件中復(fù)選框和單選框的樣式是最難去設(shè)計(jì)的,因?yàn)椴煌臑g覽器及其操作系統(tǒng)對(duì)于樣式的渲染展現(xiàn)是不一樣的。2011-08-08