汉字转html实体符号js_html实体编码遇上js代码

单双引号

在js代码中

在js中单、双引号引起来的是字符串,如果我们要在字符串中使用单、双引号,需要反斜杠进行转义

let str='user\'s name';

// or

let str=" user's name";

// or

let str="she said:\"...\".";

如果在字符串中输出反斜杠,仍然是用反斜杠转义,即2个反斜杠输出1个反斜杠

在html代码中

html标签中,属性值通常用双引号引起来,也可以使用单引号或不用引号。

这3种写法都正确,不过通常我们是选择用双引号引起来。

如果我们要在属性值中使用单、双绰号,我们不能直接写成下面这样

这些全部是错误的。我们要像在js中对单、双引号转义一样,对属性中的单、双引号转义

在html中输出预留符号,可以使用字符实体转义的形式,这里有简单介绍:http://www.w3school.com.cn/html/html_entities.asp。即想输出一个双引号可以使用"的形式,

除此之外,html还支持十进制与十六进制编码的形式输出字符,如我们知道字符a的ascii码的十进制是97 十六进制是61

所以我们在页面body中输出一个字符a,有以下3种形式

a

a

a

同样,单双引号也有十进制(单:39,双:34)与十六进制(单:27,双:22),所以我们在属性中输出一个单引号有2种选择,十进制与十六进制

而输出一个双引号则有3种选择

当js代码遇上实体编码

我们可以通过dom节点提供的事件写上调用js的代码,如点击body弹出hello这个字符串,我们可以写成

click here

如果我们的需求是就弹出一个双引号呢?

根据前述规则,我们要写成:

click here

当然,alert里的单引号也可以使用十进制或十六进制编码

click here

这样也是可以的。

是不是有点xss的感觉?

如果我们把弹双引号的需求改成单引号呢?

click here

如果我们用十进制或十六进制编码呢?

click here

这样仍然是不可以的

我们要对js字符串中的单引号进行转义,如

click here

click here

前面的οnclick="alert('\'')"看起来还正常,后面的这个οnclick="alert('\"')"就有点不直观了。因为后面这个看上去反斜杠像在转义&这1个字符,而&在js的字符串中并不需要转义的。

动态输出

如前述的alert弹出的消息,如果是一个变量控制,动态输出呢?

click here

那我们这个msg字符串就得注意了,从这个示例来看,这个动态的msg即出现在属性onclick中,也出现在alert的单引号开始的字符串中。

我们要对msg中的双引号转成"或"或",并对msg中单引号的前面加上一个反斜杠\ ?

题外话:对msg中的反斜杠需要做double处理,因为反斜杠在html属性中并不是特殊的,但在js的字符串中是特殊的。因此正确的做法是对反斜杠及单引号前面各加上一个反斜杠

然而,你并不能保证属性是用双引号,alert中的字符串用的是单引号,因为可以写成下面这样

click here

?

这种情况我们要对msg中的单引号转成'或',并对msg中双引号前面加上一个反斜杠\

题外话:同上

看上去要根据不同的情况做不同的处理,其实也不需要

我们只需要对单、双引号前面加上一个反斜杠\然后再对单、双引号实体编码即可。

在js中如果反斜杠后面跟的不需要反斜杠转义的字符,那么这个反斜杠是被丢弃的,因此像

var str="user\'s name";

单引号前面多加一个反斜杠也不要紧的。

自动化处理与识别提醒

在magix项目中,由于magix-combine的支持,可识别出属性中js代码的部分,并自动化处理,如

click here

name这个变量可包含任意的单、双引号及反斜杠。工具自动识别并处理,开发者不需要做任何事情。

而对于这样的写法:

click here

click here

第一种写法其实并不正确,但第二种情况看上去又怪怪的。magix-combine工具能识别出来是否需要添加反斜杠,并自动添加处理。

第一种需要添加反斜杠,工具会自动加上,并提醒开发者这里的写法是不正确的。

第二种说明开发者意识到了问题所在,自己处理了,工具就不再处理也不再提醒开发者。

相关链接:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/520580.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hystrix之外健壮微服务的新选择:Sentinel 发布首个生产版本

