Beste Weg, um zu analysieren, HTML in Javascript

Ich bin eine Menge ärger lernen RegExp und kommen mit einem guten Algorithmus, um dies zu tun. Ich habe diesen HTML-string, muss ich noch analysieren. Beachten Sie, dass, wenn ich analysieren, ist es immer noch ein string-Objekt und nicht noch HTML an den browser, wie ich brauche, um zu analysieren, bevor es dort ankommt. Die HTML sieht wie folgt aus:

<html>
  <head>
    <title>Geoserver GetFeatureInfo output</title>
  </head>
  <style type="text/css">
    table.featureInfo, table.featureInfo td, table.featureInfo th {
        border:1px solid #ddd;
        border-collapse:collapse;
        margin:0;
        padding:0;
        font-size: 90%;
        padding:.2em .1em;
    }
    table.featureInfo th {
        padding:.2em .2em;
        font-weight:bold;
        background:#eee;
    }
    table.featureInfo td{
        background:#fff;
    }
    table.featureInfo tr.odd td{
        background:#eee;
    }
    table.featureInfo caption{
        text-align:left;
        font-size:100%;
        font-weight:bold;
        text-transform:uppercase;
        padding:.2em .2em;
    }
  </style>

  <body>
    <table class="featureInfo2">
    <tr>
        <th class="dataLayer" colspan="5">Tibetan Villages</th>
    </tr>
    <!-- EOF Data Layer -->
    <tr class="dataHeaders">
        <th>ID</th>
        <th>Latitude</th>
        <th>Longitude</th>
        <th>Place Name</th>
        <th>English Translation</th>
    </tr>
    <!-- EOF Data Headers -->
    <!-- Data -->
    <tr>
    <!-- Feature Info Data -->
        <td>3394</td>
        <td>29.1</td>
        <td>93.15</td>
        <td>བསྡམས་གྲོང་ཚོ།</td>
        <td>Dam Drongtso </td>
    </tr>
    <!-- EOF Feature Info Data -->
    <!-- End Data -->
    </table>
    <br/>
  </body>
</html>

und ich brauche, um es zu bekommen wie diese:

3394,
29.1,
93.15,
བསྡམས་གྲོང་ཚོ།,
Dam Drongtso

Im Grunde ein array...noch besser wenn es passt nach seinem Feld Header und aus welcher Tabelle Sie sind irgendwie, die wie folgt Aussehen:

Tibetan Villages

ID
Latitude
Longitude
Place Name
English Translation

Finden sich JavaScript nicht unterstützt wunderbaren mapping war ein Mist und ich habe was ich will arbeiten bereits. Allerdings ist es sehr, SEHR hart codiert und ich denke, ich sollte wohl RegExp verwenden, um diese zu bewältigen besser. Leider habe ich eine echte harte Zeit :(. Hier ist meine Funktion zum analysieren von meiner saite (sehr hässlich IMO):

    function parseHTML(html){

    //Getting the layer name
    alert(html);
    //Lousy attempt at RegExp
    var somestring = html.replace('/m//\<html\>+\<body\>//m/',' ');
    alert(somestring);
    var startPos = html.indexOf('<th class="dataLayer" colspan="5">');
    var length = ('<th class="dataLayer" colspan="5">').length;
    var endPos = html.indexOf('</th></tr><!-- EOF Data Layer -->');
    var dataLayer = html.substring(startPos + length, endPos);

    //Getting the data headers
    startPos = html.indexOf('<tr class="dataHeaders">');
    length = ('<tr class="dataHeaders">').length;
    endPos = html.indexOf('</tr><!-- EOF Data Headers -->');
    var newString = html.substring(startPos + length, endPos);
    newString = newString.replace(/<th>/g, '');
    newString = newString.substring(0, newString.lastIndexOf('</th>'));
    var featureInfoHeaders = new Array();
    featureInfoHeaders = newString.split('</th>');

    //Getting the data
    startPos = html.indexOf('<!-- Data -->');
    length = ('<!-- Data -->').length;
    endPos = html.indexOf('<!-- End Data -->');
    newString = html.substring(startPos + length, endPos);
    newString = newString.substring(0, newString.lastIndexOf('</tr><!-- EOF Feature Info Data -->'));
    var featureInfoData = new Array();
    featureInfoData = newString.split('</tr><!-- EOF Feature Info Data -->');

    for(var s = 0; s < featureInfoData.length; s++){
        startPos = featureInfoData[s].indexOf('<!-- Feature Info Data -->');
        length = ('<!-- Feature Info Data -->').length;
        endPos = featureInfoData[s].lastIndexOf('</td>');
        featureInfoData[s] = featureInfoData[s].substring(startPos + length, endPos);
        featureInfoData[s] = featureInfoData[s].replace(/<td>/g, '');
        featureInfoData[s] = featureInfoData[s].split('</td>');
    }//end for

    alert(featureInfoData);

    //Put all the feature info in one array
    var featureInfo = new Array();
    var len = featureInfoData.length;
    for(var j = 0; j < len; j++){
        featureInfo[j] = new Object();
        featureInfo[j].id = featureInfoData[j][0];
        featureInfo[j].latitude = featureInfoData[j][1];
        featureInfo[j].longitude = featureInfoData[j][2];
        featureInfo[j].placeName = featureInfoData[j][3];
        featureInfo[j].translation = featureInfoData[j][4];
        }//end for 

    //This can be ignored for now...
        var string = redesignHTML(featureInfoHeaders, featureInfo);
        return string;

    }//end parseHTML

So wie Sie sehen können, wenn der Inhalt in diesem string überhaupt verändert, mein code wird schrecklich gebrochen. Ich möchte vermeiden, dass so viel wie möglich und versuchen, besseren code zu schreiben. Ich Schätze all die Hilfe und Ratschläge, die Sie mir geben können.

Wenn Sie zum generieren des HTML-Codes auf der server-Seite könntest du auch erzeugen, JSON sowie es und pass es in der HTML mit dem Inhalt. Sie nicht haben, zu analysieren, nichts.
Parsen von HTML (oder XML) mit regex ist fast nie eine gute Idee.
stackoverflow.com/questions/1732348/...
Es gibt eine goldene Regel SO: NICHT PARSEN von HTML MIT REGULÄREN AUSDRÜCKEN
Ich wiederhole: stackoverflow.com/questions/1732348/... Wenn unsere Herzen sind rein, wir können stampfen, Regexp Parsen von HTML in unserem Leben! Oder Tony kommen wird.

InformationsquelleAutor elshae | 2010-11-22

12

Können Sie jQuery leicht durchqueren den DOM und erstellen Sie ein Objekt mit der Struktur automatisch.
```
var $dom = $('<html>').html(the_html_string_variable_goes_here);
var featureInfo = {};

$('table:has(.dataLayer)', $dom).each(function(){
    var $tbl = $(this);
    var section = $tbl.find('.dataLayer').text();
    var obj = [];
    var $structure = $tbl.find('.dataHeaders');
    var structure = $structure.find('th').map(function(){return $(this).text().toLowerCase();});
    var $datarows= $structure.nextAll('tr');
    $datarows.each(function(i){
        obj[i] = {};
        $(this).find('td').each(function(index,element){
            obj[i][structure[index]] = $(element).text();
        });
    });
    featureInfo[section] = obj;
});
```
Working Demo

Den code können arbeiten mit mehreren Tabellen mit unterschiedlichen Strukturen im inneren.. und auch mehrere Daten-Zeilen in jeder Tabelle..

Den featureInfo halten wird die endgültige Struktur und Daten zugegriffen werden kann, wie
```
alert( featureInfo['Tibetan Villages'][0]['English Translation'] );
```
oder
```
alert( featureInfo['Tibetan Villages'][0].id );
```
Das ist wirklich schön code, den Sie an mich..aber was ich denke immer jeder ist die Tatsache, dass ich der Anzeige von HTML. Im Idealfall, wenn ich analysieren diese Zeichenfolge, es ist nicht "HTML", weil der browser es noch nicht gesehen hat. Ich habe versucht, über einige DOM-Methoden und wie vor und ist fehlgeschlagen. Dann merkte ich, wie kann ich mithilfe von DOM-Funktionen, wenn diese HTML wurde noch nicht an den browser gesendet...bin ich richtig oder fürchterlich verwirrt?
mit jQuery könnte man einen var dom = $(htmlstring); und es uns als Rahmen, um den rest des Codes, indem Sie Sie starten als $('table:has(.dataLayer)', dom). Aktualisierung der Antwort..
Wow, das ist wirklich genial und nett. Ich bin noch sehr neu in JavaScript, und es gibt eine Menge für mich zu lernen! Ich will durch diesen code und wenn ich es mit meiner app, ich werde es dich wissen lassen 🙂
nicht zu erwähnen, dass meine codes verwendet das jQuery framework.
Dass ich wusste, wie ich betaucht haben in jQuery ein bisschen, wie es zu sein scheint, die revolution von JavaScript :). Dein code funktioniert wunderbar und ich danke dir herzlich für das zeigen von mir, was verfügbar ist, die es gibt 🙂

InformationsquelleAutor Gabriele Petrioli
20

Führen Sie die folgenden Schritte:
1. Erstellen Sie eine neue documentFragment
2. Setzen Sie Ihre HTML-string in es
3. Verwenden von Auswahlbereichen, um zu bekommen, was Sie wollen
Warum all die Analyse der Arbeit - das wird nicht funktionieren, egal wie, da wird ein HTML - nicht HIERFÜR gültigen via RegExp - wenn man die besten HTML-parser verfügbar ist? (der Browser)

InformationsquelleAutor Ivo Wetzel

Den "richtigen" Weg, es zu tun ist mit DOMParser. Machen Sie es wie diese:

var parsed=new DOMParser.parseFromString(htmlString,'text/html');

Oder, wenn Sie sind besorgt über browser-Kompatibilität, verwenden Sie die polyfill auf die MDN-Dokumentation:

/*
 * DOMParser HTML extension
 * 2012-09-04
 * 
 * By Eli Grey, http://eligrey.com
 * Public domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

/*! @source https://gist.github.com/1129031 */
/*global document, DOMParser*/

(function(DOMParser) {
    "use strict";

    var
      DOMParser_proto = DOMParser.prototype
    , real_parseFromString = DOMParser_proto.parseFromString
    ;

    //Firefox/Opera/IE throw errors on unsupported types
    try {
        //WebKit returns null on unsupported types
        if ((new DOMParser).parseFromString("", "text/html")) {
            //text/html parsing is natively supported
            return;
        }
    } catch (ex) {}

    DOMParser_proto.parseFromString = function(markup, type) {
        if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
            var
              doc = document.implementation.createHTMLDocument("")
            ;
                if (markup.toLowerCase().indexOf('<!doctype') > -1) {
                    doc.documentElement.innerHTML = markup;
                }
                else {
                    doc.body.innerHTML = markup;
                }
            return doc;
        } else {
            return real_parseFromString.apply(this, arguments);
        }
    };
}(DOMParser));

es funktioniert nicht auf ie9, SCRIPT600: Invalid target-element für diese operation.
Sorry, aber ich werde nicht Arbeit auf die erste IE9-Kompatibilität. Es wird benutzt, um weniger als 1% der Menschen, und die ist wirklich mehr ärger als es Wert ist.
warum haben Sie sich entschieden, zu verwenden HTMlHtmlElement rathe, als: var iframe= document.createElement("iframe"); iframe.innerHTML = markup; ?
Ich habe nicht schreiben den code in den zweiten Teil dieser Antwort, es ist von den Männern Dokumentation

InformationsquelleAutor markasoftware

5

Ändern Sie den serverseitigen code, wenn Sie können (hinzufügen, JSON)

Wenn du bist diejenige, die erzeugt den resultierenden HTML-Code auf der server-Seite könnte man auch generieren, ein JSON-es und pass es im HTML-Code mit dem Inhalt. Sie nicht haben, zu analysieren, alles auf der client-Seite und alle Daten sofort zur Verfügung, um Ihre client-Skripts.

Könnte man leicht JSON in table element als data Attribut-Wert:
```
<table class="featureInfo2" data-json="{ID:3394, Latitude:29.1, Longitude:93.15, PlaceName:'བསྡམས་གྲོང་ཚོ།', Translation:'Dam Drongtso'}">
    ...
</table>
```
Oder man könnte hinzufügen data Attribute auf die TDs, die Daten enthalten, und analysiert nur die Verwendung von jQuery-Selektoren und die Erstellung von Javascript-Objekt aus Ihnen heraus. Keine Notwendigkeit für RegExp Parsen.

Ich bin der Besitzer der Seite, oder zumindest ich, haben vollen Zugriff auf das backend. Das problem ist, dass ich mich mit einem server und generiert diesen HTML-string für mich, das war nicht meine Wahl.
In anderen Worten, ich wollte mal Fragen, ob Sie Zugriff haben und die Fähigkeit/wissen zu ändern, server-side-code auf der Seite? Wenn Sie das tun, dann empfehle ich dir eigentlich schicken JSON mit der Seite selbst.
Daten hinzufügen von Attributen zu TDs Könnten Sie mir ein ganz einfaches Beispiel? Bedeutet das, dass <td attr="latitude">92.34</td>???
Tut mir Leid, wenn meine Antwort nicht klar war. Theoretisch habe ich Zugang zu senden, JSON an meinem browser, aber da der server den ich verwende hat dieser Teil der Arbeit für mich, es kann gesagt werden, dass diese gekapselt ist von mir. In anderen Worten, die Menge der Mühe, die es dauern würde, gehen in den server und neu erfinden, die Art und Weise, es sendet diese Daten an den browser einfach nicht scheinen es mir Wert...
Ich denke, dass das hinzufügen einer zusätzlichen element-Attribut ist der Mühe Wert, weil Sie Daten auf die server in einem strukturierten Objekt Weg. Die Erzeugung JSON out-of-es ist viel einfacher, als Parsen von HTML. Was ist, wenn in einige Zeit erhalten Sie zum ändern der HTML selbst? Sie müssen re-entwickeln, die der parser als gut. Mit JSON in es nicht ändern, die client-seitige Funktionalität. Überprüfen Sie das Beispiel habe ich Hinzugefügt.

InformationsquelleAutor Robert Koritnik
0

Verwendung John Resig* Reine javascript-html-parser

Siehe demo hier

*John Resig ist der Schöpfer von jQuery

InformationsquelleAutor adardesign

Ich hatte eine ähnliche Anforderung und nicht der zu sein, der Erfahrung mit JavaScript-ich lasse jquery-handle für mich mit parseHTML und Verwendung finden. In meinem Fall war ich auf der Suche für divs mit einer bestimmten Klasse name.

function findElementsInHtmlString(document, htmlString, query) {
    var domArray = $.parseHTML(htmlString, document),
        dom = $();

    //create the dom collection from the array
    $.each(domArray, function(i, o) {
        dom = dom.add(o);
    }

    //return a collection of elements that match the query
    return dom.find(query);
}

var elementsWithClassBuild = findElementsInHtmlString(document, htmlString, '.build');

InformationsquelleAutor kelceyp

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Ändern Sie den serverseitigen code, wenn Sie können (hinzufügen, JSON)

Siehe demo hier