在JavaScript中对HTML进行反转义
JavaScriptHTML 进行 转义
2023-09-27 14:23:13 时间
在JavaScript中对字符串进行转义和反转义操作,常用的方法莫过于使用encodeURI (decodeURI)、encodeURIComponent (decodeURIComponent)这几个方法,具体使用方法和区别可以参考这篇文章http://qianduanblog.com/post/js-learning-34-en-decodeuri-en-decodeuricomponent-un-escape-btoa-atob.html
但是如何在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 的 null 和 undefined 判断
- javascript循环渲染HTML模板,非侵入式
- 使用JavaScript修改浏览器URL地址栏的实现代码
- SharePoint 2013 JavaScript API 记录
- JavaScript依赖注入的实现思路
- 【JavaScript】对象继承
- 用Javascript(js)进行HTML转义工具(处理特殊字符显示)
- 扩展javascript原生对象-prototype原型链彻底掌握
- 使用 JavaScript 的 HTML 页面混合、JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出“点击我进入到百度首页”的超链接
- 使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;
- 使用JavaScript控制HTML元素的显示和隐藏
- JavaScript 基础(四) - HTML DOM Event
- JavaScript 在HTML中的加载顺序
- javascript 拖拽事件
- 用javascript修改html元素的class
- javascript怎么禁用浏览器后退按钮
- JavaScript对象之get/set方法
- Javascript 模块化指北
- 【JavaScript】js展开运算符(...)你真的了解吗?
- 第一篇 对Javascript中原型的深入理解
- Web Atoms Crack,JavaScript 桥接器
- HTML-JavaScript--单击按钮改变背景颜色
- javascript 总结(常用工具类的封装)
- 19 个 JavaScript 有用的简写技术
- 「前端练习场」原生 JavaScript 手写各种 数组 API
- 【HTML、JAVASCRIPT、CSS】3、Javascript基本概念