Insert emojis

Written byPhuoc Nguyen

Created

04 Oct, 2023

Emoji is a visual representation of emotions, objects, or symbols. They're widely used in digital communication and have become an integral part of online conversations. Their importance lies in their ability to convey emotions and add context to text-based messages. With the rise of social media and messaging apps, emoji have become even more popular as they allow users to express themselves in a fun and engaging way.

Businesses have also started incorporating emoji into their marketing campaigns as a way to connect with younger audiences who are more likely to engage with visual content. Overall, emoji has become a crucial element of modern communication, and its importance in the web is undeniable.

In this post, we'll show you how to quickly insert an emoji into your text area by implementing a functionality that suggests emojis for users to choose from.

#Updated data structure for emoji suggestions

In our previous post, we introduced a technique to suggest words based on the current word being typed. Now, we're taking it up a notch by using the same technique to suggest emojis when users type the ":" character. We'll be using a modified data model, but the approach is the same.

Instead of a list of keywords, our suggestions will now be a list of objects with two properties: `symbol` and `name`.

The `symbol` property represents the actual emoji, while the `name` property will be used to look up the corresponding emoji based on the keyword users typed.

Here's a sample code to illustrate the updated data structure:

const suggestions = [
    { symbol: "😀", name: "Grinning Face" },
    { symbol: "😃", name: "Smiling Face with Open Mouth" },
    { symbol: "😄", name: "Smiling Face with Open Mouth and Smiling Eyes" },
    { symbol: "😁", name: "Grinning Face with Smiling Eyes" },
    {
    symbol: "😆",
    name: "Smiling Face with Open Mouth and Tightly-Closed Eyes",
    },
    { symbol: "😅", name: "Smiling Face with Open Mouth and Cold Sweat" },
    { symbol: "🤣", name: "Rolling On The Floor Laughing" },
    { symbol: "😂", name: "Face with Tears of Joy" },
    { symbol: "🙂", name: "Slightly Smiling Face" },
    { symbol: "🙃", name: "Upside-Down Face" },
    ...
];

#Finding emojis

To adapt our approach to a new data structure, we need to make some changes to the input event handler.

First, we check if the word being typed is not empty and starts with a : character.

const currentWord = currentValue
    .substring(startIndex + 1, cursorPos)
    .toLowerCase();
if (currentWord === '' || !currentWord.startsWith(':')) {
    return;
}

Next, we extract the keyword by removing the first : character.

const searchFor = currentWord.slice(1);

Finally, we search for emojis with names similar to the keyword using the following sample code:

const matches = suggestions
    .filter((suggestion) => suggestion.name.toLowerCase().indexOf(searchFor) > -1)
    .slice(0, 10);

#Adding emojis to your text

In the previous post, clicking each suggestion item would insert the whole word into the editor. However, in this example, we will only insert the emoji symbol. To do this, we need to adjust the click event handler as follows:

const option = document.createElement('div');
option.innerHTML = `${match.symbol} ${match.name}`;
option.setAttribute('data-symbol', match.symbol);
option.classList.add('container__suggestion');

option.addEventListener('click', function () {
    replaceCurrentWord(this.getAttribute('data-symbol'));
    suggestionsEle.style.display = 'none';
});

In this example, we have added a simple `data-symbol` attribute to each suggestion item, which sets the corresponding emoji using the `setAttribute` function. When users click on a suggestion, this attribute is retrieved using the `getAttribute` function, and the current word is replaced with the corresponding emoji.

Check out the final demo below to see how it works. Simply type the : character to see suggested emojis and start using them right away!

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Add autocomplete to your text area←

Mention→

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn