Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time

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!

There are Emoji edge cases when using the described Unicode property escapes. Make sure to read to the end of the article!

How to detect Emojis with JavaScript regular expressions?

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 for for Unicode property escapes looks pretty good, too! ๐ŸŽ‰

MDN Compat Data (source)
Browser support info for Unicode property escapes (\p{...})

If you have comments on Emojis detection in JavaScript, 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. A property escape such as \p{Emoji} matches every single Emoji code point and this can be a problem.

Let's have a look at an example:

"๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ".replaceAll(/\p{Emoji}/gu, '-'); // '----'

Various Emojis, such as the "Family" one, are rendered as a single symbol but consist of more than one code point. Unicode property escapes match every one of them so that you might run into unexpected behavior.

If you wonder what could count as an Emoji have a look at this extensive list.

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

Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 3 days ago.

Related Topics

Related Articles