Sentinel 阿里中间件团队开源的,面向分布式服务架构的轻量级流量控制框架,主要以流量为切入点,从流量控制、熔断降级、系统负载保护等多个维度来帮助用户保护服务的稳定性。 近日,阿里中间件开源组件Sentinel 发布首个官方推荐可生…

服务器系统功能描述,Hadoop mapreduce核心功能描述

在任务执行期间,应用程序在写文件时可以利用这个特性,比如 通过 FileOutputFormat.getWorkOutputPath()获得${mapred.work.output.dir}目录, 并在其下创建任意任务执行时所需的side-file,框架在任务尝试成功时会马上移动这些文件&…

怎样修改老旧commit的message信息?

找到操作提交记录的父提交id&#xff0c;也可以理解为上一次提交记录 git rebase -i <父commitid> 只修该提交信息用把pick更新为r&#xff0c;然后在git弹出的命令窗口中&#xff0c; 修改提交记录信息&#xff0c;最后保存退出即可

腾讯Techo开发者大会揭晓云存储发展趋向:高性能、高可用、高性价比

产业数字化转型过程中产生着比过去任何一个时代都多的数据。在这样的背景下&#xff0c;数据存储技术应该怎么发展&#xff1f;11月7日&#xff0c;在腾讯Techo开发者大会上&#xff0c;来自科研领域的专家和腾讯云存储业务的工程师们共同揭开了云存储的发展趋势。 据IDC预测&…

python中imread导入失败_ImportError:无法导入加载图像文件所需的Python Imaging Library(PIL)...

我正在尝试在facemorpher 1.0.1 python包中运行average.py程序.我创建了一个虚拟环境,该环境中安装了带有自制软件的openCV,安装在自制软件中的python 2.7和可执行框架python,它们在虚拟环境cv中构建了python的框架.运行平均程序当前给我这个输出.(cv) Francess-MacBook-Pro-2:…

java 计算机开始时间,关于计算Java程序运行时间

第一种是以毫秒为单位计算的。Java代码//伪代码long startTimeSystem.currentTimeMillis(); //获取开始时间doSomeThing(); //测试的代码段long endTimeSystem.currentTimeMillis(); //获取结束时间System.out.println("程序运行时间&#xff1a; "(end-start)&qu…

2018天猫双11|这就是阿里云!不止有新技术,更有温暖的社会力量

双11快乐&#xff0c;该买的应该都已经买到了吧&#xff1f; 跟大家说个暖心事儿&#xff1a;今天&#xff0c;阿里云以天猫双11之子派大星星星l的名义&#xff0c;在公安部打拐办团圆项目、缘梦基金、宝贝回家等公益组织的鼎力支持下&#xff0c;将失踪儿童的信息放在这个网页…

怎样把连续的多个commit整理成1个?

怎样把连续的多个commit整理成1个&#xff1f;前提是&#xff1a;此分支尚未推送至远程&#xff0c;只修该提交记录&#xff0c;对提交文件内容不做修改 找到操作提交记录的父提交id&#xff0c;也可以理解为上一次提交记录 git rebase -i ac5e973 1.找到像合并的那几个提交信息…

重磅!云+X 案例征集正式启动啦!

云计算的概念已经悄然走过十余年&#xff0c;尽管我们对于它的关注&#xff0c;没有像人工智能、物联网、区块链那么密切&#xff0c;但是云服务在我们的生活与工作中早已无处不在。越来越多的新兴技术高调出现在大众的面前&#xff0c;唯有云计算仍以最低调的态度做着最实用的…

Nacos 发布0.3.0版本,迄今为止最好看的版本

近日&#xff0c;Nacos 0.3.0 正式发布&#xff0c;该版本旨在增强对服务列表&#xff0c;健康状态管理&#xff0c;服务治理&#xff0c;分布式配置管理等方面的管控能力&#xff0c;以便进一步帮助用户降低管理微服务应用架构的成本&#xff0c;在第一版的 UI 功能规划中&…

定义快捷代码_nodepad++代码编辑器替代工具整理

