javascriptregexemoji

Some emojis don't match my Emoji-only regex

I'm building a chat, and I want to increase the font size of the text when it contains only Emojis

So, we have this regex that matches all Emojis. https://www.regextester.com/106421

I moved it in a JS function, but there are some that don't return true in my function (even if they match in the above Regex link).

var emojiRanges = [
  '\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff]',
  ' ',
].join('|')


function isEmojiOnly(text) {
  text = text.replace(new RegExp(emojiRanges, 'g'), '')
  return text.length === 0
}


console.log(isEmojiOnly('💐🌹🥀🌷🌺🌸')) // returns true
console.log(isEmojiOnly('💐🌹🥀🌷🌺🌸🌾🍁🍂🍀🍃🌱💮')) // returns true
console.log(isEmojiOnly('🏵️')) // returns false
console.log(isEmojiOnly('☘️')) // returns false

It works pretty well on Facebook Messenger

enter image description here

Any idea? =)

Solution

  • Major browsers now support unicode property escape which allows for matching emojis based on their belonging in the Emoji unicode category: \p{Emoji} matches an emoji, P{Emoji} matches a non-emoji. Make sure to include the u flag at the end.

    const isOnlyEmojis = str => /^\p{Emoji}*$/gu.test(str);

console.log(isOnlyEmojis('🌼')); // true
console.log(isOnlyEmojis('🌼🌺🌸')); // true
console.log(isOnlyEmojis('hello 🌼')); // false
console.log(isOnlyEmojis('hello')); // false