將HTML的左右尖括號等轉義成實體形式的兩種實作方式_javascript技巧

前端開發工作中，常需要將HTML的左右尖括號等轉義成實體形式。我們不能把，&等直接顯示在最終看到的網頁裡。需要將其轉義後才能在網頁上顯示。

轉義字元（Escape Sequence）也稱為字元實體(Character Entity)。定義轉義字串的主要原因是

「」等符號已經用來表示HTML TAG，因此不能直接當作文字中的符號來使用。但有時需求是在HTML頁面上使用這些符號，所以需要定義它的轉義字串。
有些字元在ASCII字元集中沒有定義（如版權符號“©”）。因此需要使用轉義字元（“©”對應的轉義字元是“©”）來表示。

這裡提供兩個函數escape和unescape，分別實作將HTML轉義為實體和迴轉。

方式一、一個映射表正則替換

複製代碼 代碼如下:

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轉義為實體
function escape(html) {
if (typeof html !== 'string') return ''
return html.replace(entityReg.escape, function(match) {
return entityMap.escape[match]
})
}
// 將實體轉回為HTML
function unescape(str) {
if (typeof str !== 'string') return ''
return str.replace(entityReg.unescape, function (match) {
return entityMap.unescape[match]
})
}

方式二、利用瀏覽器DOM API

方式二、利用瀏覽器DOM API 複製程式碼

程式碼如下:


// 將HTML轉義為實體
function escape(html){
var elem = document.createElement('div')
var txt = document.createTextNode(html)
elem.appendChild(txt)
return elem.innerHTML;
}
/// 將實體轉接回為HTML
function unescape(str) {
var elem = document.createElement('div')
elem.innerHTML = str

return elem.innerText || elem.textContent>}


有個缺陷是只能轉義“ & ”，對於單引號，雙引號都不會轉義。另外一些非ASCII也不能轉義。選擇時須注意。

比較：

方式1 程式碼量較大，但彈性，完整性都比方式2強。可依需求新增或減少映射表entityMap，且可運行在任意JS環境中。 方式2 為hack方式，程式碼量少很多，利用瀏覽器內部API就行了轉義和轉回（主流瀏覽器都支援）。不具完整性，很明顯只能在瀏覽器環境中使用（例如不能在Node.js中跑）。