JavaScript Cross platform emojis in iOS and android

Question

What is the best way to obtain the normal emoji (the yellow one, first in the image) in Android. If the emojis could come with different colors (iOS emojis). The reason is that Android doesn't have colored emojis.

All emojis in android less the first one shows a '?' symbol.

I need to parse the emojis in JavaScript but I didn't find any good library. Maybe there is a replace function that solves this.

Answer 1

Emojis

First let's understand what an emoji is. An emoji is a combination of many characters as it is implemented in Unicode. For example, the "light skin tone male shrug emoji" is actually the following 5 characters combined:

0x1f937 0x1f3fb 0x200d 0x2642 0xfe0f

- 0x1f937: Person Shrugging
- 0x1f3fb: Light skin tone  
- 0x200d: Zero width joiner     (Used to combine two characters, in this case
                                 the Light skin tone Person shrugging and the
                                 male sign.)
- 0x2642: Male sign
- 0xfe0f: Variation selector-16 (Used to indicate an Emoji)

Unicode in JavaScript

Good news is, we can simply remove 0x1f3fb to get the version without skin tone. Bad news is however, JavaScript does not support UTF-16, so it shows up as

0xd83e 0xdd37 0xd83c 0xdffb 0x200d 0x2642 0xfe0f
└───────── Uh oh ─────────┘

instead which is incorrect because it doesn't know what a surrogate pair is. To calculate the correct code point, we will have to reference the UTF-16 standard and make the necessary corrections. Fortunately, someone else already did the hard work and here I'm converting the string into proper UTF-16 and removing the part that I don't want:

// Defines the range of skin tone modifiers
var modifiersMin = 0x1F3FB, modifiersMax = 0x1F3FF;

// Emoji with U+1F3FB "light skin tone" modifier combined with "male sign"
var string = new UnicodeString("🤷🏻‍♂️");

// Removes the modifier
string = new UnicodeString(string.codePoints.filter(c => {
    return c < modifiersMin || c > modifiersMax;
});

alert(string.toString());

You can see it in action here: https://jsfiddle.net/DerekL/b5848tor/

Now that you understand how emojis work, you can also do this:

// The replace function that you would like
var skinToneModifiers = new RegExp("\ud83c[\udffb-\udfff]", "g");
var string = "🤷🏻‍♂️";
// Remove skin tone modifier
string = string.replace(skinToneModifiers, "");

which works much faster but not exactly clear why it works without understanding the concepts behind it.

See it in action: https://jsfiddle.net/DerekL/sn4n689r/