How to Detect Emoji Using JavaScript

javascript detect if a string contains only unicode emojis

Just a minor adjustment to find if the string has only emojis and spaces...

const ranges = [
  '\ud83c[\udf00-\udfff]', // U+1F300 to U+1F3FF
  '\ud83d[\udc00-\ude4f]', // U+1F400 to U+1F64F
  '\ud83d[\ude80-\udeff]', // U+1F680 to U+1F6FF
  ' ', // Also allow spaces
].join('|');

const removeEmoji = str => str.replace(new RegExp(ranges, 'g'), '');

const isOnlyEmojis = str => !removeEmoji(str).length;

Regex to match emojis that can be validly combined with skin tone modifiers?

The relevant Unicode character property is called Emoji_Modifier_Base. /\p{Emoji_Modifier_Base}/u.test() will return true for every emoji character that can take a skin tone modifier.

How to parse emojis in JS?

The following EBNF can be used to quickly scan for possible emoji. Those possible emoji can then be verified where necessary by performing validity tests according to the definitions, or checking against the RGI emoji set. It is much simpler than the expressions currently in the definitions. It includes a superset of emoji as a by-product of that simplicity, but the extras can be weeded out by validity tests.

EBNF	Notes
possible_emoji := flag_sequence \| zwj_element (\x{200D} zwj_element)*	\x{200D} = zero-width joiner
flag_sequence := \p{RI} \p{RI}	\p{RI} = Regional_Indicator
zwj_element := \p{Emoji} emoji_modification?
emoji_modification := \p{EMod} \| \x{FE0F} \x{20E3}?	\p{EMod} = Emoji_Modifier \x{FE0F} = emoji VS \x{20E3} = enclosing keycap
tag_modifier := [\x{E0020}-\x{E007E}]+ \x{E007F}	\x{E00xx} are tags \x{E007F} = TERM tag

How can I detect rendering support for emoji in JavaScript?

Paint a glyph (in the Emoji range that is the one most popular by vendors, in the range of Emojis by the Unicode Consortium like Happy face, Kiss, Sad face etc) to canvas and read a pixel using getImageData. If the pixel's Alpha channel data[3] you're interested-in is not transparent (like for example in the center of ) , else, it might be an Emoji /p>

function supportsEmoji () {
  const ctx = document.createElement("canvas").getContext("2d");
  ctx.canvas.width = ctx.canvas.height = 1;
  ctx.fillText(", -4, 4);
  return ctx.getImageData(0, 0, 1, 1).data[3] > 0; // Not a transparent pixel
}

console.log( supportsEmoji() );

Check if string contains only emojis - Javascript

You need to add + or * before $ in your regex. like the following.

var emoji_regex = /^(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c[\ude32-\ude3a]|[\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])+$/;
const emo_test = str => console.log(emoji_regex.test(str));
emo_test("); //trueemo_test("hello); //falseemo_test("9034); //falseemo_test("$z5##); //falseemo_test("); //true