萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 將HTML的左右尖括號等轉義成實體形式的兩種實現方式

將HTML的左右尖括號等轉義成實體形式的兩種實現方式

   這篇文章主要介紹了將HTML的左右尖括號等轉義成實體形式的兩種實現方式,需要的朋友可以參考下

  前端開發工作中,經常需要將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

  代碼如下:

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

        :更多精彩文章請關注三聯編程教程欄目。

copyright © 萬盛學電腦網 all rights reserved