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 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
使用python实现baidu hi自动登录的代码
2013/02/10 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
python 文件转成16进制数组的实例
2018/07/09 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
比较基础的php面试题及答案-填空题
2014/04/26 面试题
保护母亲河倡议书
2014/04/14 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
班级活动总结格式
2014/08/30 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书