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++功底,再加上程序员特有的自傲气质,你肯定会信心满满:自信 ...
随机推荐
- Gentoo源码安装图解
Gentoo源码安装 一.前期准备 (1)下载以下三个文件 二.配置安装环境 (1)用光盘引导到LiveCD环境 (2)配置当前LiveCD环境的网络 安装Gentoo时,服务器引导的LiveCD环境 ...
- jquery Ajax应用总结
常见应用: 下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET&quo ...
- (Java)《head first java》值得Java或面向对象基础的新手看。
看完这本书后本人收获良多. 内容对Java以及面向对象的入门者非常友好. 抽象的内容惯用图解的方法来剖析,通俗易懂 之前看C#入门经典的面向对象时,依然浓浓的一头雾水. (1)很不解为何实例化要写成A ...
- 《深入Java虚拟机学习笔记》- 第10章 栈和局部变量操作
Java栈和局部变量操作 Java虚拟机是基于栈的机器,几乎所有Java虚拟机的指令都与操作数栈相关.栈操作包括把常量压入操作数栈.执行通用的栈操作.在操作数栈和局部变量之间往返传输值. 1常量入栈操 ...
- 17个Web前端开发工程师必看的国外网站
Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要,无论是学习新技术,还是寻找免费资源与工具,设计博客都是很不错的去处. 1. Smashing Magazine S ...
- Code First 更新数据库结构(简单实现方法:会删除原来的数据)
之前在 http://www.cnblogs.com/mmcmmc/p/3833265.html 写到关于“Code First 更新数据库结构”的东西. 可是由于某种原因,新手们会出现各种问题,好了 ...
- jqgrid 中设置列不排序
背景 今天在做系统的功能时,当时有这么个需求:在添加了一行数据时,原本的排序的自动就不能再排序,也就是排序失效. 1. 使用onSortCol事件禁止排序列 当时使用了初始化时,使用onSortCol ...
- [iOS基础控件 - 5.4] 广告分页代码(UIScrollView制作)
A.概念 例子就是桌面的APP列表,当APP数量超过一个屏幕,自动进行分页 B.实现思路 1.创建一个UIScrollView,这里设置为宽度跟屏幕相同,高度1/4屏幕高度左右 2.使用代码在UI ...
- CSS区块、浮动、定位、溢出、滚动条
CSS中区块的使用 CSS中浮动的使用 CSS中定位的使用 CSS中溢出的使用 CSS中滚动条的使用 17.1 CSS中区块的使用 属性名称 属性值 ...
- Android 命名规范和编码规范
简明概要 多写注释 一.关于命名规范 对于开发项目来说肯定是要有统一的规范,然而命名规范需要做到哪几点呢? 答: 首先,不能反人类. 再来就是,要望文而知其意. 下面就来说说具体该怎么去规范我们的代 ...