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


Posted in Javascript onMay 18, 2016

在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("<img src='myimage.jpg'>");

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进行反转义详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
angular.js实现列表orderby排序的方法
Oct 02 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 Javascript
深入理解JavaScript中的浮点数
May 18 #Javascript
Node.js返回JSONP详解
May 18 #Javascript
noty ? jQuery通知插件全面解析
May 18 #Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 #Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 #Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 #Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 #Javascript
You might like
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
JavaScript 参考教程
2006/12/29 Javascript
javascript 函数调用规则
2009/08/26 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
python写的一个文本编辑器
2014/01/23 Python
ptyhon实现sitemap生成示例
2014/03/30 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
python实现简单学生信息管理系统
2020/04/09 Python
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
Servlet的生命周期
2013/08/25 面试题
工商管理实习自我鉴定
2013/09/28 职场文书
高校自主招生自荐信
2013/12/09 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
任命书标准格式
2015/03/02 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
单位工资证明范本
2015/06/12 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android