前言:
在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. ,net运行框架

    .NET FrameWork框架 是一套应用程序开发框架,主要目的提供一个开发模型. 主要的两个组件: 公共语言运行时(Common Language Runtime)(CLR): 提供内存管理.线程 ...

  2. 信息学院第九届ACM程序设计竞赛题解

     A: 信号与系统 Time Limit: 1000 MS Memory Limit: 65536 KBTotal Submit: 238 Accepted: 44 Page View: 69 Des ...

  3. Birt时间参数添加My97日历控件

    首先,思路: 引用My97.js然后为时间参数的textbox添加onclick事件 1.将My97添加到项目中的webcontent目录下(如图:) 2.添加My97引用 在项目路径下找到该文件\w ...

  4. P2P编程(十)

    此为网络编程的一个系列,后续会把内容补上....

  5. Android LayoutInflater&LayoutInflaterCompat源码解析

    本文分析版本: Android API 23,v4基于 23.2.1 1 简介 实例化布局的XML文件成相应的View对象.它不能被直接使用,应该使用getLayoutInflater()或getSy ...

  6. (二)学习CSS之cursor属性

    参考:http://www.w3school.com.cn/tiy/t.asp?f=csse_zindex cursor 属性规定要显示的光标的类型(形状). <html> <bod ...

  7. ASDL + WN725N 配置无线AP

    1.  ASDL 正常拨号上网 2.  安装TP-LINK无线客户端应用程序 打开之后选择模拟AP 如下图设置----应用 3.  本地连接----属性----高级 如下图设置 4.  宽带连接--- ...

  8. SELinux的故障排除一例

    刚刚采用Puppet部署了dokuwiki,不过配置完成后报错: DokuWiki Setup Error The datadir ('pages') at /pages is not found, ...

  9. NIOP1995 石子合并(区间DP)

    状态转移方程在代码中标出 本题注意是圆形,所以之前要预先处理一下s数组.处理之后总长度为2*n-1.第一个合并的起点有n个,所以总的方案数是n 注释在代码中标出 http://www.rqnoj.cn ...

  10. 了解常见的 Azure 灾难

    以下内容涵盖多种不同类型的灾难情况.数据中心故障不是应用程序范围内发生故障的唯一原因.设计不良或管理错误也会导致中断.请在恢复计划的设计和测试阶段设想可能导致故障的原因,这样做很重要.一个好的计划可充 ...