Digamos que tengo una cadena aleatoria ( span ) de caracteres, cada uno en su propio span . Un usuario puede seleccionar estos. Quiero saber cuáles seleccionan. La API window.GetSelection es útil aquí. Devuelve una Selección . Sin embargo, parece que no puedo entender cómo puedo obtener qué caracteres seleccionó el usuario, es decir, una lista de NodeList de intervalos de caracteres. No me refiero simplemente a qué cadena es (que puede obtener con .toString() ), sino también a qué carácter pertenece la selección.

Sé que hay Selection.anchorNode y Selection.focusNode como los respectivos nodos de inicio y final, pero quiero obtener todos los nodos seleccionados.

En el fragmento de abajo puedes echar un vistazo.

 function getSelectionNodes() { const selection = window.getSelection(); let anchor = selection.anchorNode, focus = selection.focusNode; anchor = anchor.nodeType === Node.TEXT_NODE ? anchor.parentNode : anchor focus = focus.nodeType === Node.TEXT_NODE ? focus.parentNode : focus const anchorIdx = getIndex(anchor), focusIdx = getIndex(focus); console.log(anchor); console.log(focus); }; function getIndex(el) { return Array.from(el.parentNode.children).indexOf(el) }

 <span onmouseup="getSelectionNodes()"> <span>d</span> <span>d</span> <span>s</span> <span>r</span> <span>e</span> <span>g</span> <span>p</span> <span>j</span> <span>l</span> <span>u</span> </span>

Tenga en cuenta una dificultad particular: si selecciona un par de letras y un "espacio" aparente después de ellas, notará que el ancla no será un intervalo de caracteres, sino el intervalo principal porque seleccionamos el "espacio entre" los intervalos de caracteres , que es un nodo de texto con el contenedor span. Esto parece problemático. Si pudiera obtener el intervalo de caracteres inicial y final, podría usar un bucle while con nextSibling o previousSibling para obtener lo que quiero, creo.