javascript对HTML字符转义与反转义


Posted in Javascript onDecember 13, 2018

1.背景:在项目中,经常遇到一些字符需要进行转义后才能显示到界面上,如“&”,在界面中显示的是“&”,在html中书写“&”,显示在界面的中的依然是“&”。

这时候,就需要进行转义

 javascript对HTML字符转义与反转义

2.解决方案

<script>

var HtmlUtil = {

 /*1.用浏览器内部转换器实现html转码*/

 htmlEncode:function (html){

 //1.首先动态创建一个容器标签元素,如DIV

 var temp = document.createElement ("div");

 //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐,google支持)

 (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);

 //3.最后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串了

 var output = temp.innerHTML;

 temp = null;

 return output;

 },

 /*2.用浏览器内部转换器实现html解码*/

 htmlDecode:function (text){

 //1.首先动态创建一个容器标签元素,如DIV

 var temp = document.createElement("div");

 //2.然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持)

 temp.innerHTML = text;

 //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐,google支持),即得到经过HTML解码的字符串了。

 var output = temp.innerText || temp.textContent;

 temp = null;

 return output;

 },

 /*3.用正则表达式实现html转码*/

 htmlEncodeByRegExp:function (str){ 

 var s = "";

 if(str.length == 0) return "";

 s = str.replace(/&/g,"&");

 s = s.replace(/</g,"<");

 s = s.replace(/>/g,">");

 s = s.replace(/ /g," ");

 s = s.replace(/\'/g,"'");

 s = s.replace(/\"/g,""");

 return s; 

 },

 /*4.用正则表达式实现html解码*/

 htmlDecodeByRegExp:function (str){ 

 var s = "";

 if(str.length == 0) return "";

 s = str.replace(/&/g,"&");

 s = s.replace(/</g,"<");

 s = s.replace(/>/g,">");

 s = s.replace(/ /g," ");

 s = s.replace(/'/g,"\'");

 s = s.replace(/"/g,"\"");

 return s; 

 }

 };

</script>

使用方法:HtmlUtil.htmlDecodeByRegExp("&")

PS:使用正则

使用正则转码:

var value = document.getElementById('input').value.trim();
 //对用户输入进行转义
 value = value.replace(/&/g,"&");
 value = value.replace(/</g,"<");
 value = value.replace(/>/g,">");
 value = value.replace(/ /g," ");
 value = value.replace(/"/g,'"');

使用正则解码:

var value = e.target.innerText;
 // value = decodeURIComponent(value);
 value = value.replace(/&/g,"&");
 value = value.replace(/</g,"<");
 value = value.replace(/>/g,">");
 value = value.replace(/ /g," ");
 value = value.replace(/"/g,"'");

下面是其他网友的补充

在编写html时,经常需要转义,才能正常显示在页面上。

并且,还可以防止xss。

解决方案:

一, 使用正则:

使用正则转码:

var value = document.getElementById('input').value.trim();
 //对用户输入进行转义
 value = value.replace(/&/g,"&");
 value = value.replace(/</g,"<");
 value = value.replace(/>/g,">");
 value = value.replace(/ /g," ");
 value = value.replace(/"/g,'"');

使用正则解码:

var value = e.target.innerText;
// value = decodeURIComponent(value);
 value = value.replace(/&/g,"&");
 value = value.replace(/</g,"<");
 value = value.replace(/>/g,">");
 value = value.replace(/ /g," ");
 value = value.replace(/"/g,"'");

由于编辑器的编码问题,其实就是

将<用<替换,>替换为>,空格替换为 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
Web安全之XSS攻击与防御小结
Dec 13 #Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 #Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 #Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 #Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 #Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 #Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 #Javascript
You might like
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
python获取代理IP的实例分享
2018/05/07 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
python中count函数简单的实例讲解
2020/02/06 Python
python 5个顶级异步框架推荐
2020/09/09 Python
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
新党章心得体会
2014/09/04 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
婚礼家长致辞
2015/07/27 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL