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>');
}

Tips and Tricks Programming JavaScript Regular Expressions Unicode

Also by me

Django GDPR Cookie Consent app

For Django websites that use cookies.

my dev product

my book

Django 3 Web Development Cookbook

Learn how to build practical web projects with Django 3.

my SaaS

Strategic prioritizer "1st things 1st"

Helps make difficult choices at ease.

For you and your best friends.