HTML Code richtig kürzen

Mr.Tr33 · 01/28/2015, 19:23

Moin,

ich habe z.B. folgenden Code:

Code:

normaler text<br />
<strong>dicker text</strong>, <span style='text-decoration: underline'><strong>dick und unterstrichen</strong></span>, <span style="color: #009900"><em><strong>dick und kursiv und grün</strong></em></span>, <span style="color: #ff0000"><strong>dick und rot</strong></span>, <a href="test.org"><span style="color: #ff0000">rot und link</span></a>, <span style="color: #ff0000"><a href="google.de">link und rot<span style="color: #ff0000"> geht nicht nur rot und link</span></a></span> <br />
<ul style="list-style-type: disc"><li>1</li><li><strong>2</strong></li><li>3</li></ul> <br />
<ul style="list-style-type: decimal"><li><a href="test.org">a</a> </li><li>b</li><li>c</li></ul> <br />
<div class="quote"> zitat und so<br />
<span style="color: #009900">2te zeile in grün</span>
</div>

Das sind laut Notapedad++ 827 Zeichen.
Ich möchte den Code jetzt aber auf 785 Zeichen kürzen. Das würde wie folgt aussehen:

Code:

normaler text<br />
<strong>dicker text</strong>, <span style='text-decoration: underline'><strong>dick und unterstrichen</strong></span>, <span style="color: #009900"><em><strong>dick und kursiv und grün</strong></em></span>, <span style="color: #ff0000"><strong>dick und rot</strong></span>, <a href="test.org"><span style="color: #ff0000">rot und link</span></a>, <span style="color: #ff0000"><a href="google.de">link und rot<span style="color: #ff0000"> geht nicht nur rot und link</span></a></span> <br />
<ul style="list-style-type: disc"><li>1</li><li><strong>2</strong></li><li>3</li></ul> <br />
<ul style="list-style-type: decimal"><li><a href="test.org">a</a> </li><li>b</li><li>c</li></ul> <br />
<div class="quote"> zitat und so<br />
<span style="color:

Jetzt ist hier ja der div Tag nicht geschlossen und der span Tag nicht einmal richtig geöffnet.

Gibt es eine simple Methode div einfach zu schliessen, weil es bereits komplett offen ist (sprich < und > wurden gesetzt) und den span tag einfach weg zu lassen, weil er eben nicht komplett offen ist?

Mir kam der Gedanke das mit RegExp zu machen, aber ich weiß nicht wie ich nach offen tags suchen kann bzw. nach dem "Ende" des offenen Tags ohne RegExp eine genaue Beschreibung zu geben wie z.B. div. Und ich weiß nicht wie ich schauen kann ob ein tag geöffnet wurde aber nicht komplett da ich praktisch nicht weiß wie lang er in wirklichkeit ist.
Gerade beim schreiben kam mir der Gedanke einfach das gekürzte mit dem Original einfach abzugleichen, jedoch bin ich nicht weiter gekommen.

Ich hoffe ich habe jetzt nichts verwirrendes geschrieben

MfG
Mr.Tr33

Mikesch01 · 01/28/2015, 19:40

Hi.

Erstmal Fragen:
Warum willst du den Text überhaupt kürzen?
Muss der Text immer eine bestimmte Größe als Maximum haben?
Wird der Text irgendwo gespeichert (Variable, Datenbank)?

Vielleicht gibt es andere Lösungen also du benötigen würdest..daher würde diesen Hintergrund-Informationen sehr nützlich sein.

Gruß

Crossside · 01/28/2015, 19:45

Wieso willst du HTML Code kürzen? Ist total unnötig.. brauchst du doch garnicht zu tun?

Jede Internetverbindung sollte heutzutage schnell genug sein um solchen Code ohne Probleme laden zu können, da benötigst du keine kürzungen.

Solltest du deine Webseite beschleunigen wollen solltest musst du da an anderen Punkten ansetzen. Beispielweise an Mediendateien wie Bildern.. zu große Bilder mit dem falschen Dateiformat erhöhen die Ladezeiten enorm. Auch Dateien von externen Servern zu laden jedesmal (js, css, bilder usw als Dateien) nimmt ein haufen Ladezeit weg weil erstmal die externe Seite angesprochen werden muss.

p.s: Zu deiner "Kürzung" enthalte ich mich mal, das ist Bockmist da Tags wegzulassen die benötigt werden und so Html Code zu haben der Buggy ist ( nicht geschlossene Tags usw... ) sowas macht man nicht.

grüße

Mr.Tr33 · 01/28/2015, 19:48

Ist es nicht einfach irrelevant wieso ich den Code kürzen möchte?

Immer dieses hinterherfragen >.>

Kurz und knapp: der Inhalt liegt in einer DB und ist zu groß zum anzeigen, daher wird er gekürzt.

Crossside · 01/28/2015, 19:57

Quote:

Originally Posted by Mr.Tr33

Ist es nicht einfach irrelevant wieso ich den Code kürzen möchte?

Nein ist es nicht weil es je nach Anwendungsfall verschiedene Ideen / Möglichkeiten gibt es zu lösen.

Quote:

Originally Posted by Mr.Tr33

Immer dieses hinterherfragen >.>

Quote:

Originally Posted by Mr.Tr33

Kurz und knapp: der Inhalt liegt in einer DB und ist zu groß zum anzeigen, daher wird er gekürzt.

Paar Ideen..

1) Pack nicht den gesammten Kram in die DB sondern nur einen Teil.
Kurz gesagt.. anstelle dein obiges Beispiel in die DB zu stopfen, stopfste nur den Text der Dynamisch angezeigt werden soll in die DB und machst den Rest normal rein..

Beispiel ->

index.html

Code:

<b>Benutzername</b>: $USERNAME<br \>
<b>Registriert am</b>: $REGISTER_DATE<\br>

Datenbank

Code:

[Username, Registerdate]
[ Hans ] [ 1.11.2001 ]

Anschließend die Daten aus der DB auslesen, und dann z.b $USERNAME in der index.html dynamisch durch den Username ersetzen.

2)

Werbebanner, Signaturen, Html Code usw nicht in ne Doofe Datenbank stopfen sondern in ne normale html file wie es sich gehört..

Datenbanken sind nicht dafür gedacht das man da enorm lange Texte, Html Code usw reinpackt.
Wieso packst es also nicht einfach in ne seperate Datei, und lädst es dann davon?
Wäre sinnvoller.

grüße

Mr.Tr33 · 01/28/2015, 20:02

Deine Ideen ergeben irgend wie mit meinem Beispiel keinen Sinn.

Noch einmal von vorne.
Ich habe gigantische Texte ... die sind vollgestopft mit HTML Tags wie Listen, Blöcke, Schriftfarbe etc.
Diesen Text will ich als Preview nur Stückweise anzeigen bzw. die ersten z.B. 800 Zeichen.
Wie kann ich den Text so kürzen, dass der angezeigte Teil nicht meinen restlichen Teil zerstört?

Crossside · 01/28/2015, 20:09

Quote:

Originally Posted by Mr.Tr33

Deine Ideen ergeben irgend wie mit meinem Beispiel keinen Sinn.

Noch einmal von vorne.
Ich habe gigantische Texte ... die sind vollgestopft mit HTML Tags wie Listen, Blöcke, Schriftfarbe etc.
Diesen Text will ich als Preview nur Stückweise anzeigen bzw. die ersten z.B. 800 Zeichen.
Wie kann ich den Text so kürzen, dass der angezeigte Teil nicht meinen restlichen Teil zerstört?

Du könntest diese großen Texte in einem Ordner abspeichern wo normale Besucher keinen Zugriff haben. Anschließend nimmst du beispielweise Php, und ließt einen dieser Texte aus. Nun kannst du im Text beispielweise ein spezielles zeichen / string einfügen was signalisiert "bis hier und nicht weiter", und es dort abtrennt. Nun zeigst du nur den Texrt bis zu diesem Zeichen an.

