前言:
在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 = "&lt;strong&gt;oijksdjfiojwioejriowejrwejiorjwer&lt;img src=&quot;/_files_/wysiwyg/image/20140723/20140723200343_557.jpg&quot; alt=&quot;&quot; /&gt;&lt;/strong&gt; ";

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代码的更多相关文章

  1. 【JAVA系列】使用JavaScript实现网站访问次数统计代码

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[JAVA系列]使用JavaScript实现网站 ...

  2. 老菜鸟学习:Javascript 将html转成pdf

    起因:处理某个项目,需要把页面上的数据(订单.运单)等导出pdf. 第一个想法:从 Java 层去想.但是经过各种资料查询和实践,第一个想法宣告放弃: 幸好客户的要求是:导出的 pdf 尺寸要和打印的 ...

  3. matrix-gui-2.0 将javascript文件夹改成js文件夹

    /******************************************************************************** * matrix-gui-2.0 将 ...

  4. gRaphael——JavaScript 矢量图表库:两行代码实现精美图表

    gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的 Javascript 库,基于强大的 Raphael 矢量图形库.你只需要编写几行简单的代码就能创建出精美的条形图.饼图.点图和曲 ...

  5. JavaScript 使用反斜杠对代码行进行折行

    JavaScript对代码行进行折行-使用反斜杠 您可以在文本字符串中使用反斜杠对代码行进行换行.下面的例子会正确地显示: <html> <head> <script t ...

  6. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  7. 《JavaScript模式》第6章 代码复用模式

    @by Ruth92(转载请注明出处) 第6章:代码复用模式 GoF 在其著作中提出的有关创建对象的建议原则: -- 优先使用对象组合,而不是类继承. 传统模式:使用类继承: 现代模式:"类 ...

  8. javascript——拖拽(完整兼容代码)

    拖拽,是JS经常会用到的效果,在网上有很多的这样那样的拖拽效果,但其中往往大多有各种各养的问题,功能不全,无法兼容,而且修改的时候 也是十分麻烦. 其实拖拽的原理很简单,无非是鼠标的三个动作的解析,以 ...

  9. JavaScript谁动了你的代码

    到目前为止,同学你知道了JavaScript的历史,也了解其"你想是啥就是啥"的变量系统.相信凭借你深厚的Java或者C++功底,再加上程序员特有的自傲气质,你肯定会信心满满:自信 ...

随机推荐

  1. RMI、RPC、SOAP通信技术介绍及比对

    1.RMI 使用java的程序员,对于RMI(RemoteMethod Invoke,远程方法调用)一定不陌生,在java中,为了在分布式应用开发时,能够方便调用远程对象,java提供了RMI的API ...

  2. Java中的volatile

    关于volatile 在JVM 1.2之前,Java的内存模型实现总是从主存读取变量,是不需要进行特别的注意的.而随着JVM的成熟和优化,现在在多线程环境下 volatile关键字的使用变得非常重要. ...

  3. Java多态中的注意事项

    1.“覆盖”私有方法 public class PrivateOverride { private void f() { print("private f()"); } publi ...

  4. [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.5.3

    Let $\scrM$ be a $p$-dimensional subspace of $\scrH$ and $\scrN$ its orthogonal complement. Choosing ...

  5. ASCII编码:Linux&Windows

    我们的服务器为linux系统,日志中的字段通常会用不同分隔符来做分隔,在不同操作系统编码格式下查看也会有不同的体现,甚至会出现所谓的乱码.我在xshell5下常用的编码格式Unicode(UTF-8) ...

  6. Hackers' Crackdown( UVA UVA 11825状压dp)

    题意:N台电脑,现在有N种服务,现在你可以在每台电脑终止一项服务,他和他相邻的电脑都会被关闭,如果一项服务在所有电脑都没运行,该项服务成功被破坏,问最多能破坏几种服务. 分析:把n个集合分成尽量多组, ...

  7. jqgrid使用sql row_number进行分页

    背景 系统中使用了jqgrid的展示,现在要处理10w+的数据量 现状 使用了全查询的,查询到了10w+的数据放到了datatable中,每次页面刷新需要9秒多,并且传递给另一个dll来处理一些事情. ...

  8. 10 steps to get Ruby on Rails running on Windows with IIS FastCGI- 摘自网络

    Since the original tech preview release of FastCGI last year, we've been seeing a lot of requests fo ...

  9. Redis的探究

    之前大四时候实习的公司有使用过Redis,不过那时所有配置均由主管完成了,而我也只是处于能使用的阶段. 时隔1年多,近期回想起这货,在研究中,想把它整合进现在公司的网站系统中,做做数据快照(已完成)和 ...

  10. [OC Foundation框架 - 17] copy语法

    一个对象使用copy或mutableCopy方法可以创建对象的副本 1.copy 需要实现NSCopying协议 创建出来的是不可变副本,如NSString, NSArray, NSDictionar ...