概述代码编辑工具选择Visual Studio CodeVS vode特点&#xff1a;开源&#xff0c;免费&#xff1b;自定义配置集成git智能提示强大支持各种文件格式(html/jade/css/less/sass/xml)调试功能强大各种方便的快捷键强大的插件扩展EditPlus默认支持HTML、CSS、PHP、ASP、Perl、C/C、…

王者荣耀转移完成会显示我的服务器吗,王者荣耀账号多久能转移完

4月29日&#xff0c;王者荣耀已经发布跨系统角色转移测试名额&#xff0c;每日限量&#xff0c;各位召唤师也都蠢蠢欲动&#xff0c;期待已久的功能终于上线啦&#xff0c;感兴趣的小伙伴快跟着超分手游网的小编一起去了解一下吧&#xff01;王者荣耀账号多久能转移完申请提交后…

怎样把间隔的几个commit整理成1个呢?

怎样把间隔的几个commit整理成1个呢&#xff1f; 前提是&#xff1a;此分支尚未推送至远程&#xff0c;只修该提交记录&#xff0c;对提交文件内容不做修改 找到操作提交记录的父提交id&#xff0c;也可以理解为上一次提交记录 git rebase -i ac5e973 1.找到像合并的那几个提交…

华为双11发 20 亿奖金!?

戳蓝字“CSDN云计算”关注我们哦&#xff01;11 月 11 日当天&#xff0c;有华为员工在社交网络上爆料称&#xff0c;华为双 11 发放两份特别奖金&#xff0c;一份是阳关普照奖&#xff0c;另外一份是 20 亿奖金。该爆料称&#xff1a;“双 11&#xff0c;华为发放两份特别奖金…

python语言是编译性语音_最强编程语言 Java 和最受欢迎之 Python 的巅峰对决

作为程序员们的看家利器之编程语言&#xff0c;倘若技术开发者对其掌握得越深则对自身职业生涯越有益处&#xff0c;然随着技术的更新变革&#xff0c;我们在日常使用不单单只会用到一门编程语言&#xff0c;那么究竟该如何选择一门新的语言来上手&#xff1f;本文中&#xff0…

ajax结合java,ajax技术应用详细分析(后端java与客户端请求的结合)

Ajax 技术应用先回看 模态框的使用js比较薄弱如上 比如这部分加粗样式如下 是BOM窗口对象**js最薄弱 建议在浏览器练习** confirm方法跳转练习新疑问:怎么分辨js,jQuery和jsp代码 与其实现应用插入小点**延申说法 client客户端发送请求 (客户端层面)是client前端页面层****重要…

MySQL的未来在哪?

阿里云 MySQL&MariaDB 数据库产品结合开源社区&#xff0c;提供了稳定、可靠、便捷、弹性的在线数据库服务&#xff0c;帮助全球企业客户进行数字化转型。MySQL发展经历了一系列变化&#xff0c;从Sun到Oracle&#xff0c;发展也经过了几个阶段。MySQL从5.7版本开始走上了代…

Git 汇总

怎样比较暂存区和HEAD所含文件的变化&#xff1f;适用于&#xff0c;工作区的文件已经添加至暂存区&#xff0c;尚未进行提交&#xff0c;比较暂存区和当前分支的文件的不同&#xff0c;如果添加至暂存区的文件正确的&#xff0c;可以进行提交&#xff0c;推送远程&#xff1b;…

代码写成这样,老板把我开除了| IT 巨能唠

今天聊一聊遇到过的一些神逻辑代码&#xff0c;不一定很全&#xff0c;但真心让小编我自叹不如啊&#xff01;1、耍猴的最佳手段还记得 XX 手机的抢购活动么&#xff0c;抢购按钮的代码类似是这样的&#xff1a;<a href"javasript:alert(抢购结束!)">立即抢购&…

springboot+vue项目如何在linux上部署

在linux上部署项目&#xff0c;是我们实训项目作业的最后一步&#xff0c;此时我们的项目编码测试已经完成&#xff0c;接下来就需要在服务器上部署上线&#xff0c;那么如何部署上线&#xff0c;接下来我会在虚拟机上的CentOS7系统上实现部署&#xff0c; 一.下载JDK 因为我…