Beispiel wie ichs meine..

Dein langer Text in einer Datei:

Code:

ULtrraaaaaaa langer Text...
[...]
Huiiiiii Texxttttttt...
$PREVIEW
Noch mehr viel Text huiiiiiiiii..
[...]

Pseudocode für Php

Code:

$file = fopen("datei_mit_viel_text");
$file = gettext($file);
$preview = explode($file,"$PREVIEW");
$preview = str_replace("$PREVIEW","");
echo $preview;

So wird dann nur der Text bis zum $PREVIEW angezeigt, und der rest halt nicht. Der code soll jetzt halt nur zur erklärung dienen, hab jetzt keine Zeit dir den ganzen Code zu scripten. Denke es reicht ums verständlich zu machen..

Bei dem ganzen musst du halt drauf achten in deinen Texten immer sofort die Tags zu closen wenn du sie nicht mehr brauchst.. nicht erst am ende des Textes, sondern direkt.
Bei Div´s ises natürlich blöd, aber sowas würd ich auch nicht in die Datei hinzufügen sondern halt auf der Hauptseite ins html file. Und halt auch beim schreiben der Texte schon überlegen wo du die kostenlose Vorschau haben möchtest, und den Text darauf aufbauend schreiben.. so passieren dir nicht Missgeschicke wie Html Tags die nicht geschlossen sind usw..

grüße

Mr.Tr33 · 01/28/2015, 20:16

@Crossside
Öhm die Idee ist ja ganz ok, einfach ein Zeichen zu setzen bis wohin es angezeigt werden soll. Es wäre aber auch nur eine Alternative und keine richtige Lösung.

.StarSplash · 01/28/2015, 20:19

Ich denke ich verstehe, was du vorhast. Als Lösung könntest du mit PHP ein mal den Text durchgehen, die Tags erkennen und auf nen Stack werfen bzw wieder runter nehmen, wenn sie geschlossen werden und am Ende die noch offenen Tags mit korrespondierenden schließenden eben schließen. Desweiteren könntest du anhand der "<" und ">" prüfen, ob die Tags korrekt sind und im Zweifelsfall den Tag entfernen. Das tritt ja wenn überhaupt nur beim letzten auf.

Crossside · 01/28/2015, 20:19

Quote:

Originally Posted by Mr.Tr33

@Crossside
Öhm die Idee ist ja ganz ok, einfach ein Zeichen zu setzen bis wohin es angezeigt werden soll. Es wäre aber auch nur eine Alternative und keine richtige Lösung.

Wie willst es sonst lösen? Du kannst nicht einfach sagen "Zeig nur 800 Zeichen an und danach schneid den Rest des Textes ab".. da jeder Text anders ist und ne andere Länge hat kanns sein das dann dadurch mitten im Satz abgeschnitten wird, oder mitten in Wörtern, oder halt so das dann die Html Tags nicht geschlossen sind.. Ergo - Doofe Idee.

Anders gehts halt nicht wirklich ohne enorm mehr Aufwand.
Könntest natürlich die Vollversion des Textes und die Kurzversion in 2 verschiedenen Plätzen speichern, aber das wäre nur Aufwändiger als meine Methode weils mehr Speicher wegnimmt und es Schlussendlich aufs selbe hinauslaufen würde.

grüße

Mr.Tr33 · 01/28/2015, 20:24

Quote:

Originally Posted by .StarSplash

Ich denke ich verstehe, was du vorhast. Als Lösung könntest du mit PHP ein mal den Text durchgehen, die Tags erkennen und auf nen Stack werfen bzw wieder runter nehmen, wenn sie geschlossen werden und am Ende die noch offenen Tags mit korrespondierenden schließenden eben schließen. Desweiteren könntest du anhand der "<" und ">" prüfen, ob die Tags korrekt sind und im Zweifelsfall den Tag entfernen. Das tritt ja wenn überhaupt nur beim letzten auf.

