fboës - Der Blog

Wie zaubere ich Smilies und andere Emojis ins HTML?

Ganz einfach: 😊

Denn von vielen von uns unbemerkt, sind Smilies und andere Emojis inzwischen fester Bestandteil von UTF-8 geworden, und in vielen Betriebssystemen als Zeichen hinterlegt. Dementsprechend kann man mit einer einfachen Ersetzung in HTML-Quelltext aus den guten alten ASCII-Smilies (:)) echte Emojis machen.

In HTML kann man Emojis durch Kenntnis der korrekten Emoji-Unicodes ganz einfach erzeugen:

<p>Hier kommt ein Smiley mit dem Unicode: <code>U+1F601</code>: &#x1F601;</p>

Der Trick ist also: Jeden Unicode kann man durch voranstellen von &#x und beenden mit ; als HTML-Entity ausgeben.

Ein Textparser könnte normale ASCII-Smileys dann wie folgt ersetzen:

entityMap = {
  ':)': '&#1F60A;',
  ':))': '&#1F602;',
  ':D': '&#1F604;',
  ';)': '&#1F609;',
  'B)': '&#1F60E;',
  ':P': '&#1F60B;',
  'xP': '&#1F61D;',
  ':*': '&#1F618;',
  ':O': '&#1F632;',
  ':|': '&#1F610;',
  ':?': '&#1F914;',
  ':/': '&#1F612;',
  'xO': '&#1F635;',
  ':(': '&#1F629;',
  ":'(": '&#1F622;',
  ";(": '&#1F622;',
  ':@': '&#1F620;',
  ':$': '&#1F633;',
  '8O': '&#1F628;',
  '8<': '&#2702;',
  ':+1:': '&#1F44D;',
  ':-1:': '&#1F44E;',
  '&lt;3': '&#2764;',
  '&lt;/3': '&#1F494;',
  '(!)': '&#26A0;'
};
string = string.replace(
  /(\W|^)(:(?:'?\(|\)\)|[\)\|\/DPO\*\?@\$])|[;B]\)|;\(|x[PO]|8[o<]|:[\+\-]1:|&lt;\?3|\(!\))(\W|$)/g,
  function(all, before, s, after) {
    return before + entityMap[s] + after;
  }
);

Dementsprechend hier zu bewundern: 😊, 😩, 😐, 😒, 😄, 😋, 😲, 😉, 😎, XP… und natürlich 😘.

Update: Ich habe die Codes ein bisschen geändert, um auch Windows 7 und ältere Androids in den Genuss von Emojis zu bringen.

Update: Das Blogophon hat einen sich beständig wachsenden Emoji-Parser in der „marky-mark“-Bibliothek. Die Ersetzten Zeichen wiederum sind in der Markdown-Dokumentation des Blogophons zu bewundern.