Comment obtenir les décalages de début et de fin d'une sélection dans son conteneur parent ?

Obtenir les décalages de début et de fin d'une plage par rapport à son conteneur parent

Dans les documents HTML, les sélections de l'utilisateur peuvent s'étendre sur différents éléments et nœuds de texte . Déterminer la plage exacte de caractères dans le conteneur parent de la sélection peut être difficile. Cependant, nous pouvons utiliser diverses techniques pour y parvenir, quelles que soient les variantes du navigateur.

Une approche consiste à cloner la plage de sélection et à définir ses points de fin au début et à la fin du conteneur parent. En comparant le contenu du texte résultant avec la plage de sélection d'origine, nous pouvons calculer les décalages de début et de fin par rapport au parent. Voici un exemple en JavaScript :

function getSelectionCharacterOffsetWithin(element) {
  var start = 0;
  var end = 0;
  var preCaretRange = range.cloneRange();
  preCaretRange.selectNodeContents(element);
  preCaretRange.setEnd(range.startContainer, range.startOffset);
  start = preCaretRange.toString().length;
  preCaretRange.setEnd(range.endContainer, range.endOffset);
  end = preCaretRange.toString().length;
  return { start: start, end: end };
}

Cette méthode fournit à la fois les décalages de début et de fin dans le conteneur parent, en tenant compte des balises HTML et de la traversée des nœuds de texte. Il peut être utilisé dans diverses applications nécessitant des décalages de caractères précis, telles que les outils d'édition de texte et les scripts de manipulation de contenu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!