快捷導(dǎo)航

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

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

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

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

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

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