javascript Anzahl Divs auslesen

[Speedy00740]

Hi, ich hätte mal ne Frage, ich hatte vor paar Tagen was an meiner Seite geändert, und ein Div dabei nicht geschlossen.
Da Firefox das ja mittlerweile automatisch behebt, ich es mir nicht sofort aufgefallen.

Da kam mir die Idee, ein Addon soweit zu verändern, das es mir sowas direkt anzeigt.
Ich hab dafür "code injektor" genommen, da kann man Javascript, Css, und HTML per Browser hinzufügen.
Zum testen hab ich ein kleines javascript genommen um die anzahl der Links auszulesen, und oben rechts anzuzeigen.
Klappt soweit auch ganz super.

Der zweck ist aber divs zu zählen, einmal geöffnete also

<div

und natürlich auch geschlossene

</div

.
Und wenn beide Werte unterschiedlich sind, gibt ein rotes Viereck da weiß man sofort hier stimmt was nicht.
Natürlich kann man auch einen Validator nutzen, aber das Addon ist ja so eingestellt, das es nur bei bestimmten seiten anspringt, und ich hab die Info sofort.

aktuell verwende ich folgenden Code

  document.getElementById("links").innerHTML =
   "The number of links are: " + document.links.length;

Aber ich bekomme es nicht auf die reihe, die Divs auszulesen....

 

[black-divil]

Hallo,

also Javascript ist jetzt nicht so meins eher Java.
Da wüsste ich auch wie ich ran gehen würde.

Ganz generell müsste man den code erst mal mit javascript lesen, und in ein Array speichern.
Dann kann man Zeilenweise den code nach <div durchsuchen, zählt die treffer in einer Variable
und das selbe tut man dann auch noch mit dem schließenden Tag.

Anschließend noch n test ob größer, kleiner oder gleich.

Was ich nicht verstehe ist das Warum.
Aber hey ist sicher ne gute übung.

 

[Speedy00740]

Warum ganz einfach, weil man bei "coden" sofort sieht, das irgendwo ein Div Tag nicht geschlossen wurde

 

[black-divil]

Hm, ich nutze dazu einen editor der das anzeigen kann,
Die Text einrückung sollte da auch zu n guten Teil dazu beitragen das sowas eher auffällt.

Wie Programmierst du Javascript ?
Ganz lumpiger Texteditor oder doch schon was richtung Notepad++ oder besser?

Hab früher auch viel mit PHP HTML und CSS gearbeitet da war Notepad++ auch immer ne große Erleichterung.

 

[Speedy00740]

ja nutze notepad++
aber manchmal übersieht oder vergisst man den div tag zu schließen
und auch in notepad++ sieht man nicht direkt ob der tag offen oder zu ist, vorallem wenn man noch php Code darin ist.

 

[black-divil]

Stimmt hab ich fast schon befürchtet das der code in einem anderen Code eingebettet ist.
Da wird es dann schnell unübersichtlich.

Bist du bereits weiter gekommen?

 

[Speedy00740]

ich denke langsam das wird nichts, man kann scheinbar nur "Elemente" also den Inhalt der Divs auslesen.
Den Quellcode selbst kann man scheinbar nicht "verarbeiten" jedenfalls hat meine Google Recherche bisher nichts ergeben.

Muss wohl weiter die "Dev Tools" von Chrome nutzen, die zeigen ja auch html Fehler an.
Das addon wäre aber schon hilfreich gewesen

 

[black-divil]

Schade, aber evtl. Gäbe es noch die Möglichkeit das ganze über PHP zu versuchen.
Wär dann zwar kein addon aber vielleicht auch hilfreich.

 

[Speedy00740]

interessant, hast du eine Idee, wie ich in php den Quelltext lesen könnte um zu schauen, wie viele divs geöffnet wurden.

 

[black-divil]

Also das Vorgehen ansich hab ich ja oben schon beschrieben. In PHP ne Datei öffnen ist relativ simpel Befehl Open oder fopen lohnt sich die Beschreibung davon Mal näher anzuschauen. Wegen lese und/oder Schreibzugriff. Falls es Probleme gibt, hing das bei mir öfter Mal an Berechtigungen.

 

[Speedy00740]

ich will ja nicht wirklich eine Datei öffnen, man stelle sich vor, die index.php besteht noch aus einer footer,php einer header.php und einer ad.php

