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

Bacon.js – Bezier-Kurven für Texte Das Leben eines Webworkers ist nicht einfach, vor allem dann wenn man einem Kunden erklären muss, dass ein Bild mit Transparenz - auch wenn es dreimal...
jQuery.payment: Kreditkarten-Validierung Inzwischen dürfte es sich auch bis in die hintersten Ecken herum gesprochen haben, das man Kreditkarten nicht mit Regular Expressions beikommen kann. ...
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...
Der Bild-Upload, das Design und der Kunde Im Leben eines Webworkers kann man von zwei Prämissen ausgehen : a) Kunden beherrschen keine Bildbearbeitung und b) Grafiker schaffen es nicht ein nic...

Schreibe einen Kommentar

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