快捷導(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)方式,需要的朋友可以參考下

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

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

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

這里提供兩個(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中跑）。

相關(guān)文章

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

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

2010-06-06