smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

HTML-Entities mittels jQuery encodieren & decodieren

5. Januar 2014
Stephan
jQuery: HTML-Entities encodieren & decodieren

Falls ihr irgendwann mal vor der Aufgabe steht, clientseitig in JavaScript HTML-Entities in einem Text zu encodieren bzw. zu decodieren, dann verwendet dazu am besten jQuery.

Mittels den jQuery-Funktionen text und html könnt ihr so als Code-Einzeiler einen beliebigen Text encodieren bzw. decodieren.

HTML-Entities encodieren

Als erstes erzeugen wir uns ein jQuery-Objekt mittels $('<div>') und setzen mittels der text-Funktion unseren zu encodierenden Text. Anschließend verwenden wir die html-Funktion, wodurch der Text encodiert wird.

$('<div>').text('<strong>Test</strong>').html()

Der encodierte Text sieht danach wie folgt aus:

&lt;strong&gt;Test&lt;/strong&gt;

HTML-Entities decodieren

Analog zum Encodiervorgang funktioniert der Decodiervorgang. Der einzige Unterschied ist hier, dass wir erst die html– und danach die text-Funktion aufzurufen.

$('<div>').html('&lt;strong&gt;Test&lt;/strong&gt;').text()

Als Ergebnis erhalten wir den decodierten Text:

<strong>Test</strong>

Fazit

jQuery erlaubt es euch auf einfache Weise HTML-Entities in einem Text zu en- bzw decodieren. Die zwei Einzeiler könntet ihr z.B. auch noch in einer entsprechenden Funktion kapseln.

Kommentare  
11 Kommentare vorhanden
1 Manni schrieb am 22. Januar 2014 um 19:33 Uhr

Danke für den interessanten Artikel!
Ich habe doch letztens erst mit jQuery angefangen.
Es vereinfacht vieles, doch wenn man es wie ich, vergisst einzubinden und ewig davor sitzt und sich fragt was los ist…könnte man manchmal ausflippen 😀 hehe

Grüße Manni

2 Viktor schrieb am 22. März 2015 um 10:37 Uhr

Schöner Beitrag, gerade als Anfänger stell ich mich noch quer, da die Materie alles andere als leichtgängig ist. Suche zu dem Thema immer noch nach so einer Art Kompendium, welches gut verdaubar ist. Irgendwelche Ideen?

3 Steff schrieb am 15. April 2015 um 10:49 Uhr

Schöner Beitrag. Werd ich mir unter meinen Favoriten speichern. Falls ich jQuery mal benötige, kann ich hier nachschauen. Dank dir.

Gruß Steff

4 Tobias schrieb am 7. Mai 2015 um 16:21 Uhr

Super Beitrag. Hat mir sehr geholfen. Danke!

5 Tina schrieb am 18. Juni 2015 um 22:17 Uhr

Danke für die Hilfe. Ich als Neuling im Umgang mit jQuery konnte mit diesem tollen Artikel sofort etwas anfangen und habe das encodieren sowie decodieren sofort verstanden.

Danke!

6 Okin schrieb am 28. Juli 2015 um 09:01 Uhr

So wie vor mir, Danke für die HIlfe.

Es ist so schön, so schnell immer hilfreiche Artikel und Beiträge zu finden.

7 Gerri schrieb am 17. September 2015 um 23:37 Uhr

Nicht ganz aktuell, aber immer noch hilfreich!
Danke.

8 Valentina schrieb am 15. Oktober 2015 um 14:37 Uhr

Ich bin Anfänger und fand den Tipp wirklich hilfreich und leicht verständlich. Danke dafür

9 Moritz schrieb am 15. Januar 2016 um 14:08 Uhr

Guter Artikel Stephan! Macht wirklich Spaß so gut recherchierte Beiträge bei dir zu lesen. Mach weiter so!

10 Bertram schrieb am 4. März 2016 um 16:05 Uhr

Coole Sache, funktioniert wohl dann auch mit Sternen, Herzchen und Co!
Muss ich mal ausprobieren…

11 Andreas schrieb am 15. März 2016 um 22:12 Uhr

Funktioniert sicher auch mit Herzchen und Co., unter pixeltuner.de gibts eine reiche Auswahl(goggle „50 Beispiele für geometrische Formen“)!Das Herzchen geht dann allerdings mit border-dotted und OHNE border-radius doch einfacher!

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!