CODEWITHSUNDEEP
javascript
satya test
satya test

Reputation: 65

How to find the unicode combinations?

I have some emojis like (👩‍💻 👨‍💻 🇧🇬 🇧🇸 )this. And I'm adding a span to this each and every emoji. I have a processing code to convert it to a span here is the function which will convert to the span 

emojiSpan = function (emojis) {
  if (!emojis)
    return;
  try {
    let emojiSpan;
    var unicodeMatch = /([\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2694-\u2697]|\uD83E[\uDD10-\uDD5D])/g;
    if (emojis.match(unicodeMatch)) {
      emojis.match(unicodeMatch).filter(function (unicode) {
        if (unicode.trim().length === 1) return emojis;
        emojiSpan = _getEmojiSpan(unicode);
        emojis = Utility.replaceAll(emojis, unicode.trim(), emojiSpan);
      });
    }
  } catch (error) {
    console.error("Error while parsing emoji", error.stack);
  }
  return emojis;
};

var _getEmojiSpan = function(emoji){
if(!emoji)
  return;
return `<span class="emojiNative">${emoji}</span>`;  
}

Here, the input is 👩‍💻 👨‍💻 🇧🇬 🇧🇸 and I'm getting output like 

<span class="emojiNative">👩</span>‍
<span class="emojiNative">
  <span class="emojiNative">💻</span>
</span>
<span class="emojiNative">👨</span>‍
<span class="emojiNative">
  <span class="emojiNative">💻</span>
</span>
<span class="emojiNative">
  <span class="emojiNative">🇧</span>
</span>
<span class="emojiNative">🇬</span>
<span class="emojiNative">
  <span class="emojiNative">🇧</span>
</span>
<span class="emojiNative">🇸</span>

The emojis are getting separated. How can I get the exact emojis? please help me.

The expected output is 

<span class="emojiNative">👩‍💻</span>‍
<span class="emojiNative">👨‍💻</span>
<span class="emojiNative">🇧🇬</span>
<span class="emojiNative"> 🇧🇸 </span>

Upvotes: 2

Views: 183

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

Emoji that "merge" into a single one, such as the male/female programmer, are separated by a Zero-Width Joiner U+200D. You can extend to regex to look like [emoji](?:\u200D[emoji])* to add support for combined emoji.

As for the flags, those are made by having two Regional Indicators spelling out the country code. These indicators are in a fixed range, so when you find that range you can check if there are two of them, and keep them together if so:

(?:\uD83C[\uDDE6-\uDDFF]){2}

Make sure this goes before the other \uD83C segment of your regex.

emojiSpan = function (emojis) {
  if (!emojis)
    return;
  try {
    var unicodeMatch = /(?:\uD83C[\uDDE6-\uDDFF]){2}|(?:[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2694-\u2697]|\uD83E[\uDD10-\uDD5D])(?:\u200D(?:[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2694-\u2697]|\uD83E[\uDD10-\uDD5D]))*/g;
    emojis = emojis.replace(unicodeMatch, '<span class="emojiNative">$&</span>');
  } catch (error) {
    console.error("Error while parsing emoji", error.stack);
  }
  return emojis;
};

var _getEmojiSpan = function(emoji){
if(!emoji)
  return;
return `<span class="emojiNative">${emoji}</span>`;  
}
document.body.innerHTML += emojiSpan("👩‍💻 👨‍💻 🇧🇬 🇧🇸");

Upvotes: 1

Related Questions