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.

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.

• javascript
• html
• emoji
• twemoji

• You'd just use replace. – Jack Bashford Commented May 30, 2019 at 13:54
• @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 Commented May 30, 2019 at 13:55
• The documentation on their front page in GitHub literally tells you how to do it: twemoji.parse(document.body); – Strelok Commented May 30, 2019 at 14:05

3 Answers 3

Check out the docs for twemoji.... https://github./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./36x36/2764.png"/> emoji!
*/

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);

If you don't need library:

var codePoints = Array.from(