Javascript Find Emoji in String and Parse

Question

After TONS of research, I have found how to parse emoji in realtime using the Twemoji library.

Now, I need to figure out how to identify if there's emoji within some text, grab the position of that emoji and execute the parsing function.

Some example text can be

It is a great day 😀.

Need to find the 😀 within the whole string and use the following function to get its hex code, return the surrogate pairs and parse with the Twemoji library.

function entityForSymbolInContainer(selector) {
    var code = data.message.body.codePointAt(0);
    var codeHex = code.toString(16);
    while (codeHex.length < 4) {
        codeHex = "0" + codeHex;
    }

    return codeHex;
}

// Get emoji hex code
    var emoji = entityForSymbolInContainer(data.message.body);
// For given an HEX codepoint, returns UTF16 surrogate pairs
    var emoji = twemoji.convert.fromCodePoint(emoji);
// Given a generic string, it will replace all emoji with an <img> tag
    var emoji = twemoji.parse(emoji);

I am using the following check to see if there's emoji within the text. Problem is that for a simple grinning face (😀) it doesn't alert me. However, if I type in the "shirt and tie" (👔) it will alert me to that.

var string = "It is a great day 😀.";
var emojiRegex = /([\uE000-\uF8FF]|\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDDFF])/g;

if (string.match(emojiRegex)) {
    alert("emoji found");
}

Please help on the issue of the regex not picking up the emoji. After that, I should be able to just find that within the string.

Thank you!

Answer 1

Nowadays with ES2018 we can use Unicode Property Escapes in a regex match:

\p{…}

For simple emojis it would be:

"Be kind 😊, smile".match(/\p{Emoji}+/gu)

For emojis including glyphs glued with ZERO WIDTH JOINER like 👨‍👩‍👧‍👦 it can be:

"My Family 👨‍👩‍👧‍👦".match(/[\p{Emoji}\u200d]+/gu)