【转义字符】HTML 字符实体< >: &等

时间:2021-10-16 09:17:32

在开发中遇到javascript从后台获取的url 会被转义,如:http://localhost:8080/Home/Index?a=14&amp;b=15&amp;c=123,想把它转成http://localhost:8080/Home/Index?a=14&b=15&c=123

网上找了半天的解决方案:

转义分为escapeHTML和unescapeHTML,先看两个函数的实现。

js代码:

 /**
* @function escapeHTML 转义html脚本 < > & " '
* @param a -
* 字符串
*/
escapeHTML: function(a){
a = "" + a;
return a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");;
},
/**
* @function unescapeHTML 还原html脚本 < > & " '
* @param a -
* 字符串
*/
unescapeHTML: function(a){
a = "" + a;
return a.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
},

1,escapeHTML将< > & " '转成字符实体 
使用场景: 
(1)用户在页面中录入(比如输入框) <script>alert(2);</script>, js将该内容提交给后端保存 
(2)显示时,后端将字符串返回前端;js接收到之后: 
a, 使用escapeHTML,将字符串转为 &lt;script&gt;alert(2);&lt;/script&gt;此时,浏览器将能正确解析,因为浏览器接收到实体字符后,转成对应的尖括号等。 
b, 不使用escapeHTML,浏览器一看到<,便认为是html标签的开始,直接把刚才的字符串当脚本执行了,这就是xss漏洞。

2,unescapeHTML将字符实体转成< > & " ' 
使用场景: 
后端将已经转义后的内容显示到页面;比如&lt;script&gt;alert(2);&lt;/script&gt; 
js收到后: 
a,前端进行unescapeHTML,则可以直接dom操作,将标签显示到页面。 
b,前端没有unescapeHTML,则原样输出<script>alert(2);</script>,但此时并没有执行。

转义字符: 

【转义字符】HTML 字符实体&lt; &gt: &amp;等

提示:使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。

【转义字符】HTML 字符实体&lt; &gt: &amp;等的更多相关文章

  1. 转义字符 HTML 字符实体 &lt&semi; &gt&semi;&colon; &amp&semi;等

    在 HTML 中,某些字符是预留的. 在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签. 如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用 ...

  2. 【转义字符】HTML 字符实体&amp&semi;lt&semi; &amp&semi;gt&colon; &amp&semi;amp&semi;

    在开发中遇到javascript从后台获取的url 会被转义,如:http://localhost:8080/Home/Index?a=14&b=15&c=123,想把它转成http: ...

  3. &lowbar;&lowbar;x&lowbar;&lowbar;&lpar;10&rpar;0906第三天&lowbar;&lowbar;字符实体(转义字符)

    实体:也叫转义字符,在网页中,一些类似“大于号”和“小于号”这样的字符,无法直接使用,需要用特殊的字符串来表示. 实体语法: “&实体名字;” 或者 “&实体编号;” 注意: 最好使用 ...

  4. java转换 HTML字符实体,java特殊字符转义字符串

    为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希 ...

  5. HTML字符实体(Character Entities),转义字符串(Escape Sequence)

    为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希 ...

  6. HTML字符实体(Character Entities),转义字符串(Escape Sequence)【转】

    为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希 ...

  7. HTML 中的预留字符&lpar;如标签的小于号 &lt&semi; &rpar;必须被替换为字符实体&lpar; &amp&semi;lt&semi; &rpar;。 不间断空格&lpar;&amp&semi;nbsp&semi;&rpar;

    1. 参考 HTML 字符实体 Python处理HTML转义字符 比方说一个从网页中抓到的字符串 html = '<abc>' 用Python可以这样处理: import HTMLPars ...

  8. HTML字符实体(Character Entities),转义字符串(Escape Sequence) 转

    为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希 ...

  9. &lbrack;转&rsqb;HTML字符实体(Character Entities),转义字符串(Escape Sequence)

    为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希 ...

随机推荐

  1. Android疑难杂症收集

    在渲染前获取 View 的宽高 5种手势工具类 软键盘用法总结 Android中Shape的使用 Android只能动态注册的广播Action Android 悬浮窗权限各机型各系统适配大全 录音权限 ...

  2. ERP 推式 拉式 工序拉式 装配拉式 倒冲

    ERP 推式  拉式  工序拉式   装配拉式   倒冲 以上為生产订单(wip)中的原料供应方式,最常用的有Pull和Push. PULL即拉动方式: 拉式生产是生产为主,原材料是由专门的配送人员按 ...

  3. 描述下&commat;Component,&commat;Repository,&commat;Service,&commat;Scope,&commat;Autowired,&commat;Inject,&commat;Value标记的作用

    1.@Component为通用注解. 2.@Repository为持久层组件注解. 3.@Service为业务层组件注解. 4.@Scope为Bean的作用域注解. 5.@Autowired,@Inj ...

  4. 进入PE后不显示硬盘的解决办法

    其实我很早之前就知道这个方法了,我虽然不知道原因,不过我是一个一个试出来的,转过来备忘, 内容介绍:经常使用PE的朋友相信都遇到过这样的问题,一些新购买的电脑可以正常把PE系统安装到U盘中,也可以正常 ...

  5. 深入Java虚拟机(1)——Java体系结构

    Java体系结构 Java体系结构包括四个独立但相关的技术: 1.Java程序设计语言 2.Java class文件格式 3.Java应用编程接口(API) 4.Java虚拟机 当编写并运行一个Jav ...

  6. 接口与继承:方法覆盖(super)

    源代码 //父类Parent class Parent{ int x; int y; Parent() { x = ; y = ; } public void Set(int a,int b) { x ...

  7. 开源ETL工具之Kettle介绍

    What 起源 Kettle是一个Java编写的ETL工具,主作者是Matt Casters,2003年就开始了这个项目,最新稳定版为7.1. 2005年12月,Kettle从2.1版本开始进入了开源 ...

  8. 一个强大的VS代码搜索工具

    最近一直在寻找一款VS代码搜索插件,终于找到了一个不错的,仅支持vs2012以上. https://marketplace.visualstudio.com/items?itemName=mario- ...

  9. Markdown 版本演进

    本文作为 Markdown 系列的第二篇,对上一篇使用 Markdown 写技术博客,我踩过的 6个坑博客提到的版本变迁进行简要的提纲说明. 如果不想读文章,请直接看思维导图,使用 Atom + ma ...

  10. 2017ACM暑期多校联合训练 - Team 6 1011 HDU 6106 Classes (容斥公式)

    题目链接 Problem Description The school set up three elective courses, assuming that these courses are A ...