Comment fonctionne la recherche d’émojis sur Slack ?

Si vous utilisez Slack régulièrement, vous aurez peut-être remarqué que la fonction de recherche des émojis est… un peu bizarre.

Les résultats sont souvent beaucoup plus larges que la recherche d’origine !

Exemple avec la recherche pour la requête « math » :

On s’attend évidemment à voir des opérateurs mathématiques, mais… un mammouth et une femme à barbe ? Ça n’a pas vraiment de sens… et pourtant !

On pourrait penser à un simple bug, mais c’est bel et bien un choix d’implémentation, qui a ses avantages et ses inconvénients.

Implémentation de la recherche

D’abord il faut savoir que la recherche des émojis est basée sur l’identifiant textuel de ces derniers. Chaque émoji dans Slack possède une version texte comme ceci :

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

C’est d’ailleurs l’identifiant textuel qui est utilisée lorsque vous copiez-collez des émojis dans une conversation !

La recherche par sous-séquence

Chaque algorithme/méthode de recherche possède ces avantages et ses inconvénients, et les critères de sélection dépendent de l’expérience utilisateur voulue et des contraintes techniques.

En général on va choisir en fonction :

• De la tolérance aux faux-positifs
• De la tolérance aux faux-négatifs
• Du nombre de résultats qu’il est possible d’afficher à l’utilisateur

Les équipes de Slack ont opté pour une détection par “sous-séquence de caractères”

Le fonctionnement est très simple ; Lorsque vous recherchez le mot “flash”, Slack va en réalité rechercher tous les émojis qui contiennent, dans le bon ordre, les lettres “f”, “l”, “a”, “s” et “h”.

Exemple :

• 🔦 pour :flashlight:
• 📸 pour :camera_with_flash:

Mais aussi :

• 🥿 pour :flat_shoe:
• 🇸🇭 pour :flag_st_helena:

Cette méthode a pour caractéristique de retourner un nombre important de faux-positifs, mais de réduire le nombre de faux négatifs à zéro, et surtout d’être tolérant aux oublis de lettres, d’espaces etc…

La conséquence de retourner un trop grand nombre d’éléments est contrebalancé par le fait que, dans son widget, Slack peut afficher jusqu’à 72 émojis, et que la sélection est très rapide pour l’utilisateur car uniquement visuelle

C’est donc, malgré les inconvénients, un bon choix en terme d’expérience utilisateur !

Attention néanmoins, cette méthode de recherche n’est pas tolérante à certaines fautes d’orthographes ou de frappe, contrairement à d’autres algorithmes comme la distance de Levenshtein !

Expression régulière

L’un des avantages de cette méthode de recherche réside dans le fait qu’elle peut être implémentée directement avec une expression régulière !

Reprenons notre exemple de “flash”

L’expression régulière pour effectuer une recherche de sous-séquence de caractères pour cette requête serait la suivante :

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

Il est d’ailleurs très facile de générer cette RegEx avec seulement quelques lignes de JavaScript, comme ceci :

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

Et voilà ! Vous pouvez désormais implémenter votre propre recherche de sous-séquence de caractère dans vos projet !

Remerciement

Merci à @DarcyYoung d’avoir piqué ma curiosité sur le Slack de The49, ce qui m’a amené à écrire cet article aujourd’hui !