zoukankan      html  css  js  c++  java
  • 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 = "&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]…
     
  • 相关阅读:
    [VueJS + Typescript] Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS
    便利店选址
    spoj 1811 Longest Common Substring (后缀自动机)
    sharepoint 2013 根据网站模版创建网站,并赋值网站权限 create a site by custom site template
    一则 ORA-00471 处理方法
    好端端的项目重新运行的时候却不行了!!!
    C语言指针和数组知识总结(下)
    Java EE登陆界面生成随机数防止恶意注册或者登录
    ASP.NET获取上传图片的大小
    Not able to reset SmartRF04DD
  • 原文地址:https://www.cnblogs.com/qiangspecial/p/3863873.html
Copyright © 2011-2022 走看看