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

发布于 2025-01-21 18:52:49 字数 837 浏览 0 评论 0原文

检测表情符号的JS代码（从通常的意义上讲，“表情符号”）简直就是：

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

是否有一些等效的方法来检测表情符号可以有效地添加给它们的肤色修饰符？

关键要求是，随着添加更多的表情符号或现有表情符号，我不必在多年来更新正则是肤色。基本上，我想知道是否有类似skin Unicode属性逃脱的东西，或者其他一些优雅和未来的范围解决方案。

注意：

它必须无需DOM访问就可以工作（即服务器端，工人等）。
请注意，目标不是检测肤色修饰符，而是检测可以有效添加肤色修饰符的表情符号 - 例如，REGEX/功能应匹配（没有肤色修饰符，但是在其中添加一个是有效的）。
我想强调的是，一个不符合未来的不适合我特殊用例的要求的大型不适合未来的不符合条件。但是请注意，如果，一堆Unicode范围确实符合要求，这是将来的证明。
这个问题在考虑时似乎是相似的标题，但是在阅读问题的正文后，它问了一个不同的问题。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最偏执的依靠 2025-01-28 18:52:50

您可以使用 fitzpatrick scale 以检测出肤色的emoji。具有肤色的表情符号将包含六个fitzpatrick秤中的任何一个。

编辑：

此解决方案使用元素。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('

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

回复收藏 0 原文