Unescape HTML entities in Javascript Unescape HTML转成html代码
在javascript里面动态创建标准dom对象一般使用:
var obj = document.createElement('div');
然后再给obj设置一些属性。
但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了
伪代码:var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>');
那么今天的目的就是教大家怎么去实现一个这样的方法用来把字符串直接转换为标准的dom对象
start:
其实实现这样的一个转换是很简单的,这里主要是利用了一个属性innerHTML.
innerHTML,我相信大家都使用过,特别是动态往一个元素里面插内容时使用,这里我还是在介绍下innerHTML,方便于还不太熟悉的人。
innerHTML不是w3c标准,是由ie发明创造出来的,但是由于这个属性的方便性,和当时微老大的地位,其它非ie浏览器也内置了innerHTML并给出了支持。
虽然innerHTML不是w3c标准,但是却是一个事实标准,这个事实标准很重要,也就是目前主流浏览器都支持innerHTML,自然就做到了兼容多浏览器。
function parseDom(arg) { // Unescape HTML entities in Javascript
var e = document.createElement("div");
e.innerHTML = arg;
return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
短短几行代码就实现了转换,我们首先用标准的方法创建一个div出来,在用innerHTML来插入一个元素,其实也就是利用浏览器自己的内核算法来实现的一个转换。在用childNodes返回出来。
这样我们就完成了一个字符串到标准dom的转换,巧妙的利用浏览器本身的算法,可以用简单少量的代码来完成大量复杂的转换,我们不用去解析字符串,而是交给浏览器自己来完成,这样既准确又无误。
使用:
var htmContent = "<strong>oijksdjfiojwioejriowejrwejiorjwer<img src="/_files_/wysiwyg/image/20140723/20140723200343_557.jpg" alt="" /></strong> ";
function parseDom(arg) { // Unescape HTML entities in Javascript
var e = document.createElement("div");
e.innerHTML = arg;
return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
console.log(parseDom(htmContent));
注意:
childNodes返回的是一个类似数组的list。所以如果是一个元素,要使用这个dom需要这样使用obj[0]。如果是多个同级的dom转换,可以这样使用obj[0]、obj[1]…
Unescape HTML entities in Javascript Unescape HTML转成html代码的更多相关文章
- 【JAVA系列】使用JavaScript实现网站访问次数统计代码
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[JAVA系列]使用JavaScript实现网站 ...
- 老菜鸟学习:Javascript 将html转成pdf
起因:处理某个项目,需要把页面上的数据(订单.运单)等导出pdf. 第一个想法:从 Java 层去想.但是经过各种资料查询和实践,第一个想法宣告放弃: 幸好客户的要求是:导出的 pdf 尺寸要和打印的 ...
- matrix-gui-2.0 将javascript文件夹改成js文件夹
/******************************************************************************** * matrix-gui-2.0 将 ...
- gRaphael——JavaScript 矢量图表库:两行代码实现精美图表
gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的 Javascript 库,基于强大的 Raphael 矢量图形库.你只需要编写几行简单的代码就能创建出精美的条形图.饼图.点图和曲 ...
- JavaScript 使用反斜杠对代码行进行折行
JavaScript对代码行进行折行-使用反斜杠 您可以在文本字符串中使用反斜杠对代码行进行换行.下面的例子会正确地显示: <html> <head> <script t ...
- html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
- 《JavaScript模式》第6章 代码复用模式
@by Ruth92(转载请注明出处) 第6章:代码复用模式 GoF 在其著作中提出的有关创建对象的建议原则: -- 优先使用对象组合,而不是类继承. 传统模式:使用类继承: 现代模式:"类 ...
- javascript——拖拽(完整兼容代码)
拖拽,是JS经常会用到的效果,在网上有很多的这样那样的拖拽效果,但其中往往大多有各种各养的问题,功能不全,无法兼容,而且修改的时候 也是十分麻烦. 其实拖拽的原理很简单,无非是鼠标的三个动作的解析,以 ...
- JavaScript谁动了你的代码
到目前为止,同学你知道了JavaScript的历史,也了解其"你想是啥就是啥"的变量系统.相信凭借你深厚的Java或者C++功底,再加上程序员特有的自傲气质,你肯定会信心满满:自信 ...
随机推荐
- textview的上下滑动效果
1.xml文件中 <TextView … android:scrollbars="vertical" ../> 2.java文件中 textview.se ...
- Linux kernel Makefile for ctags
/********************************************************************** * Linux kernel Makefile for ...
- 剑指Offer:从第一个字符串中删除第二个字符串中出现过的所有字符
// 从第一个字符串中删除第二个字符串中出现过的所有字符 #include <stdio.h> char* remove_second_from_first( char *first, c ...
- Handler一定要在主线程实例化吗?new Handler()和new Handler(Looper.getMainLooper())的区别?
一个帖子的整理: Handler一定要在主线程实例化吗?new Handler()和new Handler(Looper.getMainLooper())的区别如果你不带参数的实例化:Handler ...
- Swift数组的加法运算符用法:array1 += array2
var stringList1 = [String]() //创建String类型空数组 var stringList2 = ["1", "3", " ...
- STM32的can现场总线实验心得
最近在搞stm32实验板的can现场总线实验,之前只是搞过STC51的串口通信,相比之下,发觉can总线都挺复杂的.开始时,知道自己是新手,只知道can总线跟串行通信,485通信,I2C通信一样都是用 ...
- class0513(html基础加强)
内容:HTML.CSS 目标:掌握手写HTML实现一般难度的Web页面的能力(如网站注册表单),为ASP.Net学习打基础.坚持手写HTML,可视化设计只是一种自学的手段. 参考书:张孝祥<Ja ...
- 大规模Hadoop集群实践:腾讯分布式数据仓库(TDW)
TDW 是腾讯最大的离线数据处理平台.本文主要从需求.挑战.方案和未来计划等方面,介绍了TDW在建设单个大规模集群中采取的 JobTracker 分散化和 NameNode 高可用两个优化方案. TD ...
- HDU-4694 Professor Tian 概率DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4649 题意:给一个位运算的表达式,每个运算符和其后的运算数有一定概率不计算,求最后表达式的期望. 因为 ...
- HDU-4619 Warm up 2 二分匹配
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4619 一看就知道是二分匹配题目,对每个点拆点建立二分图,最后答案除2.因为这里是稀疏图,用邻接表处理. ...