Wie kann man Zeichenversätze innerhalb eines HTML-Elements genau bestimmen?

Berechnen des Bereichsanfangs- und -endversatzes relativ zum übergeordneten Container

Angenommen, Sie stoßen auf HTML-Elemente wie das folgende:

<div>

Und ein Benutzer wählt mit der Maus den Text „Zuhause“ aus. Das Bestimmen der Zeichenoffsets innerhalb des „#parent“-Elements ist eine häufige Aufgabe, insbesondere bei der Auswahl von HTML-Tags.

Während die Eigenschaft „range.startOffset“ einen Offset relativ zum unmittelbaren Container bereitstellt, ist sie auf Zeichenoffsets beschränkt wenn der Container ein Textknoten ist. Um diese Einschränkung zu überwinden, präsentieren wir eine aktualisierte Lösung:

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 };
}

Um die aktualisierte Methode zu demonstrieren, initialisieren wir Ereignis-Listener, um Auswahländerungen zu erfassen und ein Protokollelement auf der Seite zu aktualisieren:

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);
};

Mit diesem Code können Sie die Zeichenversätze der Auswahl eines Benutzers innerhalb eines HTML-Elements genau bestimmen, selbst wenn Sie HTML-Tags auswählen.

Das obige ist der detaillierte Inhalt vonWie kann man Zeichenversätze innerhalb eines HTML-Elements genau bestimmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!