正则表达式匹配可以与肤色修饰符有效结合的表情符号？

Question

检测表情符号（通常意义上的“表情符号”）的JS代码很简单：

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

是否有一些同等简单的方法来检测可以有效添加肤色修饰符的表情符号？

一个关键要求是，随着越来越多的表情符号被添加，或者现有的表情符号变得可以肤色，多年来我不必更新正则表达式。基本上我想知道是否有类似Skin Unicode 属性转义的东西，或者其他一些优雅且面向未来的解决方案。

---

注意事项：

• 它必须在没有 DOM 访问的情况下工作（即服务器端、worker 等）。
• 请注意，目标不是检测肤色修饰符，而是检测可以有效添加肤色修饰符的表情符号 - 例如。正则表达式/函数应匹配????（没有肤色修饰符，但添加一个有效）。
• 我想强调的是，一个大而老的 unicode-ranges 正则表达式不是面向未来的不符合我的特定用例的要求。但请注意，一堆 Unicode 范围确实符合要求如果它是未来的证明。
• This question 在考虑标题时似乎很相似，但在阅读问题的主体时，它提出了一个不同的问题。

Answer 1

相关的 Unicode 字符属性称为Emoji_Modifier_Base。 /\p{Emoji_Modifier_Base}/u.test() 将为每个可以使用肤色修饰符的表情符号返回 true。

Answer 2

您可以使用Fitzpatrick scale 检测肤色表情符号。带有肤色的表情符号将包含六个 Fitzpatrick 尺度 unicode 中的任何一个。

编辑：

此解决方案使用 Element.getBoundingClientRect() 来确定连接 Fitzpatrick 肤色表情符号后表情符号是否具有相同的宽度和高度。

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