FixEmoji

fixEmojis.js

// This is just a regex I found on the internet that allows you to detect emojis
const emojisRegex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/g;

// Add the styling required to fix emojis
const css = document.createElement('style');
css.innerHTML = `.fixed-emoji { font-family: emoji; }`;
document.head.appendChild(css);

// https://byshynet.com/fixing-black-and-white-emojis-using-javascript/
function fixEmojis(selector) {
  // Go through all of the elements
  document.querySelectorAll(selector).forEach((tag) => {
    // Get the inner html for the emoji
    let html = tag.innerHTML;

    // Find all of the emojis
    const emojis = html.match(emojisRegex);

    // If emojis were found
    if (emojis) {
      // Go through each emoji, replace it with a span called 'fixed-emoji'
      html = html.replace(emojisRegex, function($1) { return '<span class="fixed-emoji">'+$1+'</span>'; });

      // Update the HTML
      tag.innerHTML = html;
    }
  });
}

jQuery(document).ready(function() {
  fixEmojis("body");
});