Obtener el desplazamiento inicial y final de un rango en relación con su contenedor principal

Supongamos que tengo este elemento HTML:

<div id="parent">
 Hello everyone! <a>This is my home page</a>
 <p>Bye!</p>
</div>

Y el usuario selecciona "inicio" con el mouse.

Quiero poder determinar cuántos personajes #parentcomienzan en su selección (y cuántos personajes #parentterminan al final de su selección). Esto debería funcionar incluso si selecciona una etiqueta HTML. (Y necesito que funcione en todos los navegadores)

range.startOffsetparece prometedor, pero es un desplazamiento relativo sólo al contenedor inmediato del rango, y es un desplazamiento de caracteres sólo si el contenedor es un nodo de texto.

Jan 27 '11 07:01 Tom Lehman

ACTUALIZAR

Como se señaló en los comentarios, mi respuesta original (a continuación) solo devuelve el final de la selección o la posición del cursor. Es bastante fácil adaptar el código para devolver un desplazamiento inicial y final; aquí hay un ejemplo que lo hace:

Mostrar fragmento de código

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

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

#editor {
  padding: 5px;
  border: solid green 1px;
}

Select something in the content below:

<div id="editor" contenteditable="true">A <i>wombat</i> is a marsupial native to <b>Australia</b></div>
<div id="selectionLog"></div>

Expandir fragmento

Aquí hay una función que obtendrá el desplazamiento del carácter del signo de intercalación dentro del elemento especificado; sin embargo, esta es una implementación ingenua que casi seguramente tendrá inconsistencias con los saltos de línea y no intenta lidiar con el texto oculto a través de CSS (sospecho que IE ignorará correctamente dicho texto mientras que otros navegadores no lo harán). Manejar todo esto adecuadamente sería complicado. Ahora lo intenté para mi biblioteca Rangy .

Ejemplo en vivo: http://jsfiddle.net/TjXEG/900/

function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 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.endContainer, range.endOffset);
            caretOffset = 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("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

Jan 27 '2011 01:01 Tim Down

Después de experimentar unos días encontré un enfoque que parece prometedor. Como selectNodeContents()no maneja <br>las etiquetas correctamente, escribí un algoritmo personalizado para determinar la longitud del texto de cada una nodedentro de un archivo contenteditable. Para calcular, por ejemplo, el inicio de la selección, sumo las longitudes del texto de todos los nodos anteriores. De esa manera, puedo manejar (múltiples) saltos de línea:

Mostrar fragmento de código

var editor = null;
var output = null;

const getTextSelection = function (editor) {
    const selection = window.getSelection();

    if (selection != null && selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);

        return {
            start: getTextLength(editor, range.startContainer, range.startOffset),
            end: getTextLength(editor, range.endContainer, range.endOffset)
        };
    } else
        return null;
}

const getTextLength = function (parent, node, offset) {
    var textLength = 0;

    if (node.nodeName == '#text')
        textLength += offset;
    else for (var i = 0; i < offset; i++)
        textLength += getNodeTextLength(node.childNodes[i]);

    if (node != parent)
        textLength += getTextLength(parent, node.parentNode, getNodeOffset(node));

    return textLength;
}

const getNodeTextLength = function (node) {
    var textLength = 0;

    if (node.nodeName == 'BR')
        textLength = 1;
    else if (node.nodeName == '#text')
        textLength = node.nodeValue.length;
    else if (node.childNodes != null)
        for (var i = 0; i < node.childNodes.length; i++)
            textLength += getNodeTextLength(node.childNodes[i]);

    return textLength;
}

const getNodeOffset = function (node) {
    return node == null ? -1 : 1 + getNodeOffset(node.previousSibling);
}

window.onload = function () {
    editor = document.querySelector('.editor');
    output = document.querySelector('#output');

    document.addEventListener('selectionchange', handleSelectionChange);
}

const handleSelectionChange = function () {
    if (isEditor(document.activeElement)) {
        const textSelection = getTextSelection(document.activeElement);

        if (textSelection != null) {
            const text = document.activeElement.innerText;
            const selection = text.slice(textSelection.start, textSelection.end);
            print(`Selection: [${selection}] (Start: ${textSelection.start}, End: ${textSelection.end})`);
        } else
            print('Selection is null!');
    } else
        print('Select some text above');
}

const isEditor = function (element) {
    return element != null && element.classList.contains('editor');
}

const print = function (message) {
    if (output != null)
        output.innerText = message;
    else
        console.log('output is null!');
}

* {
    font-family: 'Georgia', sans-serif;
    padding: 0;
    margin: 0;
}

body {
    margin: 16px;
}

.p {
    font-size: 16px;
    line-height: 24px;
    padding: 0 2px;
}

.editor {
    border: 1px solid #0000001e;
    border-radius: 2px;
    white-space: pre-wrap;
}

#output {
    margin-top: 16px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./script.js" async></script>
    <link href="./stylesheet.css" rel="stylesheet">
    <title>Caret Position</title>
</head>
<body>
    <p class="editor" contenteditable="true"><em>Write<br></em><br>some <br>awesome <b><em>text </em></b>here...</p>
    <p id="output">Select some text above</p>
</body>
</html>

Expandir fragmento

Jan 24 '2019 17:01 Candor

Sé que esto tiene un año, pero esta publicación es uno de los principales resultados de búsqueda para muchas preguntas sobre cómo encontrar la posición Caret y la encontré útil.

Estaba intentando usar el excelente script de Tim anterior para encontrar la nueva posición del cursor después de haber arrastrado y soltado un elemento de una posición a otra en un div de contenido editable. Funcionó perfectamente en FF e IE, pero en Chrome, la acción de arrastrar resaltó todo el contenido entre el principio y el final del arrastre, lo que resultó en que el resultado devuelto caretOffsetfuera demasiado grande o pequeño (según la longitud del área seleccionada).

Agregué algunas líneas a la primera declaración if para verificar si se seleccionó el texto y ajustar el resultado en consecuencia. La nueva declaración está a continuación. Perdóneme si es inapropiado agregar esto aquí, ya que no es lo que el OP intentaba hacer, pero como dije, varias búsquedas de información relacionada con la posición de Caret me llevaron a esta publicación, por lo que (con suerte) es probable que ayude a alguien más. .

Primera declaración if de Tim con líneas agregadas (*):

if (typeof window.getSelection != "undefined") {
  var range = window.getSelection().getRangeAt(0);
  var selected = range.toString().length; // *
  var preCaretRange = range.cloneRange();
  preCaretRange.selectNodeContents(element);
  preCaretRange.setEnd(range.endContainer, range.endOffset);

  caretOffset = preCaretRange.toString().length - selected; // *
}

Sep 19 '2012 18:09 Cody Crumrine