用于DOM的JavaScript解析器

问题描述:

我们在项目中有一个特殊的需求,我们必须通过JavaScript解析HTML(来自AJAX响应)客户端的字符串(仅限于)。那是正确的在PHP或Java中没有解析!我已经经历了整个一周的*,但还没有得到一个可接受的解决方案。用于DOM的JavaScript解析器

上要求更多的细节:

  • 我们可以使用任何库(最好是Dojo和/或jQuery的),或入乡随俗!

  • 我们需要分析,我们得到一个字符串,包括<head><body>整个HTML文档。

  • 我们还需要将经过分析的DOM结构有时序列化为字符串。

  • 最后,我们不想将解析的DOM附加到当前文档。相反,我们会将其发送回服务器进行永久存储。

例如:我们需要这样的东西

var dom = HTMLtoDOM('<html><head><title> This is the old title. </title></head></html>'); 
    dom.getElementsByTagName('title')[0].innerHTML = "This is a new Title"; 

随着我的研究,这是我们的选择:

  1. 一个TinyMCE Parser。问题?我们需要包含一位我认为的编辑。如何在不需要编辑器的情况下解析HTML?

  2. John Resig's Parser。应该是我们最好的选择。不幸的是,当给定页面的全部内容时,解析器崩溃!

  3. jQuery $(htmlString)或dojo.toDom(htmlString)。两者都依靠文档分区,因此吞噬了<head><body>

编辑:我们想要序列化的HTML,所以我们可以通过正则表达式捕获某些自定义HTML Commnets。我们需要让用户有机会编辑元标签,标题标签等,因此HTML解析器。

哦,我觉得我会在堆栈溢出中遇害,即使我只是提示在通过RegExp解析HTML!

+0

创建一个IFRAME节点并把它放在那里? – 2012-03-02 21:01:51

+0

但是..我不明白你为什么要在将已经序列化的HTML字符串发送到服务器之前解析它。你必须将它重新序列化回一个字符串,然后传回给服务器,对吧? – 2012-03-02 21:02:52

+0

@JensRoland我们想要从RegExp中捕获某些自定义HTML注释,然后进行序列化。我们希望让用户能够编辑标题标签,元标签等,从而进行DOM解析! – 2012-03-02 21:13:12

您可以利用当前文档而不添加任何节点。

尝试这样:

function toNode(html) { 
    var doc = document.createElement('html'); 
    doc.innerHTML = html; 
    return doc; 
} 

var node = toNode('<html><head><title> This is the old title. </title></head></html>'); 

console.log(node);​ 

http://jsfiddle.net/6SvqA/3/

+0

现在_this_是优雅的。 +1!但是我们仍然存在这样的问题:解析DOM是初始问题的错误方法。但这不是这个答案的错。 – jwueller 2012-03-02 21:34:28

+2

@elusive它可能是值得信赖的用户,如外地代理或其他东西,你永远不知道。 – 2012-03-02 21:41:47

+0

@elusive用户非常信任! – 2012-03-03 13:09:31

我会建议一个2部分的解决方案,从中读取jQuery不会为您解析的标记,然后将其余部分传递给jQuery。如果你正在寻找一个纯粹的JavaScript解析HTML数据结构,jQuery可能是你最好的选择,因为它有许多内置的操作数据的功能。你实际上可以将你的插件作为一个jQuery插件来构建,可以通过$ .parser或者其他类似的东西来调用它。如果使用自己的函数扩展jQuery来解析数据,还可以返回一个扩展jQuery对象,该对象包含函数,甚至可以从头中读取特定的数据元素,因为您可以手动解析...信息并将其存储在同一个对象中。

因为HTML本质上是XML,你可以使用jQuery parseXML

var dom = $.parseXML(html); 

$('title', dom).text("This is a new Title"); 

编辑:

如果你想要得到它放回一个字符串,你需要使用XML插件,但我无法找到它的原始源,那就是:

/** 
* jQuery xml plugin 
* Converts XML node(s) to string 
* 
* Copyright (c) 2009 Radim Svoboda 
* Dual licensed under the MIT (MIT-LICENSE.txt) 
* and GPL (GPL-LICENSE.txt) licenses. 
* 
* @author Radim Svoboda, user Zzzzzz 
* @version 1.0.0 
*/ 


/** 
* Converts XML node(s) to string using web-browser features. 
* Similar to .html() with HTML nodes 
* This method is READ-ONLY. 
* 
* @param all set to TRUE (1,"all",etc.) process all elements, 
* otherwise process content of the first matched element 
* 
* @return string obtained from XML node(s) 
*/   
jQuery.fn.xml = function(all) { 

    //result to return 
    var s = ""; 

    //Anything to process ? 
    if(this.length) 

    //"object" with nodes to convert to string 
    (
     ((typeof all != 'undefined') && all) ? 
     //all the nodes 
     this 
     : 
     //content of the first matched element 
     jQuery(this[0]).contents() 
    ) 
    //convert node(s) to string 
    .each(function(){ 
    s += window.ActiveXObject ?//== IE browser ? 
     //for IE 
     this.xml 
     : 
     //for other browsers 
     (new XMLSerializer()).serializeToString(this) 
     ; 
    }); 


    return s;  

    }; 
+0

这会保留HTML文档结构吗?例如

和标签? – 2012-03-02 21:11:53
+0

是不是'jQuery.parseXML()'意味着用于XML?这里我们正在讨论HTML。它们不兼容。 – jwueller 2012-03-02 21:15:28

+0

据我所知,但测试取决于你。我用这个类似的情况,迄今没有问题:) – 2012-03-02 21:15:54

我不知道为什么有人应该需要这个,但我建议你只是转储源到iframe。浏览器可以为你解析。你甚至可以对结果运行DOM查询。

+0

是的,我试过了!但请参考我们可能需要将DOM序列化回字符串的点。我们如何为iframe做到这一点?我们正在为此定制CMS,其中可编辑区域将通过自定义HTML注释进行标记。 – 2012-03-02 21:10:52

+0

@Dream Factory:[jQuery.fn.html()](http://api.jquery.com/html)怎么样? – jwueller 2012-03-02 21:13:26

如果你想有一个完整的解析器,不是依靠现有的一些东西在浏览器中引导你的解释,在dom.js HTML解析器是一流的。它的全部目的是解析HTML以用于JavaScript托管的DOM,因此它必须兼顾DOM规范以及需要解析和使用js中的结果,而不是假设除了基本JS之外的任何现有工具。它可以在node.js或spidermonkey的jsshell或webworkers中工作。 https://github.com/andreasgal/dom.js

它也有序列化的一部分,但要做到这一点,您需要承诺不仅仅使用解析器部分。您可以找到独立的序列化程序,尽管可以使用任何类似于DOM的结构。

+0

不错,但它是客户? – 2012-03-03 13:45:51