在JavaScript中对HTML进行反转义详解
作者:jingxian 发布时间:2024-05-02 16:21:19
标签: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("<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反转义操作了。
0
投稿
猜你喜欢
- 前言报错如下:Could not open JDBC Connection for transaction; nested exceptio
- 本文实例讲述了PHP操作MySQL中BLOB字段的方法。分享给大家供大家参考,具体如下:1、MySQL中BLOB字段类型BLOB类型的字段用
- mybatis-plus使用时候的小问题记录。在使用mybatis-plus的时候需要把sql的语句打印出来,查看执行的成功与否,在以前的项
- 1.在用windows模式登陆sql server 数据库 简历一个student的数据库,然后新建查询:create table stud
- python类私有属性和公共属性对于python而言,类的属性的可见度只有两种,public和private。类的私有属性便是在前面加上&a
- 在这篇文章里,我们将会探索如何使用Python语言作为一个工具来检测Linux系统各种运行信息。让我们一起来学习吧。哪种Python?当我提
- 1.视频分解图片我们使用cv2.VideoCapture来读取视频import cv2cap = cv2.VideoCapture('
- 在开发工具、数据库设计、应用程序的结构、查询设计、接口选择等方面有多种选择,这取决于特定的应用需求以及开发队伍的技能。本文以SQL Serv
- 解决方法之一:如果pytorch在进行model.cuda()操作需要花费的时间很长,长到你怀疑GPU的速度了,那就是不正常的。如果你用的p
- AES(英文:Advanced Encryption Standard,中文:高级加密标准),是一种区块加密标准。AES将原始数
- 组合数据类型分类组合数据类型分为三类,第一类是集合类型,第二类是序列类型,第三类是映射类型集合类型集合类型是一个元素集合,元素之间没有排列顺
- CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表,显示了各浏览器对css ha
- 本文实例为大家分享了python发送邮件的具体代码,供大家参考,具体内容如下#!/usr/bin/env python # -*- codi
- 前言大家好,我是阿光。本专栏整理了《图神经网络代码实战》,内包含了不同图神经网络的相关代码实现(PyG以及自实现),理论与实践相结合,如GC
- 1. 前言对于列表类型的大量数据,前端展示往往采用 分页 和 无限滚动 的方式来展示,对于用户来说,鼠标滚轮和触控屏使滚动行为要比点击更快更
- 作者:做梦的人(小姐姐)出处:https://www.cnblogs.com/chongyou/1.所有元素都在PageElement下的.
- 一、变量创建过程首先,当我们定义了一个变量name = 'Kwan'的时候,在内存中其实是做了这样一件事:程序开辟了一块内存
- 最近在做图片相关的工作,面对各种格式的图片转换,在OpenCV跟Pillow之间来回切换。觉得有必要把这些东西记录下来,以备不时之需。首先介
- 用Flask处理图片非常容易,这一篇学习一下图片的上传、下载及展示。还是以实例代码演示为主。首先,实现一个简单的上传(过程中未做任何处理,只
- 标量标量由普通小写字母表示(例如,x、y和z)。我们用 R \mathbb{R} R表示所有(连续)实数标量的空间。标量由只有一个元素的张量