Méthodes principales pour surligner du texte

Le surlignage de texte peut sembler simple à première vue - il suffit de changer le fond en jaune - mais c’est en réalité très complexe. Par exemple, dans l’image ci-dessous, la partie surlignée s’étend sur plusieurs éléments et contient une partie du texte sous les éléments.

Voici un aperçu des méthodes courantes d’implémentation du surlignage de texte, en combinant leurs avantages, inconvénients et cas d’usage pratiques pour présenter les principales solutions techniques.

CSS Highlight API — Méthode moderne et efficace de surlignage de texte

C’est actuellement le meilleur choix pour implémenter le surlignage de texte, simple à utiliser et performant. Le seul inconvénient est que les navigateurs nécessitent une version récente, mais en 2025, tous les navigateurs principaux le supportent.

Objet Highlight

D’abord, vous devez créer un objet Range pour chaque zone de surlignage. Range est une API qui existe depuis longtemps, représentant une zone continue dans l’arbre DOM. Si vous n’êtes pas familier avec cela, faites vos recherches.

const range = new Range();
range.setStart(someNode, startOffset);
range.setEnd(someNode, endOffset);

Puis ajoutez-le à l’objet Highlight. Comme le surlignage peut avoir plusieurs zones non continues, un objet Highlight peut également avoir plusieurs Range.

const highlight = new Highlight(range1, range2, ..., rangeN);

C’est un objet similaire à Set, donc vous pouvez utiliser des méthodes comme add, delete pour modifier les Range inclus.

CSS.highlights

Ensuite, ajoutez l’objet Highlight à CSS.highlights. C’est un objet similaire à Map, avec des méthodes d’ajout et de suppression identiques à Map, comme get, set, delete, etc., et les méthodes de parcours sont également les mêmes.

Comme avec Map, lors de l’ajout d’un Highlight, vous devez lui donner une clé qui servira de nom à ce highlight. Ce nom est très utile, comme nous le verrons plus bas, nous l’utilisons pour définir le style de surlignage, par exemple un fond vert. Donc le style de surlignage d’un même objet Highlight est identique. Si vous voulez surligner un autre texte en bleu, vous devez créer un nouveau highlight.

CSS.highlights.set("my-highlight", highlight);

Définir le pseudo-élément ::highlight

Ensuite, c’est au tour du style CSS d’entrer en scène. Utilisez le pseudo-élément ::highlight(nom_du_highlight) pour définir le style de surlignage.

::highlight(my-highlight) {
  background-color: yellow;
  color: black;
}

Note : Vous ne pouvez utiliser que quelques propriétés CSS, comme background-color, color, cursor, etc. Voir la spécification pour plus de détails.

Modifier dynamiquement la portée du surlignage

CSS.highlights est comme un Map, il a des méthodes similaires pour mettre à jour Highlight :

• CSS.highlights.clear()
• set(highlightName, Highlight)
• delete(highlightName)

L’objet Highlight est comme un Set, avec des méthodes similaires pour mettre à jour Range :

• Highlight.add(range)
• delete(range)

Modifier le style des éléments de texte

Trouvez les nœuds de texte cibles en parcourant le DOM et modifiez directement leur style de fond pour implémenter le surlignage.

• Nécessite de modifier le DOM, le navigateur refait la mise en page, ce qui a un coût de performance important.
• L’implémentation du surlignage multi-éléments (c’est-à-dire que la zone de surlignage s’étend sur plusieurs éléments) est relativement complexe.
• Convient aux scénarios où le contenu surligné est relativement fixe et la portée est petite.

Superposer une couche supplémentaire pour rendre le surlignage sans modifier le DOM du texte

Créez une couche de superposition transparente, calculez la position à l’écran du texte cible, puis dessinez le surlignage semi-transparent sur la couche de superposition.

Positionner la zone de surlignage

• Utilisez Element.getClientRects() ou getBoundingClientRect() pour obtenir les coordonnées du texte sur la page.
• Lors du traitement de texte multi-lignes, chaque ligne correspond à une zone rectangulaire, nécessitant de dessiner séparément les blocs de surlignage.
• Lorsque la taille de la fenêtre change ou que la taille de la police change, il faut recalculer la position du surlignage, ce qui peut affecter les performances.

Méthodes de dessin du surlignage

DIV comme couche de superposition

Utilisez un conteneur parent avec positionnement absolu et des éléments enfants avec fond semi-transparent pour couvrir le texte. Par exemple, l’éditeur Monaco utilise cette solution pour implémenter le surlignage de mots identiques.

<div class="editor" style="position: relative;">
  <div class="overlay" style="position: absolute; height: 0;">
    <div
      class="highlight"
      style="top:0; left:57px; width:23px; background-color: rgba(173,214,255,0.15);"
    ></div>
    <!-- Ajouter plus de zones de highlight -->
  </div>
  <div class="content">
    <!-- Contenu du texte -->
  </div>
</div>

• La position de l’overlay est absolute, tout en s’assurant que l’élément parent n’est pas position: static, pour que absolute fonctionne. Cela permet aux éléments de surlignage internes de se positionner n’importe où.
• Pour être au-dessus du texte, il suffit de placer l’overlay avant le conteneur de texte dans le HTML. La hauteur de l’overlay est 0 pour éviter d’affecter l’interaction avec le texte en dessous.
• Ajoutez des éléments internes, définissez background-color comme couleur de surlignage semi-transparente, positionnez à l’endroit du texte surligné, définissez la largeur.
• L’éditeur Monaco (VSCode est basé dessus) utilise cette méthode. Voir la démo officielle, après avoir sélectionné un mot-clé, les mêmes mots-clés seront surlignés. En regardant le HTML, vous verrez que ces mots-clés n’ont pas changé de style, mais qu’il y a un Overlay sur l’interface de l’éditeur qui dessine la couleur semi-transparente de surlignage (voir la div avec class="view-overlays").

SVG comme couche de superposition

• L’overlay est défini avec la même longueur et largeur que la page
• Ajoutez <rect> à l’intérieur, puis dessinez à la position du texte surligné
• foliate-js utilise cette méthode. Voir overlayer.js.

Utiliser l’API Selection et le pseudo-élément ::selection — Surlignage de sélection de texte par défaut du navigateur

Le navigateur lui-même surligne le texte sélectionné, donc contrôler la sélection peut indirectement implémenter le surlignage. Le style peut être personnalisé via le pseudo-élément CSS ::selection.

const range = new Range();
range.setStart(parentNode, startOffset);
range.setEnd(parentNode, endOffset);

// Définir la sélection
const selection = document.getSelection();
selection.removeAllRanges();
selection.addRange(range);

::selection {
  background-color: #c3c2c2;
  color: white;
}

Cette méthode est assez astucieuse, très simple et largement supportée par les navigateurs, mais elle a un défaut majeur : comme il ne peut y avoir qu’une seule sélection à la fois, la sélection programmatique et la sélection réelle de l’utilisateur se chevauchent et entrent en conflit. Elle ne convient donc qu’aux scénarios qui satisfont les conditions suivantes :

• L’utilisateur ne peut pas sélectionner du texte
• Il n’y a qu’un seul texte surligné continu
• Besoin de supporter d’anciens navigateurs
• Vous voulez être paresseux et ne pas utiliser d’autres méthodes