How does emoji search work on Slack?

If you use Slack regularly, you may have noticed that the emoji search feature is… a bit weird.

The results are often much broader than the original search!

Example with the search for the query "math":

We obviously expect to see mathematical operators, but… a mammoth and a bearded woman? It doesn't really make sense… and yet!

You might think it's a simple bug, but it's actually an implementation choice, which has its advantages and disadvantages.

Search Implementation

First, you should know that emoji search is based on the text identifier of the emojis. Each emoji in Slack has a text version like this:

• :heart: for ♥️
• :mammoth: for 🦣
• :one: for 1️⃣
• etc…

This is actually the text identifier that's used when you copy-paste emojis into a conversation!

Subsequence Search

Every search algorithm/method has its advantages and disadvantages, and the selection criteria depend on the desired user experience and technical constraints.

Generally, the choice is made based on:

• Tolerance for false positives
• Tolerance for false negatives
• The number of results that can be displayed to the user

Slack's team opted for detection by "character subsequence"

The way it works is very simple; when you search for the word "flash", Slack will actually search for all emojis that contain, in the correct order, the letters "f", "l", "a", "s" and "h".

Example:

• 🔦 for :flashlight:
• 📸 for :camera_with_flash:

But also:

• 🥿 for :flat_shoe:
• 🇸🇭 for :flag_st_helena:

This method has the characteristic of returning a large number of false positives, but reducing the number of false negatives to zero, and above all being tolerant of missing letters, spaces, etc…

The consequence of returning too many items is offset by the fact that, in its widget, Slack can display up to 72 emojis, and that selection is very fast for the user since it's purely visual

So, despite the drawbacks, it's a good choice in terms of user experience!

Be careful though, this search method is not tolerant of certain spelling or typing mistakes, unlike other algorithms such as the Levenshtein distance!

Regular Expression

One of the advantages of this search method lies in the fact that it can be implemented directly with a regular expression!

Let's go back to our "flash" example

The regular expression to perform a character subsequence search for this query would be as follows:

/:.*f.*l.*a.*s.*h.*:/

It's actually very easy to generate this RegEx with just a few lines of JavaScript, like this:

const data = [":flashlight:", ":camera_with_flash:", ":flat_shoe:", ":flag_st_helena:"];

const query = "flash";
const pattern = query.split('').join('.*');
const regex = `:.*${pattern}.*:`;

data.every(emoji => new RegExp(regex, "gmi").test(emoji)) // true

And there you go! You can now implement your own character subsequence search in your projects!

Acknowledgement

Thanks to @DarcyYoung for sparking my curiosity on The49's Slack, which led me to write this article today!