JS实现HTML标签转义及反转义


Posted in Javascript onApril 14, 2020

简单说一下业务场景,前台用户通过input输入内容,在离开焦点时,将内容在div中显示。

这时遇到一个问题,如果用户输入了html标签,则在div显示中,标签被解析。

由于是纯前端操作,不涉及后端,因此需要通过js对输入内容进行转义。

这里提供一个非常简单有效的转义方案,利用了innerHTMLinnerText

注:火狐不支持innerText,需要使用 textContent 属性,而IE早期版本不支持此属性,为了同时兼容IE及火狐,需要进行判断操作.

因为innerText(textContent)会获取纯文本内容,忽略html节点标签,而innerHTML会显示标签内容,

所以我们先将需转义的内容赋值给innerText(textContent),再获取它的innerHTML属性,这时获取到的就是转义后文本内容。

代码如下:

function HTMLEncode(html) {
 var temp = document.createElement("div");
 (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
 var output = temp.innerHTML;
 temp = null;
 return output;
}
var tagText = "<p><b>123&456</b></p>";
console.log(HTMLEncode(tagText));//<p><b>123&456</b></p>

通过测试结果,可以看到html标签及&符都被转义后保存。

同理,反转义的方法为先将转义文本赋值给innerHTML,然后通过innerText(textContent)获取转义前的文本内容

function HTMLDecode(text) { 
 var temp = document.createElement("div"); 
 temp.innerHTML = text; 
 var output = temp.innerText || temp.textContent; 
 temp = null; 
 return output; 
} 
var tagText = "<p><b>123&456</b></p>";
var encodeText = HTMLEncode(tagText);
console.log(encodeText);//<p><b>123&456</b></p>
console.log(HTMLDecode(encodeText)); //<p><b>123&456</b></p>

编码反编码核心函数

function html_encode(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, """); 
      s = s.replace(/\n/g, "<br/>"); 
    return s; 
  } 
 
  function html_decode(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, "\""); 
    s = s.replace(/<br\/>/g, "\n"); 
    return s; 
  } 
 
 
 
  console.log(html_decode('<div>123</div>')); 
  console.log(html_encode(html_decode('<div>123</div>')));

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
 function html_encode(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, """); 
      s = s.replace(/\n/g, "<br/>"); 
    return s; 
  } 
 
  function html_decode(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, "\""); 
    s = s.replace(/<br\/>/g, "\n"); 
    return s; 
  } 
 
console.log(html_decode('<div>123</div>')); 
console.log(html_encode(html_decode('<div>123</div>')));
</script>
</head>
<body>

</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
使用JQuery进行跨域请求
Jan 25 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
原生JS实现不断变化的标签
May 22 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 #Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 #Javascript
如何提高Dom访问速度
Jan 05 #Javascript
AngularJS中run方法的巧妙运用
Jan 04 #Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 #Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 #Javascript
基于jQuery实现选项卡效果
Jan 04 #Javascript
You might like
PHP setTime 设置当前时间的代码
2012/08/27 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
vue-loader教程介绍
2017/06/14 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
javascript如何实现create方法
2019/11/04 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python实现二叉查找树实例代码
2018/02/08 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
python编写实现抽奖器
2020/09/10 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
在C#中如何实现多态
2014/07/02 面试题
户外拓展活动方案
2014/02/11 职场文书
创业培训计划书
2014/05/03 职场文书
公益广告标语
2014/06/19 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
会计工作检讨书
2015/02/19 职场文书
实习生辞职信范文
2015/03/02 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL