API de sélection et de plage JavaScript

JavaScript est un outil puissant pour les développeurs web, et comprendre comment manipuler le modèle objet de document (DOM) est crucial pour créer des applications web dynamiques. Cet article propose une exploration détaillée des interfaces Selection et Range en JavaScript, essentielles pour la manipulation de texte et l'interaction utilisateur au sein des pages web.

Comprendre l'interface Selection

L'interface Selection représente la plage de texte sélectionnée par l'utilisateur ou la position actuelle du curseur. Elle est accessible via la méthode window.getSelection(). Cette interface fournit diverses méthodes et propriétés permettant aux développeurs de manipuler le texte sélectionné.

Méthodes de l'interface Selection

• getRangeAt(index) : Retourne un objet Range représentant l'une des plages actuellement sélectionnées.
• addRange(range) : Ajoute un objet Range à la sélection actuelle.
• removeRange(range) : Supprime un objet Range de la sélection. (Déprécié dans les navigateurs modernes ; utilisez plutôt removeAllRanges().)
• removeAllRanges() : Supprime toutes les plages de la sélection actuelle.
• collapse(node, offset) : Réduit la sélection actuelle à un seul point au sein du nœud.

Exemple pratique : Mise en surbrillance de texte

Voici comment utiliser les interfaces Selection et Range pour mettre du texte en surbrillance de manière programmatique :

Note : extractContents() supprime le contenu sélectionné du DOM et réduit la plage au point d'insertion.

---

<div id="text">Select some of this text and press the button.</div>
<button onclick="highlightText()">Highlight</button>

<script>
function highlightText() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return false;
  const range = selection.getRangeAt(0);
  const span = document.createElement('span');
  span.style.backgroundColor = 'yellow';
  const fragment = range.extractContents();
  span.appendChild(fragment);
  range.insertNode(span);
}
</script>

Try it Yourself »

Explorer l'interface Range

L'interface Range représente un fragment de document pouvant contenir des nœuds et des parties de nœuds de texte. Une plage peut être créée à l'aide de la méthode document.createRange().

Méthodes de l'interface Range

• setStart(node, offset) : Définit la position de début de la plage.
• setEnd(node, offset) : Définit la position de fin de la plage.
• cloneRange() : Retourne un clone de la plage.
• deleteContents() : Supprime le contenu de la plage du document.
• insertNode(node) : Insère un nœud au début de la plage.
• surroundContents(fragment) : Remplace le contenu de la plage par le fragment donné.

Exemple pratique : Extraction de texte

Voici un exemple montrant comment extraire et manipuler du texte à partir d'un nœud spécifique en utilisant l'interface Range :

---

<div id="content">This is some sample text for extraction.</div>
<button onclick="extractText()">Extract and Manipulate</button>

<script>
function extractText() {
  const range = document.createRange();
  const content = document.getElementById('content');
  range.selectNodeContents(content);
  const extractedText = range.toString();
  const manipulatedText = extractedText.replace('sample', 'example'); // Manipulating text
  alert(manipulatedText);
}
</script>

Try it Yourself »

Dans l'exemple ci-dessus, le script remplace le mot « sample » par « example » dans le texte extrait avant de l'afficher dans une boîte d'alerte. Il s'agit d'une manipulation basique, mais elle démontre comment vous pouvez commencer à travailler avec le texte une fois extrait.

Opérations de texte avancées

Au-delà de la manipulation basique de texte, les interfaces Selection et Range permettent des opérations plus complexes, comme l'insertion directe de nœuds dans le document.

Exemple : Insertion de texte

Cet exemple montre un div éditable où l'utilisateur peut cliquer pour définir la position du curseur. Une fois le bouton cliqué, « Hello World » sera inséré à l'emplacement du curseur.

---

<div id="editable" contenteditable="true" style="border: 1px solid #ccc; padding: 10px; min-height: 50px;">
  Click here and set the cursor position.
</div>
<button onclick="insertText()">Insert 'Hello World'</button>

<script>
function insertText() {
  const editableDiv = document.getElementById('editable');
  const sel = window.getSelection();
  
  // Check if the selection is within the editable div
  if (!sel.rangeCount || !editableDiv.contains(sel.getRangeAt(0).commonAncestorContainer)) return;
  
  const range = sel.getRangeAt(0);
  range.deleteContents();  // Clears any selected text

  const textNode = document.createTextNode('Hello World');
  range.insertNode(textNode);

  sel.removeAllRanges();   // Clear the previous selection
  sel.addRange(range);     // Re-select the new text node
}
</script>

Try it Yourself »

Conclusion

Les interfaces Selection et Range fournissent des outils puissants pour manipuler le texte et les sélections d'utilisateurs sur les pages web. En comprenant et en utilisant ces outils, les développeurs peuvent améliorer l'interactivité et l'expérience utilisateur de leurs applications web. Que vous souhaitiez mettre du texte en surbrillance, extraire ou insérer du contenu, ces interfaces offrent la flexibilité et le contrôle nécessaires pour gérer efficacement des interactions complexes.

Practice

Parmi les affirmations suivantes, lesquelles sont vraies concernant les interfaces JavaScript Range et Selection ?

La méthode `getSelection()` retourne un objet Selection représentant la plage de texte sélectionnée par l'utilisateur.La méthode `removeAllRanges()` supprime toutes les plages de la sélection, et non pas une seule.La méthode `setEnd(node, offset)` permet à l'offset de compter les nœuds enfants si le nœud est un nœud d'élément.La méthode `deleteContents()` supprime le contenu de la plage du document sans les retourner.La méthode `collapseToEnd()` réduit la sélection actuelle au point de départ.