將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)義字符串。
有些字符在ASCII字符集中沒(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è)映射表+正則替換
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
// 將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中跑）。
轉(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)義字符串。
有些字符在ASCII字符集中沒(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組件的擴(kuò)展和封裝，我們來(lái)感受下JQuery為我們提供$.Extend的神奇，接下來(lái)通過(guò)本文給大家分享JS組件系列之JS組件封裝過(guò)程詳解，需要的朋友參考下吧2017-04-04
對(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
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)換實(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 
本文給大家分享的是使用php結(jié)合js實(shí)現(xiàn)異步拖拽上傳文件的代碼，及示例，有需要的小伙伴可以參考下。
2015-06-06 
js 定時(shí)器setTimeout無(wú)法調(diào)用局部變量的解決辦法
javascript中定時(shí)器setTimeout無(wú)法調(diào)用局部變量，只需要將setTimeout的第一個(gè)參數(shù)改成函數(shù)對(duì)象，而不是字符串，就可以了
2013-11-11