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

jQuery++ – Power Tools für jQuery jQuery kann eine Menge, aber halt nicht alles. Solls auch nicht, aber es gibt durchaus ein paar Funktionen / Plugins, die ständig im Einsatz sind, und...
jQuery URL parser Aus den verschiedensten Gründen kann es passieren, das man eine URL mittels JavaScript validieren muss - was noch relativ einfach ist. Komplizierter w...
Autoresize von Textareas mit jQuery Textareas sind immer so eine Sache: egal wie groß man sie macht, der Kunde findet sie zu klein. Auch die Breite der Eingabe ist oft problematisch, da ...
Syntax Highlighting in Javascript Syntax Highlighting ist – als Blogbetreiber – eine recht anstrengende Sache. Zunächst einmal muss man WordPress erklären, dass es bitte schön die Fing...

Schreibe einen Kommentar