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 24 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
vue element upload实现图片本地预览
Aug 20 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 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 变量的定义方法
2010/01/26 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
jQuery timers计时器简单应用说明
2010/10/28 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
python开发之thread线程基础实例入门
2015/11/11 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Python正则表达式常用函数总结
2017/06/24 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
详解Python 正则表达式模块
2018/11/05 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
如何真正的了解python装饰器
2020/08/14 Python
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
学生安全责任书
2014/04/15 职场文书
药品营销策划方案
2014/06/15 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
红色经典电影观后感
2015/06/18 职场文书
高二语文教学反思
2016/02/16 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers