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. Eigentlich eine sinnvolle Sache, und eigentlich ganz einfach, manchmal aber auch mit einem gehörigen Explosionspotenzial. Probleme tauchen nämlich dann auf, wenn man für den Editor HTML zulässt, und Texte aus diesem CMS angeteasered werden sollen.

Screenshot von jQuery "more"/"less" HTML truncate

Es gibt mehrere Ansätze dieses Problem zu lösen, alle basieren darauf, das ein Abschneiden nach X Zeichen nicht möglich ist! Warum ist das so? Entweder ich schneide mitten im Wort ab, was nicht schön ist, oder mitten im Zusammenhang, was nicht schön ist, oder mitten in einem HTML-Tag was zu großem Chaos führen wird! Deshalb kann man nicht einfach die ersten x Zeichen abschneiden, sondern benötigt einen Algorithmus der zum Beispiel nur an Leerzeichen (oder hinter Satzzeichen) trennt. Darüber hinaus dürfen die x Zeichen natürlich nur den Text darstellen, HTML wird bei den x Zeichen nicht berücksichtigt! Was am Anfang ganz einfach aussah entwickelt sich zu einer komplexen Angelegenheit, von der man darüber hinaus ausgehen kann, dass sie sich nie so verhält wie man es gerade erwartet.

jQuery „more“/“less“ HTML truncate schneidet einen Text an passender Stelle ab. Passend ist dabei nicht in einem HTML-Tag. Sollte der Zustand eintreten, das der Text HTML öffnet, aber nicht wieder schließt, weil dies im abgeschnittenen Teil erfolgt, stellt das jQuery Plugin sicher, das alle Tags geschlossen werden. Der Text ist abgeschnitten, das Design noch heil und der Kunde zufrieden. Aber Achtung, je nach Design kann es durchaus zu einem ziemlichen Rumgeruckel wegen eines Flash of Unstyled Content kommen.

Ähnliche Beiträge

In jQuery Existenz prüfen Das praktische an jQuery ist (unter anderem) das es Aktionen auf ein Element nur dann ausführt, wenn das Element existiert. Wenn es nicht existiert: P...
Glimmer – der Editor für jQuery Animationen jQuery Animationen sind eine lustige Sache, lustig deshalb, weil man mehr als „Einblenden“ und „Ausblenden“ im Web nicht zu Gesicht bekommt. Soll eine...
Lint für jQuery Früher war alles besser, der Himmel war blauer, die Wiesen grüner und ich programmierte eine Mailbox-Software in Turbo Pascal und wurde in der Uni daz...
Inline Labels für Formularfelder „Normalerweise sollte man“ die Beschriftung für ein Input-Field immer mit dem Tag

Schreibe einen Kommentar