javascript另类方法高效实现htmlencode()与htmldecode()函数

原创 2012年08月09日 11:54:55

最常见的做法是采用正则表达式替换的方法,将特殊字符如 < > & 等进行替换,htmlencode的时候这样替换还比较容易,但发过来htmldecode的时候就不一定好用了,因为需要反转的情况很多,出了常见的&lt;&gt;&amp;以外,还有&nbsp;&copy;&quot;&reg;等数十个字符实体,还有&#65;&#66;&#20013;&#25991;或者&#x4E2D;&#x6587;之类以字符的Unicode编码的十进制或16进制表示的转义,难以全部列举,用逐个替换不仅代码冗长而且低效,还容易漏掉某些字符。

代码如下:

function htmlencode(s){
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(s));
    return div.innerHTML;
}
function htmldecode(s){
    var div = document.createElement('div');
    div.innerHTML = s;
    return div.innerText || div.textContent;
}

相当简洁!

编码原理就是创建TextNode节点,附加到容器中,再取容器的innerHTML.

解码原理是将字符串赋給容器的innerHTML,再取innerText或textContent.


测试一下:

//测试
document.onclick = function (){
    //&lt;p&gt; &amp; &lt;/p&gt;
    alert(htmlencode('<p> & </p>'));

    //<p> & © ABC 中文 中文 </p>
    alert(htmldecode('&lt;p&gt; &amp; &copy; &#65;&#66;&#67; &#20013;&#25991; &#x4E2D;&#x6587; &lt;/p&gt;'));
}
效果不错。 

htmldecode对入参有要求,如果入参不是合法的encode后的结果,可能无法得到预期结果。

我在google搜索,在cnblogs找到一篇和我一样思路的,原来已经有别人这样想了=||=,不过他的htmldecode代码有错误。

javascript处理HTML的Encode(转码)和Decode(解码)总结,避免js脚本注入问题

HTML的Encode(转码)和解码(Decode)在平时的开发中也是经常要处理的,在这里总结了使用javascript处理HTML的Encode(转码)和解码(Decode)的常用方式 一、用浏览器...
  • tsh18523266651
  • tsh18523266651
  • 2016年03月31日 13:48
  • 1975

javascript处理HTML的Encode(转码)和Decode(解码)总结

看decode,这篇写的比较好理解,转自点击打开链接 HTML的Encode(转码)和解码(Decode)在平时的开发中也是经常要处理的,在这里总结了使用javascript处理HTML的E...
  • u010552788
  • u010552788
  • 2016年03月10日 10:56
  • 4490

Server.Htmlencode和Server.HtmlDecode的用法

Server.Htmlencode的用法  一.HTMLEncode 方法对指定的字符串应用 HTML 编码。 语法 Server.HTMLEncode( string ) 参数 s...
  • linshichen
  • linshichen
  • 2016年04月05日 14:54
  • 2799

HTMlEncode和HTMLDecode、UrlEncode和 UrlDecode 定义和用法

HTMlEncode和HTMLDecode 1.HTMLEncode函数:除了server.htmlencode的所有功能以外,还有转化回车和空格的功能,可以将textarea中输入的文本按照原...
  • henulwj
  • henulwj
  • 2012年08月28日 15:56
  • 22392

Javascript htmldecode

// HtmlDecode http://lab.msdn.microsoft.com/annotations/htmldecode.js // client side version of ...
  • apollokk
  • apollokk
  • 2015年01月05日 11:04
  • 1347

几种HtmlEncode的区别

一、C#中的编码 HttpUtility.HtmlDecode、HttpUtility.HtmlEncode与Server.HtmlDecode、Server.HtmlEncode与HttpServ...
  • wd330260402
  • wd330260402
  • 2010年10月31日 20:14
  • 41280

js对html编解码

1.原生js 编码: function HtmlEncode(str) {  var t = document.createElement("div");  t.textContent ? t.tex...
  • echo_oy
  • echo_oy
  • 2016年10月13日 14:44
  • 310

JS编码&解码&HTML转义

JS编码&解码&转义
  • Sunny_Ran
  • Sunny_Ran
  • 2016年11月02日 18:24
  • 7590

JS HTML转义码解码

背景: JQ的html()函数得到网页的html源码,而有时得到的文本中的中文会以HTML转义码的形式出现:如“转发”被编码成了“& #x8F6C;& #x53D1;”。(这里&和#之间加了空格,否...
  • windroid
  • windroid
  • 2016年07月16日 12:52
  • 1588

Jquery html encode & decode

$(document).ready(function(){ function htmlEncode(value){ ...
  • luan_tianjiao
  • luan_tianjiao
  • 2015年06月03日 17:39
  • 499
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript另类方法高效实现htmlencode()与htmldecode()函数
举报原因:
原因补充:

(最多只允许输入30个字)