About Detecting Emoji in JavaScript

Emojis are quite a beast of Unicode. They might take a varying amount of bytes depending on modifiers (like color and gender), and it's complicated to detect them. Nevertheless, here is one approach to wrap emoji into spans using regular expressions:

const wrapEmoji = (text) => {
    const reEmoji = /\p{RI}\p{RI}|\p{Emoji}(\p{EMod}+|\u{FE0F}\u{20E3}?|[\u{E0020}-\u{E007E}]+\u{E007F})?(\u{200D}\p{Emoji}(\p{EMod}+|\u{FE0F}\u{20E3}?|[\u{E0020}-\u{E007E}]+\u{E007F})?)+|\p{EPres}(\p{EMod}+|\u{FE0F}\u{20E3}?|[\u{E0020}-\u{E007E}]+\u{E007F})?|\p{Emoji}(\p{EMod}+|\u{FE0F}\u{20E3}?|[\u{E0020}-\u{E007E}]+\u{E007F})/gu;
    return text.replace(reEmoji, '<span class="emoji" role="img" aria-hidden="true">$&</span>');
}