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转义方法 html_encode 和 html_decode

&lt;br/&gt; = 以上尖括号等符号的手工转义:   代码   function html_encode(str)   {     var s = "";     if (s...
  • wide288
  • wide288
  • 2014-06-10 16:53:12
  • 3923

几种HtmlEncode的区别

一、C#中的编码 HttpUtility.HtmlDecode、HttpUtility.HtmlEncode与Server.HtmlDecode、Server.HtmlEncode与HttpServ...
  • wd330260402
  • wd330260402
  • 2010-10-31 20:14:00
  • 41600

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

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

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

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

JS编码&解码&HTML转义

JS编码&解码&转义
  • Sunny_Ran
  • Sunny_Ran
  • 2016-11-02 18:24:11
  • 9125

JS HTML转义码解码

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

Javascript htmldecode

// HtmlDecode http://lab.msdn.microsoft.com/annotations/htmldecode.js // client side version of ...
  • apollokk
  • apollokk
  • 2015-01-05 11:04:13
  • 1399

JS及JQuery对Html内容编码,Html转义

/** JQuery Html Encoding、Decoding  * 原理是利用JQuery自带的html()和text()函数可以转义Html字符  * 虚拟一个Div通过赋值和取值来得到想...
  • baidu_18607183
  • baidu_18607183
  • 2017-01-05 17:24:51
  • 1015

Jquery html encode & decode

$(document).ready(function(){ function htmlEncode(value){ ...
  • luan_tianjiao
  • luan_tianjiao
  • 2015-06-03 17:39:38
  • 600

Java HTMLEncode & HTMLDecode

package com.rf.demo;      import org.apache.commons.lang.StringEscapeUtils;   /**    * 替换HTMl...
  • shine4j
  • shine4j
  • 2013-06-21 10:13:15
  • 2786
收藏助手
不良信息举报
您举报文章:javascript另类方法高效实现htmlencode()与htmldecode()函数
举报原因:
原因补充:

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