Question

0

122

Views

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

The JS code to detect emojis (in the usual sense of the term "emoji") is simply:

let str = "...";
if(/\p{Extended_Pictographic}/u.test(str)) {
  // do something
}

Is there some equivalently simple way to detect emojis that can have skin tone modifiers validly added to them?

A key requirement is that I don't have to update the regex over the years as more emojis are added, or existing emojis become skin-tone-able. Basically I'm wondering if there's something like a Skin Unicode property escape, or some other elegant and future-proof solution.

Notes:

It must work without DOM access (i.e. server-side, workers, etc.).
Note that the goal is not to detect skin tone modifiers, but to detect emojis that can validly have a skin tone modifier added to it - e.g. the regex/function should match 👶 (doesn't have skin tone modifier, but it is valid to add one to it).
I want to emphasise that a big-old-bunch-of-unicode-ranges regex that's not future-proof does not fit the requirements of my particular use case. But note that a bunch of Unicode ranges does fit the requirements if it's future proof.
This question appears to be similar when considering the title, but upon reading the body of the question, it's asking a different question.

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

You can use Fitzpatrick scale to detect a skin-toned emoji. An emoji with a skin tone will contain any one of the six Fitzpatrick scale unicodes.

EDIT:

This solution uses Element.getBoundingClientRect() to determine whether an emoji will have the same width and height after having concatenated the Fitzpatrick skin tone emoji.

function isEmojiSkinToneAdaptable(emoji) {
  const SKIN_TONES = [
    '\u{1f3fb}', // skin tone 1 & 2
    '\u{1f3fc}', // skin tone 3
    '\u{1f3fd}', // skin tone 4
    '\u{1f3fe}', // skin tone 5
    '\u{1f3ff}', // skin tone 6
  ];
  
  function getRemovedSkinToneEmoji(emoji) {
    let emojiCopy = ' '.concat(emoji).slice(1);
    SKIN_TONES.forEach(skinTone => {
      emojiCopy = emojiCopy.replace(skinTone, '');
    })
    return emojiCopy;
  }
  
  function getEmojiRects(emoji) {
    let span = document.createElement('span');
    span.style.position = 'fixed';
    span.style.top = '-99999px';
    span.textContent = emoji;
    document.body.append(span);
    let emojiRects = span.getBoundingClientRect();
    span.remove();
    return emojiRects;
  }

  let baseEmoji = getRemovedSkinToneEmoji(emoji);
  let skinToneEmoji = baseEmoji + SKIN_TONES[1];
  
  let baseEmojiRects = getEmojiRects(baseEmoji);
  let skinToneEmojiRects = getEmojiRects(skinToneEmoji);

  return baseEmojiRects.width === skinToneEmojiRects.width 
    && baseEmojiRects.height === skinToneEmojiRects.height;
}

console.log(`Human with skin tone: ${isEmojiSkinToneAdaptable('👶🏽')}`); // true
console.log(`Thumbs up without skin tone: ${isEmojiSkinToneAdaptable('👍')}`); // true
console.log(`Animal: ${isEmojiSkinToneAdaptable('🦁')}`); // false

about 4 years ago · Juan Pablo Isaza Report

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-30T19:07:01.959Z

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.

0

122

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

2 answers

0

0

Find remote jobs

Andres GPT