Fun with JavaScript and Emoji

emoji-spread

Today Wes Bos tweeted a few fun things one can do with JavaScript and Emoji:

  1. It’s possible to spread emoji sequences into their single parts:

    [...'👨‍👩‍👧‍👦']
    // ["👨", "‍", "👩", "‍", "👧", "‍", "👦"]
  2. Combining Emoji is also possible:

    ["👨", "‍", "👩", "‍", "👧"].reduce((prev, curr) => prev + curr)
    // "👨‍👩‍👧"
  3. And oh, you can even replace single emoji within emoji units, yielding a new emoji unit:

    '👩‍👩‍👦'.replace(/👩/g, '👨')
    // "👨‍👨‍👦"
  4. This kind of sorcery also works with skin tone modifiers by the way:

    [...'🛀🏾']
    // ["🛀", "🏾"]
    
    ["🛀", "🏾"].reduce((prev, curr) => prev + curr)
    // "🛀🏾"
    
    '🛀🏾'.replace("🏾", "")
    // "🛀"

Digging deeper into this it came to my attention that the extra character in between the single emoji after splitting (see example 1) is not an empty string but a zero-width joiner (ZWJ). The ZWJ ("\u200d") acts as the glue between the single emoji, yielding the correct combined emoji sequence.

The full list of Emoji ZWJ Sequences contains all possible sequences, and holds some (toe me) nice surprises. Take the rainbow flag emoji (🏳️‍🌈) for example: that actually is a combination of a white flag emoji and a rainbow emoji!

'🏳' + '\u200d' + '🌈'
// "🏳️‍🌈"

Geekfun! 🤓

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Find relevant emoji from text on the command-line with emoj

Geekfun:

emoj

emoj is written in Node and uses the Dango API, which helps you quickly find emoji by understanding what you type using deep learning.

Installation via npm (requires Node >= 4):

npm install --global emoj

emoj Source (GitHub) →
Dango: Teaching Robots to Feel: Emoji & Deep Learning 👾 💭 💕 →

Emoji in Chrome on Mac / OS X

chrome-osx-color-emoji

Over the weekend an important set of commits (this one amongst others) landed in Chromium, enabling Emoji in Chrome on OS X, and – after 4 years – marking the bug “Emoji does not display in webpage contents on OS X Lion+” as fixed.

When using Canary, things like The Pile Of Poo Test will work just fine from now on 🙂

[FIXED] Issue 62435 – chromium – Emoji does not display in webpage contents on OS X Lion+ →

Twemoji

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

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

Nugget of JavaScript to replace astral symbols (emoji) with images in browsers that don’t support them. Yes, looking at you Chrome on OS X. Images are included in the repo, or can be loaded from a CDN.

Twitter Emoji for Everyone →