Comment puis-je déterminer les décalages de caractères de début et de fin d'une sélection utilisateur dans son élément HTML parent ?

Détermination des décalages de début et de fin d'une plage dans son conteneur parent

Problème

Étant donné un élément HTML, comment déterminer les décalages de caractères dans le conteneur parent où commence et se termine une plage (sélection de l'utilisateur), même lorsque la sélection s'étend sur des balises HTML ?

Solution

Réponse mise à jour :

Pour obtenir les décalages de début et de fin :

function getSelectionCharacterOffsetWithin(element) {
  // Determine start and end offsets
  var start = 0;
  var end = 0;
  // Create ranges
  var range = getRangeAt(0);
  var preCaretRange = range.cloneRange();

  // Set start offset
  preCaretRange.selectNodeContents(element);
  preCaretRange.setEnd(range.startContainer, range.startOffset);
  start = preCaretRange.toString().length;

  // Set end offset
  preCaretRange.setEnd(range.endContainer, range.endOffset);
  end = preCaretRange.toString().length;

  // Return the object
  return { start: start, end: end };
}

Réponse originale :

Le code fourni utilise getSelection() et getRangeAt(0) pour récupérer la sélection. Il calcule ensuite le décalage de la position du curseur dans l'élément à l'aide de la méthode toString() sur la plage. Cette approche fournit uniquement le décalage de fin ou la position du curseur.

Exemple :

function getRangeCharacterOffsetWithin(element) {
  var range, sel;
  if ((sel = window.getSelection())) {
    range = sel.getRangeAt(0);
    range.collapse(false);
    prevRange = range.cloneRange();
    prevRange.selectNodeContents(element);
    prevRange.setEnd(range.endContainer, range.endOffset);
    return prevRange.toString().length;
  }
  return 0;
}

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!