快捷導(dǎo)航

JavaScript 替換Html標簽實現(xiàn)代碼

更新時間：2009年10月14日 15:12:22 作者：

這種技術(shù)被廣泛應(yīng)用于表單驗證，語法高亮和危險字符過濾中。一段話如果很長，如果不想像下面那樣替換，我們得想些辦法了。

 
str = str.<br /> 
replace( /&amp;(?!#?\w+;)/g , '&amp;').<br /> 
replace( /undefinedundefined([^undefinedundefined]*)&quot;/g , '“$1”' ).<br /> 
replace( /&lt;/g , '&lt;' ).<br /> 
replace( /&gt;/g , '&gt;' ).<br /> 
replace( /…/g , '…' ).<br /> 
replace( /“/g , '“' ).<br /> 
replace( /”/g , '”' ).<br /> 
replace( /‘/g , '‘' ).<br /> 
replace( /'/g , ''' ).<br /> 
replace( /—/g , '—' ).<br /> 
replace( /–/g , '–' ); 

上面這個還算短了，我看過一些論壇的JS代碼，在把Wind Code轉(zhuǎn)換成HTML時，那真是瘋子似的寫上二三十行。其實我們大可以把這些匹配模式與替換后的字符放到一個哈希中，然后一口氣替換掉。

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

 
var hash = { 
'<' : '<' , 
'>' : '>', 
'…' : '…', 
'“' : '“' , 
'”' : '”' , 
'‘' : '‘' , 
''' : ''' , 
'—' : '—', 
'–' : '–' 
}; 
str = str. 
replace( /&(?!#?\w+;)/g , '&' ). 
replace( /undefinedundefined([^undefinedundefined]*)"/g , '“$1”' ). 
replace( /[<>…“”‘'—–]/g , function ( $0 ) { 
return hash[ $0 ]; 
}); 

但這個缺陷也很明顯，如哈希的鍵必須是簡單的普通字符串，不能是復(fù)雜正則，這就是我們不得不分開的原因。replace在老一點的瀏覽器是不支持function的。為此，我們只好放棄上面最后那個replace方式，替換方統(tǒng)一為普通字符串。

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

 
String.prototype.multiReplace = function ( hash ) { 
var str = this, key; 
for ( key in hash ) { 
if ( Object.prototype.hasOwnProperty.call( hash, key ) ) { 
str = str.replace( new RegExp( key, 'g' ), hash[ key ] ); 
} 
} 
return str; 
}; 

Object.prototype.hasOwnProperty.call( hash, key )是用來過濾繼承自原型的方法與屬性的。這樣一來，使用就簡單了：

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

 
str = str.multiReplace({ 
'&(?!#?\\w+;)' :'&', 
'undefinedundefined([^undefinedundefined]*)" : '“$1”', 
'<' : '<' , 
'>' : '>', 
'…' : '…', 
'“' : '“' , 
'”' : '”' , 
'‘' : '‘' , 
''' : ''' , 
'—' : '—', 
'–' : '–' 
}); 

您可能感興趣的文章:

Html
標簽

相關(guān)文章

35個JS中實用工具函數(shù)的代碼分享
身為后臺開發(fā)的各位鐵鐵，實際開發(fā)不管是公司要求或是自身發(fā)展，學(xué)前端已經(jīng)是我們內(nèi)卷路上必定碰到的，那今天小編就給大家總結(jié)下那些我們工作中可能遇到的一些實用Js函數(shù)
2022-06-06
基于Proxy的小程序狀態(tài)管理實現(xiàn)
這篇文章主要介紹了基于Proxy的小程序狀態(tài)管理實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-06-06
讓你更好使用Typescript的11個技巧分享
學(xué)習(xí)Typescript通常是一個重新發(fā)現(xiàn)的過程。本文將總結(jié)幾個技巧，幫助你充分發(fā)揮語言的潛力，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-01-01
JS中的.length屬性和.size()方法的區(qū)別
length是js原生屬性,size()是jQuery方法,如果你只是想獲取元素的個數(shù),兩者效果一樣既.length和.size()獲取的值是一樣的
2024-08-08
善用事件代理，警惕閉包的性能陷阱。
關(guān)于JS性能優(yōu)化中的冰山一角：事件代理、警惕閉包。其實本文有一個文章已經(jīng)說到，閉包如何產(chǎn)生，閉包的作用；
2011-01-01
使用js驗證hash,content hash , chunk hash的區(qū)別解
crypto-js是一個JavaScript加密算法庫,用于實現(xiàn)各種加密算法和哈希函數(shù),它提供了一種簡單而強大的方式來執(zhí)行加密操作,包括對稱加密算法、非對稱加密算法和哈希函數(shù)等,本文給大家介紹使用js驗證hash,content hash , chunk hash的區(qū)別解析,感興趣的朋友跟隨小編一起看看吧
2024-12-12
基于javascript代碼實現(xiàn)通過點擊圖片顯示原圖片
這篇文章主要介紹了基于javascript代碼實現(xiàn)通過點擊圖片顯示原圖片的相關(guān)資料,需要的朋友可以參考下
2015-11-11
javascript圖片預(yù)覽和上傳（兼容IE）
這篇文章主要為大家詳細介紹了javascript圖片預(yù)覽和上傳的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
基于javascript bootstrap實現(xiàn)生日日期聯(lián)動選擇
這篇文章主要介紹了基于javascript bootstrap實現(xiàn)生日日期聯(lián)動選擇的相關(guān)資料,需要的朋友可以參考下
2016-04-04
如何使用JS中的webWorker
作為瀏覽器腳本語言，如果JavaScript不是單線程，那么就有點棘手了。比如，與用戶交互或者對DOM進行操作時，在一個線程上修改某個DOM，另外的線程刪除DOM，這時瀏覽器該如何抉擇呢?
2021-05-05