javascript处理HTML的Encode(转码)和Decode(解码)总结
HTML的Encode(转码)和解码(Decode)在平时的开发中也是经常要处理的,在这里总结了使用javascript处理HTML的Encode(转码)和解码(Decode)的常用方式
一、用浏览器内部转换器实现转换
1.1.用浏览器内部转换器实现html转码
首先动态创建一个容器标签元素,如DIV,然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐,google支持),最后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串了。
1.2.用浏览器内部转换器实现html解码
首先动态创建一个容器标签元素,如DIV,然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持),最后返回这个元素的innerText(ie支持)或者textContent(火狐,google支持),即得到经过HTML解码的字符串了。
1.3.具体实现代码
复制代码
var HtmlUtil = {
/*1.用浏览器内部转换器实现html转码*/
htmlEncode:function (html){
//1.首先动态创建一个容器标签元素,如DIV
var temp = document.createElement ("div");
//2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐,google支持)
(temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
//3.最后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串了
var output = temp.innerHTML;
temp = null;
return output;
},
/*2.用浏览器内部转换器实现html解码*/
htmlDecode:function (text){
//1.首先动态创建一个容器标签元素,如DIV
var temp = document.createElement("div");
//2.然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持)
temp.innerHTML = text;
//3.最后返回这个元素的innerText(ie支持)或者textContent(火狐,google支持),即得到经过HTML解码的字符串了。
var output = temp.innerText || temp.textContent;
temp = null;
return output;
}
};
1 var HtmlUtil = {
2 /*1.用浏览器内部转换器实现html转码*/
3 htmlEncode:function (html){
4 //1.首先动态创建一个容器标签元素,如DIV
5 var temp = document.createElement ("div");
6 //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐,google支持)
7 (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
8 //3.最后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串了
9 var output = temp.innerHTML;
10 temp = null;
11 return output;
12 },
13 /*2.用浏览器内部转换器实现html解码*/
14 htmlDecode:function (text){
15 //1.首先动态创建一个容器标签元素,如DIV
16 var temp = document.createElement("div");
17 //2.然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持)
18 temp.innerHTML = text;
19 //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐,google支持),即得到经过HTML解码的字符串了。
20 var output = temp.innerText || temp.textContent;
21 temp = null;
22 return output;
23 }
24 };
复制代码
测试:
1 var html = "<br>aaaaaa<p>bbbb</p>";
2 var encodeHtml = HtmlUtil.htmlEncode(html);
3 alert("encodeHtml:" + encodeHtml);
4 var decodeHtml = HtmlUtil.htmlDecode(encodeHtml);
5 alert("decodeHtml:" + decodeHtml);
运行结果:
二、用正则表达式进行转换处理
使用正则表达式也是一种常用的处理方式,实现原理就是使用替换的方式来实现转码和解码,转码时把<>,空格符,&,',""替换成html编码,解码就把html编码替换成对应的字符,实现代码如下:
复制代码
1 var HtmlUtil = {
2 /*1.用正则表达式实现html转码*/
3 htmlEncodeByRegExp:function (str){
4 var s = "";
5 if(str.length == 0) return "";
6 s = str.replace(/&/g,"&");
7 s = s.replace(/</g,"<");
8 s = s.replace(/>/g,">");
9 s = s.replace(/ /g," ");
10 s = s.replace(/\'/g,"'");
11 s = s.replace(/\"/g,""");
12 return s;
13 },
14 /*2.用正则表达式实现html解码*/
15 htmlDecodeByRegExp:function (str){
16 var s = "";
17 if(str.length == 0) return "";
18 s = str.replace(/&/g,"&");
19 s = s.replace(/</g,"<");
20 s = s.replace(/>/g,">");
21 s = s.replace(/ /g," ");
22 s = s.replace(/'/g,"\'");
23 s = s.replace(/"/g,"\"");
24 return s;
25 }
26 };
复制代码
测试代码:
1 var html = "<br>ccccc<p>aaaaa</p>";
2 var encodeHTML = HtmlUtil.htmlEncodeByRegExp(html);
3 alert("用正则表达式进行html转码,encodeHTML:" + encodeHTML);
4 var decodeHTML = HtmlUtil.htmlDecodeByRegExp("用正则表达式进行html解码:" + encodeHTML);
5 alert(decodeHTML);
测试结果:
三、封装HtmlUtil工具类
将两种方式封装HtmlUtil工具类,方便在开发中使用,完整代码如下:
复制代码
1 var HtmlUtil = {
2 /*1.用浏览器内部转换器实现html转码*/
3 htmlEncode:function (html){
4 //1.首先动态创建一个容器标签元素,如DIV
5 var temp = document.createElement ("div");
6 //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐,google支持)
7 (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
8 //3.最后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串了
9 var output = temp.innerHTML;
10 temp = null;
11 return output;
12 },
13 /*2.用浏览器内部转换器实现html解码*/
14 htmlDecode:function (text){
15 //1.首先动态创建一个容器标签元素,如DIV
16 var temp = document.createElement("div");
17 //2.然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持)
18 temp.innerHTML = text;
19 //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐,google支持),即得到经过HTML解码的字符串了。
20 var output = temp.innerText || temp.textContent;
21 temp = null;
22 return output;
23 },
24 /*3.用正则表达式实现html转码*/
25 htmlEncodeByRegExp:function (str){
26 var s = "";
27 if(str.length == 0) return "";
28 s = str.replace(/&/g,"&");
29 s = s.replace(/</g,"<");
30 s = s.replace(/>/g,">");
31 s = s.replace(/ /g," ");
32 s = s.replace(/\'/g,"'");
33 s = s.replace(/\"/g,""");
34 return s;
35 },
36 /*4.用正则表达式实现html解码*/
37 htmlDecodeByRegExp:function (str){
38 var s = "";
39 if(str.length == 0) return "";
40 s = str.replace(/&/g,"&");
41 s = s.replace(/</g,"<");
42 s = s.replace(/>/g,">");
43 s = s.replace(/ /g," ");
44 s = s.replace(/'/g,"\'");
45 s = s.replace(/"/g,"\"");
46 return s;
47 }
48 };
javascript处理HTML的Encode(转码)和Decode(解码)总结的更多相关文章
- javascript处理HTML的Encode(转码)和解码(Decode)
HTML的Encode(转码)和解码(Decode)在平时的开发中也是经常要处理的,在这里总结了使用javascript处理HTML的Encode(转码)和解码(Decode)的常用方式 一.用浏览器 ...
- C#二维码生成与解码(二)
本文内容在<C#二维码生成与解码>的基础上增加了纠错级别和Logo图标加入,增加了二维码的功能.关于透明度在这里没有单独显现,因为在颜色里面就已经包含,颜色值由8位8进制构成,最前面的两位 ...
- Java二维码生成与解码
基于google zxing 的Java二维码生成与解码 一.添加Maven依赖(解码时需要上传二维码图片,所以需要依赖文件上传包) <!-- google二维码工具 --> &l ...
- C#实现二维码生成与解码
前几天公司内部分享了一个关于二维码的例子,觉得挺好玩的,但没有提供完整的源码.有时候看到一个好玩的东西,总想自己Demo一个,于是抽空就自己研究了一下. 一.二维码的原理 工欲善其事,必先利其器.要生 ...
- windows8运行zxing源码 生成与解码二维码 详解(含注释与图解可直接运行)
1 下载zxing2.1 2 本代码配置环境:eclipse.java1.6.windows8.zxing2.1 3 解压后将文件夹里面core/src下面的com文件夹导入到eclipse工程(工程 ...
- HTML-DEV-ToolLink(常用的在线字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码等工具,支持在线搜索和Chrome插件。)
HTML-DEV-ToolLink:https://github.com/easonjim/HTML-DEV-ToolLink 常用的在线字符串编解码.代码压缩.美化.JSON格式化.正则表达式.时间 ...
- 为什么请求时,需要使用URLEncode做encode转码操作(转)
什么要对url进行encode 发现现在几乎所有的网站都对url中的汉字和特殊的字符,进行了urlencode操作,也就是: http://hi.baidu.com/%BE%B2%D0%C4%C0%C ...
- JavaScript的学习--生成二维码
有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 具体用法 ...
- JavaScript之通用addLoadEvent代码源码
在执行javascript代码时 很多情况下 我们是希望代码在网页加载完毕后立刻进行的 大家可能会立刻想到使用window.onload时间处理函数,然后通过 window.onload=functi ...
随机推荐
- ABP理论学习之审计日志
返回总目录 本篇目录 介绍 配置 通过特性开启/关闭 注意 我项目中的例子 介绍 维基百科说: "审计跟踪(也叫审计日志)是与安全相关的按照时间顺序的记录,记录集或者记录源,它们提供了活动序 ...
- 写一个脚本,自动启动tomcat
我的服务器是使用tomcat的,时不时tomcat的进程会突然结束掉,不知道为什么,从日志上看也没有任何可疑之处,貌似就这样突然没了,接下来的日志都是重新启动tomcat之后打印的了.原因找不到,但要 ...
- Sharing A Powerful Tool For Calculate Code Lines
最近正好需要统计下某项目代码行数,然后就找代码行数统计工具.以前找到过一个正则表达式,但是只有在VS2010下有用,VS2012和VS2013下的统计就不好使了. 接着搜索了一下代码行数统计绿色工具免 ...
- Android笔记——数据库升级与降级
一.概述 SQLite是Android内置的一个很小的关系型数据库.SQLiteOpenHelper是一个用来辅助管理数据库创建和版本升级问题的抽象类.我们可以继承这个抽象类,实现它的一些方法来对数据 ...
- 高德地图-搜索服务-POI搜索
高德地图-搜索服务-POI搜索 之前公司项目收货地址仿饿了么的收货地址,结果发现自己实现的关键字搜索和周边搜索,搜索到的poi列表跟饿了么的并不完全一样,后来考虑了下,应该是搜索的范围.类型之类的设置 ...
- 移动端页面按手机屏幕分辨率自动缩放的js
<script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.scr ...
- python 邮件基础篇
python 操作邮件,不是很方便,说实话还不是理解的特别透彻,这次想把自己碰到的东西总结下来 邮件有imap,pop,imap协议,这次使用的是imap4协议,主要用了imap4和mail类, 代码 ...
- 关于xcode导出设置中的一些概念
Development Certificates:在电脑通过秘钥串生成一个私人秘钥,这就是:CertificateSigningRequest.certSigningRequest 简称CSR,团队中 ...
- Android搜索框效果
转载:http://blog.csdn.net/walker02/article/details/7917392 需求:项目中的有关搜索的地方,加上清空文字的功能,目的是为了增加用户体验,使用户删除文 ...
- 【开源】OSharp框架解说系列(3):扩展方法
OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...