快捷導(dǎo)航

將HTML的左右尖括號等轉(zhuǎn)義成實(shí)體形式的兩種實(shí)現(xiàn)方式

更新時(shí)間：2014年05月04日 10:29:12 作者：

這篇文章主要介紹了將HTML的左右尖括號等轉(zhuǎn)義成實(shí)體形式的兩種實(shí)現(xiàn)方式,需要的朋友可以參考下

前端開發(fā)工作中，經(jīng)常需要將HTML的左右尖括號等轉(zhuǎn)義成實(shí)體形式。我們不能把<，>，&等直接顯示在最終看到的網(wǎng)頁里。需要將其轉(zhuǎn)義后才能在網(wǎng)頁上顯示。

轉(zhuǎn)義字符（Escape Sequence）也稱字符實(shí)體(Character Entity)。定義轉(zhuǎn)義字符串的主要原因是

“<”和“>”等符號已經(jīng)用來表示HTML TAG，因此不能直接當(dāng)作文本中的符號來使用。但有時(shí)需求是在HTML頁面上使用這些符號，所以需要定義它的轉(zhuǎn)義字符串。
有些字符在ASCII字符集中沒有定義（如版權(quán)符號“©”）。因此需要使用轉(zhuǎn)義字符（“©”對應(yīng)的轉(zhuǎn)義字符是“©”）來表示。

這里提供兩個(gè)函數(shù)escape和unescape，分別實(shí)現(xiàn)將HTML轉(zhuǎn)義為實(shí)體和回轉(zhuǎn)。

方式一、一個(gè)映射表+正則替換

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

 
var keys = Object.keys || function(obj) { 
obj = Object(obj) 
var arr = [] 
for (var a in obj) arr.push(a) 
return arr 
} 
var invert = function(obj) { 
obj = Object(obj) 
var result = {} 
for (var a in obj) result[obj[a]] = a 
return result 
} 
var entityMap = { 
escape: { 
'&': '&', 
'<': '<', 
'>': '>', 
'"': '"', 
"'": ''' 
} 
} 
entityMap.unescape = invert(entityMap.escape) 
var entityReg = { 
escape: RegExp('[' + keys(entityMap.escape).join('') + ']', 'g'), 
unescape: RegExp('(' + keys(entityMap.unescape).join('|') + ')', 'g') 
} 

// 將HTML轉(zhuǎn)義為實(shí)體 
function escape(html) { 
if (typeof html !== 'string') return '' 
return html.replace(entityReg.escape, function(match) { 
return entityMap.escape[match] 
}) 
} 
// 將實(shí)體轉(zhuǎn)回為HTML 
function unescape(str) { 
if (typeof str !== 'string') return '' 
return str.replace(entityReg.unescape, function(match) { 
return entityMap.unescape[match] 
}) 
} 

方式二、利用瀏覽器DOM API

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

 
// 將HTML轉(zhuǎn)義為實(shí)體 
function escape(html){ 
var elem = document.createElement('div') 
var txt = document.createTextNode(html) 
elem.appendChild(txt) 
return elem.innerHTML; 
} 
// 將實(shí)體轉(zhuǎn)回為HTML 
function unescape(str) { 
var elem = document.createElement('div') 
elem.innerHTML = str 
return elem.innerText || elem.textContent 
} 

有個(gè)缺陷是只能轉(zhuǎn)義“< > & ”，對于單引號，雙引號都不轉(zhuǎn)義。另外一些非ASCII也不能轉(zhuǎn)義。選擇時(shí)須注意。

比較：

方式1 代碼量較大，但靈活性，完整性都比方式2強(qiáng)。可根據(jù)需求添加或減少映射表entityMap，且可以運(yùn)行在任意JS環(huán)境中。

方式2 為hack方式，代碼量少很多，利用瀏覽器內(nèi)部API就行了轉(zhuǎn)義和轉(zhuǎn)回（主流瀏覽器都支持）。不具完整性，很明顯只能在瀏覽器環(huán)境中使用（比如不能在Node.js中跑）。

相關(guān)文章

JS URL傳中文參數(shù)引發(fā)的亂碼問題
今天的項(xiàng)目中碰到了一個(gè)亂碼問題，從JS里傳URL到服務(wù)器，URL中有中文參數(shù)，服務(wù)器里讀出的中文參數(shù)來的全是“？”，查了網(wǎng)上JS編碼相關(guān)資料得以解決。
2009-09-09
JS組件系列之JS組件封裝過程詳解
JS組件的擴(kuò)展和封裝，我們來感受下JQuery為我們提供$.Extend的神奇，接下來通過本文給大家分享JS組件系列之JS組件封裝過程詳解，需要的朋友參考下吧
2017-04-04
JS 面向?qū)ο笾衿娴膒rototype
對于初學(xué) JavaScript 的人來說 prototype 是一種很神奇的特性，而事實(shí)上，prototype 對于 JavaScript 的意義重大，prototype 不僅僅是一種管理對象繼承的機(jī)制，更是一種出色的設(shè)計(jì)思想。
2011-02-02
javascript window.open打開新窗口后無法再次打開該窗口問題的解決方法
這篇文章主要介紹了javascript window.open打開新窗口后無法再次打開該窗口問題的解決方法即無法再次打開窗口、第二次打開不了,需要的朋友可以參考下
2014-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript仿京東搜索框?qū)嵗?，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03

Javascript調(diào)用函數(shù)方法的幾種方式介紹

這篇文章主要介紹了Javascript調(diào)用函數(shù)方法的幾種方式介紹,本文講解了func()、(function(arg){})(window)、func.bind(sth)()、func.call()、func.apply()等5種方式,需要的朋友可以參考下

2015-03-03

JS 數(shù)字轉(zhuǎn)換研究總結(jié)

這篇文章主要介紹了JS 數(shù)字轉(zhuǎn)換實(shí)現(xiàn)方法，需要的朋友可以參考下

2013-12-12

Javascript創(chuàng)建Silverlight Plugin以及自定義nonSilverlight和lowSilverl

我們在使用Visual Studio IDE創(chuàng)建Silverlight工程時(shí)，默認(rèn)情況下都會自動(dòng)生成一個(gè)用于調(diào)試和預(yù)覽Silverlight的Web工程，該工程包含了html和aspx頁面，以及Silverlight.js腳本文件。

2010-06-06