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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
js实现楼层导航功能
Feb 23 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 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 判断数组是几维数组
2013/03/20 PHP
解析php常用image图像函数集
2013/06/24 PHP
PHP正则验证Email的方法
2015/06/15 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
javascript 动态参数判空操作
2008/12/22 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
Python translator使用实例
2008/09/06 Python
pycharm安装图文教程
2017/05/02 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
extern在函数声明中是什么意思
2014/01/19 面试题
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
工程造价专业大学生职业规划范文
2014/03/09 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
2014年党支部承诺书
2014/05/30 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
中秋节感想
2015/08/10 职场文书