Viel zu umständlich
Der Browser wandelt ja alles um wenn er die Seite aufruft,
Es ist eigentlich alles da, theoretisch

Mit dem Code bekomme ich zumindest hin, das er mir anzeigt wie viele Divs im Quellcode sind

var anz = document.getElementsByClassName('testcont')[0].getElementsByTagName('div').length
alert(anz);

Das Problem, er zählt jedes geöffnete Div,
Wenn ich 3 echte geschlossene habe, und eines was nur offen ist, bekomme ich dann 4 als Ausgabe,
stimmt ja auch 4 wurden aufgemacht, wenn ich nun noch die 3 für die geschlossenen bekomme wäre es super

 

[black-divil]

Hi, evtl. Hab ich was falsch verstanden aber wenn ich es richtig verstehe, die selbe Zeile noch Mal
Nur mit getElementsByTagName('/div')
Dann sollte er nur die schließenden Zählen.

 

[Speedy00740]

ich hab mal etwas experimentiert, im "text" der ausgewertet werden kann landet quasi alles außer den tags

wenn ich nach "div" oder "/div" suche macht es keinen unterschied.
Schreibe ich aber auf der Test seite "brom ist teuer" oder "/brom ist teuer" dann erkennt das Script den unterschied
also den slash, aber schreibe ich

"div" und "/div"

dann ist es egal.

Ich hab den verdacht das Tags genauso behandelt werden, wie wenn du in php "striptags" verwendest, und nur noch alles ohne html am Ende ankommt. und deswegen kann ich den / vor dem Div nicht auswerten
Nur wenn der / nicht teil eines Tags ist, dann kann ich ihn auswerten.
echt verzwickt

ich müsste quasi ein replace des quelltextes machen, und die "<" vor der auswertung ersetzen, so das alles nur noch normaler text wäre

 

[black-divil]

Joa, evtl. Ist die funktion die du nutzt in dem Fall n bissl unglücklich. Hab mir Mal angeschaut was es da noch so gibt. getElementsByName wäre aus meiner Sicht wohl glücklicher wobei dann auch ein div im Text relativ sicher mit gezählt werden würde.

 

[black-divil]

Ach, ich sehe schon das geht so vermutlich auch nicht. Hab gerade nach einer Möglichkeit gesucht das gesamte Dokument ungeändert in ein Array zu speichern. Über document gibt es wohl kein Weg. Aber ich kenn mich da auch null aus. Anschließend könnte man dann sicher mit indexof oder ähnlichem arbeiten um die Divs zu finden. Wird so deutlich umständlicher aber man ist da relativ frei und Funktionen hat Java Script ja auch drauf.

 

[schalkewaldi]

let data = '';
fetch(window.location).then(function (response) {
    return response.text();
}).then(function (html) {
    data = html;
}).catch(function (err) {
    console.warn('Error:', err);
});

Abfrage etwa so:

data.indexOf('/div')

 

[Speedy00740]

kurze info, es klappt nun doch
Das Problem war firefox selbst.

ich hatte zum testen einfach paar Divs geöffnet ohne sie zu schließen, aber Script lieferte immer die selben Werten.
ich hab den String dann über die .console ausgegeben, und gesehen, das Firefox einfach alle divs wieder von selbst geschlossen hat.

es waren dann einfach die fehlenden /divs direkt am Ende des Strings.
Um das zu lösen hab ich einfach den String mit split angeschnitten
Der String endet ja immer identisch mit dem letzten Wort im Footer.
Alles was danach kam, hat firefox angehangen.

Den String selbst hab ich dann noch "optimiert" und alle divs umgewandelt

var newtxt = myHTML.replace(/\/div/g, "[close]");
var newtxt = newtxt.replace(/<div/g, "[open]");

Der code wandelt geöffnete Divs in [open] um und geschlossene in [close]
jetzt zähle ich nur noch, wie oft beides im String vorkommt, fertig. Oben rechts wird mir bei unterschiedlichen Werten ein rotes Viereck angezeigt. Quasi Live, ohne das ich was tun muss
So hatte ich mir das vorgestellt, 2 tage Hirnschmalz hat es gekostet

 

[black-divil]

Na, supi. Freut mich sehr das zu hören.hat es doch noch geklappt.