Hi,网页设计师综合门户欢迎您!
设为首页  加为收藏  我要投稿找回密码免责声明意见反馈

招聘精英个人求职推广网站网友作品网页特效动画欣赏网页素材酷站欣赏源码下载设计软件

  • 全站搜索
  • 新闻资讯
  • 网页教程
  • 平面教程
  • 程序设计
  • 视频教程
  • Flash教程

网页设计师提供网页设计、网站程序开发、系统开发等,请联系QQ 103198680

 您当前的位置:首页 > 阅读文章
网页设计师综合门户欢迎您!

将HTML的左右尖括号等转义成实体形式的两种实现方式

刊登方式:转载   来源:网络  作者:  关键词:平面设计理念  更新时间:2017/8/11

   这篇文章主要介绍了将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中跑)。

        :更多精彩文章请关注网页设计师综合门户编程教程栏目。