Truncating von Text mit HTML Markup

Manchmal sind es die einfachen Dinge im Leben, die einen Webworker in den Wahnsinn treiben. Alles beginnt mit einem Anruf: der Kunde möchte die ersten 100 Zeichen der neuesten News auf der Startseite haben. Und da er gewissenhaft keine Artikelbeschreibung pflegt, soll man einfach die Zeichen aus dem Text kopieren (ist ja eh da). Gesagt getan: der Webworker schreibt eine Query, und gibt mittels PHP substr die ersten 100 Zeichen aus. Einige Tage später ruft der Kunde panisch an und verkündet: die Homepage ist zerschossen!

Screenshot von Cutter.js
Screenshot von Cutter.js

Was ist passiert? Der Kunde besitzt im Backend einen WYSIWYG-Editor und war der Meinung, das die Firmenfarben nicht ausreichend auf der Homepage vertreten waren. Er hat dann alles ein bischen grün und blau gemacht, klein wenig bold dazu gegeben und hier und da Bilder eingepflegt von denen keiner weiß woher sie stammen. Natürlich auch in den ersten hundert Zeichen jedes Textes! Der substr von PHP ist an der Stelle sehr geschickt und kopiert die ersten 100 Zeichen raus – egal ob Markup oder nicht – Zeichen ist schliesslich Zeichen. Also ist der Webworker clever und packt vorher ein strip_tags auf den Text. Die Homepage geht wieder, weil alle HTML-Tags auch wirklich geschlossen sind, und der Kunde ruft an und beschwert sich, weil das eine Wort aus der dritten News nicht mehr bold ist, und das wäre wichtig, weil sonst bricht der Umsatz ein!

Jetzt steht der Webworker vor einem mittelprächtigen Problem! Er weiß: er braucht 100 Zeichen OHNE HTML Markup. Kommt dann auf die Idee das PHP natürlich das ganze parsen müsste und merkt kurz darauf das der Kunde ihm ein Bild in 300×400 Pixel in den ersten 100 Zeichen untergejubelt und ein paar <h2> hinterher geschossen hat. Er wird schnell einsehen das der Kunde immer und zu jeder Zeit die Startseite der einstmals coolen Anwendung ins Chaos stürzen kann.

Es stellt sich also die Frage wie man am schnellsten die 100 Zeichen ausgeben kann. Inzwischen bin ich zu der Entscheidung gekommen das dies am besten in Javascript erfolgt. Also: gesamte News ausgeben, Javascript drauf werden -> nur noch 100 Zeichen sehen. Grund hierfür ist, das man in PHP wirklich einen starken Aufwand betreiben müsste, um das gleiche Ziel zu erreichen. Mit Cutter.js gibt es das Ganze sogar schon als fertiges jQuery Plugin.

Ich wäre sehr gespannt zu hören ob und wie ihr das Problem eventuell anders löst !? ;)

Ähnliche Beiträge

Teaser mit jQuery erstellen Heutzutage besitzt fast jede halbwegs ernst zu nehmende Webapp ein Mini-CMS im Backend. Meistens basierend auf einem WYSIWYG-Editor in JavaScript. Eig...
Multiple File Uploads, HTML und Open Source Formulare lassen sich inzwischen ganz gut designen, allerdings gibt es ein Formularelement, das alle Design-Versuche vehement abwehrt: der Dateiupload...
Mozilla Thimble – HTML & CSS lernen Meine persönliche Meinung ist ja, das Mozilla anstatt sich auf den Browser zu konzentrieren, in den diversesten Nebenprojekten aufreibt. Teilweise kom...
Responsive Emails mit MJML für alle Clients Responsive Emails für zum Beispiel Newsletter sind eine schlimme Sache. Man könnte sogar sagen: HTML in E-Mails ist generell eine noch schlimmere Sach...

Eine Antwort auf „Truncating von Text mit HTML Markup“

  1. Ja, das Problem kenne ich, stand ich auch schon davor. Ich hab das dann in etwa so gelöst, wie WordPress mit den Excerpts. Ganzen Artikel hergenommen, img-Tags rausgefiltert, a-Tags ebenfalls, danach nen strip_tags drauf und den verbleibenden unformatierten Text zurechtgeschnitten. Etwas später bin ich auf Wunsch des Kunden dazu übergegangen das etwas anders zu lösen. Image und Anchor-Tags immer noch vorher raus werfen, den Rest durch ein sehr interessantes Konstrukt von RegEx werfen, damit eventuelle HTML-Tags wie fett und kursiv auch rechtzeitig geschlossen werden, bevor meine Zeichenanzahl erreicht war. War alles etwas umständlich, hat aber für die Zwecke gereicht.

    Das Ganze ist mittlerweile mehr als 5 Jahre her, ich würde es nicht noch mal basteln wollen, zumindest nicht auf diese Art und Weise.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.