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 相关文章推荐
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
实现一个简单得数据响应系统
Nov 11 Javascript
浅谈Vue的computed计算属性
Mar 21 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Python实现微信机器人的方法
2019/09/06 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
python程序需要编译吗
2020/06/19 Python
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
网络安全方面的面试题
2015/11/04 面试题
家庭贫困证明
2014/09/23 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
捐资助学感谢信
2015/01/21 职场文书
经费申请报告范文
2015/05/18 职场文书
小学班主任研修日志
2015/11/13 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书