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

Question

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.

Answer 1

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.

Answer 2

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