在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之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
JavaScript中的Function函数
Aug 27 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
numpy中索引和切片详解
2017/12/15 Python
python邮件发送smtplib使用详解
2020/06/16 Python
基于Python函数和变量名解析
2019/07/19 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
法人代表任命书范本
2014/06/05 职场文书
公务员个人总结
2015/02/12 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
利用Redis实现点赞功能的示例代码
2022/06/28 Redis