Ja an sowas dachte ich auch schon.
Aber da würden sich doch z.B. 2x div überschneiden, wenn das letzte </div> fehlt und dann wirds wieder zum Chaos

Quote:

Originally Posted by Crossside

Wie willst es sonst lösen? Du kannst nicht einfach sagen "Zeig nur 800 Zeichen an und danach schneid den Rest des Textes ab".. da jeder Text anders ist und ne andere Länge hat kanns sein das dann dadurch mitten im Satz abgeschnitten wird, oder mitten in Wörtern, oder halt so das dann die Html Tags nicht geschlossen sind.. Ergo - Doofe Idee.

Anders gehts halt nicht wirklich ohne enorm mehr Aufwand.
Könntest natürlich die Vollversion des Textes und die Kurzversion in 2 verschiedenen Plätzen speichern, aber das wäre nur Aufwändiger als meine Methode weils mehr Speicher wegnimmt und es Schlussendlich aufs selbe hinauslaufen würde.

grüße

Ich will es auch nicht bei Punkte 800 Zeichen schneiden, kann ja ruhig paar Zeichen drüber und drunter sein. Hauptsache ich habe keine zerstörte Seite am Ende >.>
Und mir ist der Aufwand egal, hauptsache ich bekomme es ordentlich hin und nicht über zich Umwege.

.StarSplash · 01/28/2015, 20:28

Nein, wieso sollte das Chaos geben? Durch die Verwendung eines Stacks wird die Verschachtelung doch berücksichtigt.

NotEnoughForYou · 01/28/2015, 20:30

Quote:

Aber da würden sich doch z.B. 2x div überschneiden, wenn das letzte </div> fehlt und dann wirds wieder zum Chaos

Durch deinen Stack würdest du ja aber merken dass noch ein </div> fehlt (nach lifo implementieren).

Theoretisch könntest du mit ein paar Regex Kombinationen auch ermitteln ob es mitten im Satz wäre, dann bis zum . davor / danach anzeigen lassen.

Ist nicht weiter kompliziert nur aufwendig bis man seinen Regex dann hat.

Mr.Tr33 · 01/28/2015, 20:35

Öhm, eine defintion zum Begriff "Stack" wäre jetzt noch nett

.StarSplash · 01/28/2015, 20:38

Ein Stack ist eine Datenstruktur, die nach dem L[ast]I[n]F[irst]O[ut]-Prinzip operiert.

Mit einer Funktion (üblich "push") legst du etwas auf dem Stack (= Stapel) ab. Stell es dir wie einen Stapel Blätter vor. Mit einer anderen Funktion ("pop") nimmst du das oberste Blatt wieder herunter.

Dein Beispieltext wäre reduziert auf die Tags folgender:

PHP Code:


			
<br /><strong></strong><span style='text-decoration: underline'><strong></strong></span><span style="color: #009900"><em><strong></strong></em></span><span style="color: #ff0000"><strong></strong></span><a href="test.org"><span style="color: #ff0000"></span></a><span style="color: #ff0000"><a href="google.de"><span style="color: #ff0000"></span></a></span><br /><ul style="list-style-type: disc"><li></li><li><strong></strong></li><li></li></ul><br /><ul style="list-style-type: decimal"><li><a href="test.org"></a></li><li></li><li></li></ul> <br /><div class="quote"><br /><span style="color:

Daraus kannst du schon mal alle Tags rausfiltern, die kein schließendes Gegenstück haben, hier also das "<br/>".

Danach legst du jedes öffnende Tag auf deinen Stapel. Findest du nun ein schließendes Tag, vergleichst du es mit dem obersten Element deines Stacks, ist es das korrekte schließende, entfernst du das oberste Element des Stacks, andernfalls ist die Struktur nicht valide. Wenn du so durch bist, hast du folgendes Element noch auf dem Stack:

<div class="quote">

Nun reicht es, dieses zu schließen und du hast insgesamt ein valides Tag-Gerüst.