Tips for working with emoji

Emoji give us a very easy way of using graphics in our content. I've been making simple games and have found that emoji offer me a very quick to use, performant alternative to using images.

They're text, more or less

They look like images but they're not, they're text. If you want to select an emoji with CSS or JavaScript you need to wrap it in a tag, like a span.

Styling emoji

You can style some properties of emoji as if they were text but not others. You can, for example, italicise them. You can change the size with font-size. You can use filter(). The one thing you can't easily change is colours. The only way to do this is by using CSS filters, filter(), like hue-rotate(), grayscale(), sepia() and saturate().

😀 😀 😀 😀 😀 😀

Exampes above: no style, font-style: italic, filter: hue-rotate(180deg), font-size: 1.5em, filter: grayscale(1) and filter: brightness(0.5).

You can also change their position using positioning or transforms. And, of course, you can use any of these styles in animations.

Adding emoji to your code

You can just copy any existing emoji and paste them where you want to use them, or you can use an emoji picker. Most operating systems have one. On Windows you can press the Windows key and . (dot) together to bring it up.

You can use emoji pretty much everywhere you'd use a string, so they can be CSS class names, variable names in JavaScript. You can use them in your HTML page title.

To add one dynamically you'd just use it like any other string. For example,

const alien = document.createElement("span");
alien.innerHTML = "👽";

You could also use textContent or innerText.

You can create an array of emoji, just as you would with any string.

const fastFood = ["🍕", "🍔", "🍟", "🌭", "🌮"];

Checking for emoji

We can use this RegEx to test for the presence of emoji.

const someText = "😎";
const emojiRegex = /\p{Emoji}/gu;
if (emojiRegex.test(someText)) {
  console.log("has emoji");
}

Limiting number of emoji

I had this requirement in a game. I allow the user to select an emoji to use in a text input (emojiInput) but have to restrict it to one.

emojiInput.addEventListener("change", () => {
  const emojiArray = [...emojiInput.value];
  if (emojiArray.length > 1) {
    emojiArray = [emojiArray[0]];
    emojiInput.value = emojiArray[0];
  }
}

We push the input's value string into an array, which gives us an array of the characters, or emoji. This can then be used to replace the input's value with just the first character or emoji. We can then use the RegEx above to test if it is in fact an emoji.

Simply using .length won't work as a single emoji can be several characters in length but the spread operator [...emojis] or Array.from() will separate the emoji as a single array item.

Counting emoji

Alternatively, we could iterate over our list of characters or emoji to test each with RegEx and filter to just a list of emoji.

const someText = "Chris 😎 is on holiday 🌴";
const characterArray = [...someText];
console.log(characterArray); // ["C", "h", "r", "i", "s", " ", "😎", etc.]
const emojiRegex = /\p{Emoji}/gu;
const emojiOnly = characterArray.filter((char) => {
  return emojiRegex.test(char);
});
console.log(emojiOnly); // ["😎", "🌴"];
const emojiCount = emojiOnly.length;
console.log(emojiCount); // 2

Examples in name picker games

These simple games show examples of emoji being dynamically added, styled and animated.

RandoRacer

RandoTag

RandoReaper