在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 相关文章推荐
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
jQuery使用方法
Feb 04 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
深入理解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 中文和编码判断代码
2010/05/16 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
PHP链表操作简单示例
2016/10/15 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
JS实现图片切换特效
2019/12/23 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
Python获取系统默认字符编码的方法
2015/06/04 Python
Python list操作用法总结
2015/11/10 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python和opencv实现抠图
2018/07/18 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
python/golang 删除链表中的元素
2020/09/14 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
认购协议书范本
2014/04/22 职场文书
个人党性分析材料
2014/12/19 职场文书
单位租车协议书
2015/01/29 职场文书
银行自荐信范文
2015/03/25 职场文书
中学教代会开幕词
2016/03/04 职场文书