How to detect Emojis in JavaScript strings

When dealing with user-generated content, there's a high chance that you have to deal with strings full of Emojis. Emoji rendering can come with challenges, so you may want to detect when strings include Emojis and replace them with images.

Let's find out how to spot all these cute symbols!

Luckily, JavaScript regular expressions come with a Unicode mode these days.

There's more to it, though. When you enable Unicode mode in a regular expression, you can also use Unicode property escapes. Unicode property escapes (\p{} or \P{}) allow you to match Unicode characters based on their properties and characteristics.

That's right; you can match currency symbols, non-Latin characters, and, you guessed it, Emojis!

Here's an example snippet:

const emojiRegex = /\p{Emoji}/u;
emojiRegex.test('⭐'); // true

// The capital 'p' negates the match
const noEmojiRegex = /\P{Emoji}/u;
noEmojiRegex.test('⭐'); // false

If you want to replace and alter Emojis in JavaScript strings, you can do that with String.replaceAll, too.

// Note the 'g' flag to replace allEmojis
'🙈–👍–⭐'.replaceAll(/\p{Emoji}/ug, '_'); // '_–_–_'

The browser support looks pretty good for Unicode property escapes, too!

If you have comments on this topic, please give me a shoutout on Twitter or write me a good old email. I'm keen on learning more about it!

Mathias Bynes pointed out that there are shortcomings with this approach of Emoji detection. \p{Emoji} only matches single codepoint Emojis.

Here's an example:

"👨‍👩‍👧‍👦".replaceAll(/\p{Emoji}/gu, '-'); // '----'

Various Emojis, such as the "Family" one, consist of various codepoints. All included codepoints will be matched. This can lead to unexpected behavior.

There's a reason why Mathias' emoji-regex package has 49 milion weekly downloads, so make sure to check it out!