How to replace emojis in html with twemoji?

Question

In user-generated posts, I have many raw emojis like

   <p>I ❤ your post!</p>

I'm wondering what is the best way to replace these emojis with colorful emojis like:

 <p>I <i class="twa twa-heart">❤️</i> your post!</p>

I'd like to style the emojies with twemoji library.

You might ask why not let users insert the styled emojis at the first place while picking the emojis? The answer is that the interface's text editor is not WYSIWYG and the user posts are heavily stripped. So such option is ruled out and I'm looking for a solution that does this conversion at render time.

@Jack Bashford. There are dozens of emojis to deal with. So I'm not sure what is the most suitable to parse and replace the whole page. — Karlom, May 30 '19 at 13:55
The documentation on their front page in GitHub literally tells you how to do it: `twemoji.parse(document.body);` — Strelok, May 30 '19 at 14:05

score 4 · Accepted Answer · answered May 30 '19 at 14:00

4

Check out the docs for twemoji.... https://github.com/twitter/twemoji#api

API

Following are all the methods exposed in the twemoji namespace.

twemoji.parse( ... ) V1

This is the main parsing utility and has 3 overloads per parsing type.

There are mainly two kinds of parsing: string parsing and DOM parsing.

You can parse strings (parse their input).

I believe you're looking for smoething like this:

However, for already sanitized strings, this method can be considered safe enough. Please see DOM parsing if security is one of your major concerns.

twemoji.parse('I \u2764\uFE0F emoji!');

// will produce
/*
I <img
  class="emoji"
  draggable="false"
  alt="❤️"
  src="https://twemoji.maxcdn.com/36x36/2764.png"/> emoji!
*/

answered May 30 '19 at 14:00

FeaturedSpace

479
3
18

How can I apply this to the whole page? – Karlom May 30 '19 at 14:02
I linked to the API, but here's your direct link. https://github.com/twitter/twemoji#dom-parsing. Just put in the HTML5 tag that their post is stored in. – FeaturedSpace May 30 '19 at 14:04
1

This works like a charm: `$(document).ready(function () { document.body = twemoji.parse(document.body); });` Thanks! – Karlom May 30 '19 at 14:08
No problem, happy to help! – FeaturedSpace May 30 '19 at 14:40

score 2 · Answer 2 · answered May 30 '19 at 13:58

Use an object, where the key is the stripped-back emoji, and the value is the full HTML content. Iterate through each character in the string and check if it's a stripped-back emoji. If so, replace it. Finally, join it all together and write to the page.

const raw = "<p>I ❤ your post!</p>";
const emojis = {
  "❤": `<i class="twa twa-heart">❤️</i>`
};
const res = [...raw].map(e => emojis[e] || e).join("");
document.write(res);

How to replace emojis in html with twemoji?

2 Answers2

API

twemoji.parse( ... ) V1