Парсер JavaScript для DOM - PullRequest
Новая
       11

Парсер JavaScript для DOM

6 голосов
/ 03 марта 2012

У нас есть специальное требование в проекте, где мы должны проанализировать строку HTML (из ответа AJAX) на стороне клиента только через JavaScript . Правильно нет синтаксического анализа в PHP или Java! Я проходил StackOverflow всю неделю и пока не нашел приемлемого решения.

Более подробная информация о требованиях:

  • Мы можем использовать любую библиотеку (предпочтительно dojo и / или jQuery) или перейти на родную!

  • Нам нужно проанализировать Весь HTML-документ, который мы получаем в виде строки , включая <head> и <body>.

  • Нам также нужно периодически сериализовать проанализированные структуры 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. A TinyMCE Parser . Проблема? Мы должны обязательно включить редактора, я думаю. Как насчет разбора HTML, когда нам не нужен редактор?

  2. Парсер Джона Ресига . Должно быть нашим лучшим выбором. К сожалению, синтаксический анализатор падает, когда ему передается все содержимое страницы!

  3. jQuery $ (htmlString) или dojo.toDom (htmlString). Оба полагаются на DocumentFragment и, следовательно, поглощают <head> и <body>!

EDIT : мы хотим сериализовать HTML, чтобы мы могли перехватывать определенные пользовательские HTML-коммнеты через RegExp. Нам нужно дать пользователям возможность редактировать мета-теги, теги заголовков и т. Д., Следовательно, парсер HTML

Да, и я чувствую, что меня убьют в переполнении стека, даже если я просто намек при разборе HTML через RegExp !!!

Ответы [ 5 ]

10 голосов
/ 03 марта 2012

Вы можете использовать текущий документ, не добавляя к нему никаких узлов.

Попробуйте что-то вроде этого: 

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/

1 голос
/ 03 марта 2012

Поскольку HTML по сути является XML, вы можете использовать jquery parseXML 

var dom = $.parseXML(html);

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

Edit:

Если вы хотите вернуть его обратно в строку, вам нужно будет использовать плагин 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;      

  };
1 голос
/ 03 марта 2012

Я бы предложил решение, состоящее из двух частей, согласно которому вы считываете теги, которые jQuery не будет анализировать для вас, а затем передаете остаток в jQuery. Если вы ищете решение с чистым javascript для анализа структуры данных HTML, jQuery, вероятно, будет лучшим выбором, поскольку в нем есть много встроенных функций для манипулирования данными. Вы можете создать свой плагин как плагин jQuery, который может быть вызван через: $ .parser или что-то в этом роде. Если вы расширили jQuery своей собственной функцией для анализа данных, вы также можете вернуть расширенный объект jQuery, который содержит функции для чтения определенных элементов данных даже из заголовка, поскольку вы можете вручную анализировать информацию ... и сохранять ее в том же объекте. .

0 голосов
/ 03 марта 2012

Если вы хотите, чтобы полный синтаксический анализатор, который не полагается на какую-либо существующую вещь в браузере, загружал ваш интерпретатор, то HTML-анализатор в dom.js - на высшем уровне. Его цель - анализ html для использования в DOM, размещенном на javascript, поэтому он должен учитывать как спецификации DOM, так и необходимость разбора и использования результатов в js, при этом не требуя использования каких-либо существующих инструментов, кроме базовой JS. Это работает в node.js или даже в jsshell или web-работниках spidermonkey. https://github.com/andreasgal/dom.js

Он также имеет сериализационную часть, но для этого вам нужно взять на себя обязательство использовать больше, чем просто парсерную часть. Вы можете найти отдельные сериализаторы, которые работают с любой структурой, подобной DOM.

0 голосов
/ 03 марта 2012

Я не знаю, зачем кому-то это нужно, но я предлагаю вам просто выбросить свой источник в iframe. Браузер может сделать разбор за вас. Вы даже можете запускать DOM-запросы к результату.

...