在JavaScript中对HTML进行反转义详解

更新时间：2016年05月18日 16:13:03 投稿：jingxian

下面小编就为大家带来一篇在JavaScript中对HTML进行反转义详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

在JavaScript中对字符串进行转义和反转义操作，常用的方法莫过于使用encodeURI (decodeURI)、encodeURIComponent (decodeURIComponent)这几个方法，具体使用方法和区别。

但是如何在JavaScript中对HTML进行反转义操作呢？例如下面这段代码：

var jsonData = {
  title: "<%= data.name? data.name : title %>",
  desc: "<%= data.content? data.content : '' %>",
  image: "<%- data.img? data.img : '' %>"
};

其中<%= %>包起来的部分是从服务端返回的值（上例中的代码取自Node.js中Express的ejs模板的代码）。如果从服务端返回的字符串中包含有引号，例如单引号或者双引号，那上述这段JS代码在浏览器中解释的时候会出现错误。如何解决这个问题呢？

其基本思路是通过页面上DOM元素的innerHTML属性将字符串进行HTML反转义，然后将值返回给JavaScript的变量。看下面两段代码：

1. 原生JavaScript写法：

function htmlDecode(input){
 var e = document.createElement('div');
 e.innerHTML = input;
 return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

htmlDecode("&lt;img src='myimage.jpg'&gt;");

2. JQuery写法：

function htmlDecode(value){ 
 return $('<div/>').html(value).text(); 
}

第一个函数使用原生的JavaScript方法创建一个DIV元素，然后将需要反转义的字符串赋值给它的innerHTML属性，最后返回DIV元素的nodeValue属性的值。第二个函数则使用JQuery的方法，其基本原理和第一个函数相同。由于DIV元素都只是在内存中创建，并未append或inert到页面上，所以不会对现有的页面产生任何影响。

最后，我们将一开始的那段代码改成下面的这种方式：

var jsonData = {
  title: $('<div/>').html("<%= data.name? data.name : title %>").text(),
  desc: $('<div/>').html("<%= data.nontent? data.nontent : '' %>").text(),
  image: "<%- data.img? data.img : '' %>"
};

这样便可以在JavaScript中对服务器端返回的字符串进行HTML反转义操作了。

以上这篇在JavaScript中对HTML进行反转义详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js实现图片区域可点击大小随意改变(适用移动端)代码实例
这篇文章主要介绍了js实现图片区域可点击大小随意改变(适用移动端)代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
js实现星星打分效果的方法
这篇文章主要介绍了js实现星星打分效果的方法，涉及javascript操作页面元素与样式的技巧，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-04-04
Angular Js文件上传之form-data
angular-file-upload 是一个基于HTML5技术的文件上传轻量级 AngularJS指令（directive），当浏览器不支持时转为采用 FileAPI polyfill技术实现(基于Flash)。本文主要给大家介绍Angular Js文件上传之form-data，需要的朋友可以参考下
2015-08-08
Javascript----文件操作
Javascript----文件操作...
2007-01-01
javascript实现des解密加密全过程
这篇文章主要介绍了javascript 实现des解密加密的过程,需要的朋友可以参考下
2014-04-04
将string解析为json的几种方式小结
将string解析为json的几种方式小结,需要的朋友可以参考下。
2010-11-11
原生js提示框并自动关闭(手工关闭)
今天在写后台交互的时候原来都是用alert太难看每次都需要点击一下才可以，比较麻烦所以特整理了几个比较好的js提示框代码，方便提示一下
2023-04-04
JS实现支持Ajax验证的表单插件
这篇文章主要为大家详细介绍了JS实现支持Ajax验证的表单插件，感兴趣的小伙伴们可以参考一下
2016-03-03
javascript实现鼠标点击生成文字特效
这篇文章主要为大家详细介绍了javascript实现鼠标点击生成文字特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
深入浅析Bootstrap列表组组件
列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。本文给大家介绍Bootstrap列表组组件，感兴趣的朋友一起学习吧
2016-05-05