將HTML特殊轉義為實體字符的兩種實現方式

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

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

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

 

這里提供兩個函數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

// 將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中跑）。