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 相关文章推荐
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
原生js实现表格循环滚动
Nov 24 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 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
webpack打包js的方法
2018/03/12 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
Django实现跨域的2种方法
2019/07/31 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
python实现微信打飞机游戏
2020/03/24 Python
Python中SQLite如何使用
2020/05/27 Python
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
党员违纪检讨书
2014/02/18 职场文书
高考备战决心书
2014/03/11 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
硕士论文致谢范文
2015/05/14 职场文书