CODEWITHSUNDEEP
javascripthtmlemojitwemoji
Karlom
Karlom

Reputation: 14874

How to replace emojis in html with twemoji?

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.

Upvotes: 3

Views: 3727

Answers (3)

falselight
falselight

Reputation: 850

If you don't need library:

var codePoints = Array.from(💻)
  .map((char) => {
    var _a;
    if (char !== "\u200D" && !char.match(/[\uFE0F\u20E3]/)) {
      return (_a = char.codePointAt(0)) === null || _a === void 0 ? void 0 : _a.toString(16);
    }
    return "";
  })
  .join("-")
  .replace(/-+/g, "-")
  .replace(/^-|-$/g, "");

var baseUrl = `https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/${codePoints}.png`;

Run converter:

function getCdnEmoji() {
var value = document.getElementById('emojiconverter').value;
// 💻
var codePoints = Array.from(value)
    .map((char) => {
    var _a;
    if (char !== "\u200D" && !char.match(/[\uFE0F\u20E3]/)) {
        return (_a = char.codePointAt(0)) === null || _a === void 0 ? void 0 : _a.toString(16);
    }
    return "";
})
    .join("-")
    .replace(/-+/g, "-")
    .replace(/^-|-$/g, "");
    
var baseUrl = `https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/${codePoints}.png`;
document.getElementById('cdnUrl').innerText = baseUrl;
document.getElementById('cdnUrl').href = baseUrl;
document.getElementById('preview').setAttribute('src', baseUrl);
}

document.getElementById('convert').addEventListener('click', getCdnEmoji, false);
getCdnEmoji();
<input id="emojiconverter" value="💻" name="emoji">
<button id="convert">Convert</button>
<br />
<br />
<div>URL: <a href="#" id="cdnUrl"></a></div>
<div><img alt="preview" id="preview" src="" /></div>

Upvotes: 0

FeaturedSpace
FeaturedSpace

Reputation: 499

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!
*/

Upvotes: 4

Jack Bashford
Jack Bashford

Reputation: 44145

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

Upvotes: 2

Related Questions