Javascript - Convertendo Emoji em HTML Entity

Olá meus Unicórnios! 🦄✨

Se você utiliza ISO-8859-1 em seu Projeto, já deve ter passado por problemas ao inserir Emojis, onde no lugar no Emoji aparece apenas um "?".

Isto ocorre porque o ISO-8859-1 não suporta codificação de Emojis, os Emojis pertencem ao conjunto de Caracteres Unicode (UTF-8).

Podemos simplesmente mudar o Projeto para UTF-8, porem, isto é uma ação árdua e que nem sempre é possível.

Então iremos utilizar uma forma mais simples, iremos converter o Emoji em HTML Entity.

Isto ira transformar este Emoji:

👦

Em:

👦

Que é a representação do Emoji em HTML Entity.

Este texto estranho, ao ser inserido no html, cria o Emoji!

Para inserir os Emojis, iremos utilizar o repositório "missive/emoji-mart":

Iremos configurar o evento "onEmojiSelect" para receber o "unified" dos emojis clicando:

var ObjPickerOptions = {
onEmojiSelect: function(Emoji)
{
  
  console.log(Emoji.native);
  console.log(Emoji.unified);

}
};
var ObjPicker = new EmojiMart.Picker(ObjPickerOptions);
document.body.appendChild(ObjPicker);

Quando for clicado em um dos emojis, iremos receber:

Neste caso, o "unified" é deste Emoji é:

1f606

Mas cuidado, em alguns emojis, pode ter mais de uma cadeira de caracteres:

1f9cf-200d-2642-fe0f

Para exibir este Emoji no site, precisamos adicionar "&#x" antes, e ";" depois de cada parte do Emoji.

No caso acima, ficaria:

🧏‍♂️

Agora iremos criar uma função, no PHP, para transformar este texto no Emoji:

<?
$StringDoEmoji	= "1f9cf-200d-2642-fe0f";

$HexValues      = explode("-", $StringDoEmoji);
$Entities       = array_map(function($Hex) {
	
	return "&#x" . $Hex . ";";

}, $HexValues);

echo implode("", $Entities);
?>

Por hoje é só, meus unicórnios! 🦄✨

Que a magia do arco-íris continue brilhando em suas vidas! Até mais! 🌈🌟