脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js HTML标签 转义 反转义

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

 更新时间：2020年04月14日 18:27:40   作者：wangyuheng77  
本文主要介绍了JS实现HTML标签转义及反转义的方法。具有一定的参考价值，下面跟着小编一起来看下吧

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

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

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

这里提供一个非常简单有效的转义方案，利用了innerHTML和innerText

注：火狐不支持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));//&lt;p&gt;&lt;b&gt;123&amp;456&lt;/b&gt;&lt;/p&gt;

通过测试结果，可以看到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);//&lt;p&gt;&lt;b&gt;123&amp;456&lt;/b&gt;&lt;/p&gt;
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, "&amp;"); 
    s = s.replace(/</g, "&lt;"); 
    s = s.replace(/>/g, "&gt;"); 
    s = s.replace(/ /g, "&nbsp;"); 
    s = s.replace(/\'/g, "&#39;"); 
    s = s.replace(/\"/g, "&quot;"); 
      s = s.replace(/\n/g, "<br/>"); 
    return s; 
  } 
 
  function html_decode(str) 
  { 
    var s = ""; 
    if (str.length == 0) return ""; 
    s = str.replace(/&amp;/g, "&"); 
    s = s.replace(/&lt;/g, "<"); 
    s = s.replace(/&gt;/g, ">"); 
    s = s.replace(/&nbsp;/g, " "); 
    s = s.replace(/&#39;/g, "\'"); 
    s = s.replace(/&quot;/g, "\""); 
    s = s.replace(/<br\/>/g, "\n"); 
    return s; 
  } 
 
 
 
  console.log(html_decode('&lt;div&gt;123&lt;/div&gt;')); 
  console.log(html_encode(html_decode('&lt;div&gt;123&lt;/div&gt;')));

实例

<!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, "&amp;"); 
    s = s.replace(/</g, "&lt;"); 
    s = s.replace(/>/g, "&gt;"); 
    s = s.replace(/ /g, "&nbsp;"); 
    s = s.replace(/\'/g, "&#39;"); 
    s = s.replace(/\"/g, "&quot;"); 
      s = s.replace(/\n/g, "<br/>"); 
    return s; 
  } 
 
  function html_decode(str) 
  { 
    var s = ""; 
    if (str.length == 0) return ""; 
    s = str.replace(/&amp;/g, "&"); 
    s = s.replace(/&lt;/g, "<"); 
    s = s.replace(/&gt;/g, ">"); 
    s = s.replace(/&nbsp;/g, " "); 
    s = s.replace(/&#39;/g, "\'"); 
    s = s.replace(/&quot;/g, "\""); 
    s = s.replace(/<br\/>/g, "\n"); 
    return s; 
  } 
 
console.log(html_decode('&lt;div&gt;123&lt;/div&gt;')); 
console.log(html_encode(html_decode('&lt;div&gt;123&lt;/div&gt;')));
</script>
</head>
<body>

</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析

    JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析

    这篇文章主要介绍了JavaScript设计模式之构造器模式(生成器模式)定义与用法,结合实例形式分析了javascript构造器模式的概念、原理、与工厂模式的区别以及相关使用方法,需要的朋友可以参考下
    2018-07-07
  • 微信小程序picker组件关于objectArray数据类型的绑定方法

    微信小程序picker组件关于objectArray数据类型的绑定方法

    这篇文章主要介绍了微信小程序picker组件关于objectArray数据类型的绑定方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 基于JavaScript实现鼠标箭头移动图片跟着移动

    基于JavaScript实现鼠标箭头移动图片跟着移动

    这篇文章主要介绍了基于JavaScript实现鼠标箭头移动图片跟着移动的核心代码，代码比较简单易懂,需要的朋友可以参考下
    2016-08-08
  • 利用Javascript获取选择文本所在的句子详解

    利用Javascript获取选择文本所在的句子详解

    这篇文章主要给大家爱介绍了关于利用Javascript获取选择文本所在的句子的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧。
    2017-12-12
  • 利用three.js画一个3D立体的正方体示例代码

    利用three.js画一个3D立体的正方体示例代码

    Three.js是一个3DJavaScript库，基于右手坐标系，可以创建简单或是比较复杂的三维图形并应用丰富多彩的纹理和材质，可以添加五光十色的光源，可以在3D场景中移动物体或是添加脚本动画等等。本文介绍了利用three.js如何画一个3D立体的正方体的方法，需要的可以参考下。
    2017-11-11
  • js类型检查实现代码

    js类型检查实现代码

    检查对象类型的一种方式是参考所有JavaScript对象所共有的一个称为constructor的属性。该属性是对一个最初用来构造此对象的函数的引用。
    2010-10-10
  • JavaScript实现网页跨年倒计时

    JavaScript实现网页跨年倒计时

    这篇文章主要为大家详细介绍了JavaScript实现网页跨年倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 随机生成10个不重复的0-100的数字(实例讲解)

    随机生成10个不重复的0-100的数字(实例讲解)

    下面小编就为大家带来一篇随机生成10个不重复的0-100的数字(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换&#XX函数代码

    js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换AS

    这篇文章主要介绍了js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换&#XXXX,需要的朋友可以参考下
    2016-12-12
  • JavaScript交换两个变量方法实例

    JavaScript交换两个变量方法实例

    这篇文章主要介绍了JavaScript交换两个变量方法实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11

最新评论