Comment déterminer avec précision les décalages de caractères dans un élément HTML ?

Calcul des décalages de début et de fin de plage par rapport au conteneur parent

Supposons que vous rencontriez des éléments HTML comme celui ci-dessous :

<div>

Et un utilisateur sélectionne le texte « home » avec sa souris. Déterminer les décalages de caractères dans l'élément "#parent" est une tâche courante, en particulier lors de la sélection de balises HTML.

Bien que la propriété "range.startOffset" fournisse un décalage par rapport au conteneur immédiat, elle est limitée aux décalages de caractères. lorsque le conteneur est un nœud de texte. Pour surmonter cette limitation, nous présentons une solution mise à jour :

function getSelectionCharacterOffsetWithin(element) {
  var start = 0;
  var end = 0;
  var doc = element.ownerDocument || element.document;
  var win = doc.defaultView || doc.parentWindow;
  var sel;
  if (typeof win.getSelection != "undefined") {
    sel = win.getSelection();
    if (sel.rangeCount > 0) {
      var range = win.getSelection().getRangeAt(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;
    }
  } else if ((sel = doc.selection) && sel.type != "Control") {
    var textRange = sel.createRange();
    var preCaretTextRange = doc.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToStart", textRange);
    start = preCaretTextRange.text.length;
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    end = preCaretTextRange.text.length;
  }
  return { start: start, end: end };
}

Pour démontrer la méthode mise à jour, nous initialisons les écouteurs d'événements pour capturer les modifications de sélection et mettre à jour un élément de journal sur la page :

function reportSelection() {
  var selOffsets = getSelectionCharacterOffsetWithin(
    document.getElementById("editor")
  );
  document.getElementById("selectionLog").innerHTML =
    "Selection offsets: " + selOffsets.start + ", " + selOffsets.end;
}

window.onload = function () {
  document.addEventListener("selectionchange", reportSelection, false);
  document.addEventListener("mouseup", reportSelection, false);
  document.addEventListener("mousedown", reportSelection, false);
  document.addEventListener("keyup", reportSelection, false);
};

Ce code vous permet de déterminer avec précision les décalages de caractères de la sélection d'un utilisateur au sein d'un élément HTML, même lors de la sélection de balises HTML.

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!