tablas - split javascript

¿Cómo creo un objeto rango cuando sé solo los desplazamientos de caracteres?

Question

Así que tengo un div que contiene un bloque de texto, anteriormente el usuario ha seleccionado un texto en este bloque y he creado un objeto de rango de esta selección. Almacenaba el desplazamiento de los puntos inicial y final del texto seleccionado, pero tengo problemas para volver a crear el rango (para poder manipularlo). "citables" es el div que contiene todo el texto. No sé lo que estoy haciendo mal.

var theRange = rangy.createRange();
var node = $(''.quotables'').html();
theRange.setStart(node, 14);
theRange.setEnd(node, 318);

pero sigo recibiendo errores: Error no detectado: NOT_FOUND_ERR: DOM Exception 8
m.setStart
(función anónima)
d.extend._Deferred.f.resolveWith
ddextend.ready
dcaddEventListener.y

Answer 1

Un límite de rango no es un desplazamiento de caracteres dentro de una representación de cadena de HTML. Más bien, es un desplazamiento dentro de un nodo DOM. Si el nodo es un nodo de texto, por ejemplo, el límite se expresa como un desplazamiento de carácter dentro del texto del nodo. Si el nodo es un elemento, se expresa como el número de nodos secundarios del nodo antes del límite. Por ejemplo, en el siguiente HTML, con un rango cuyos límites se denotan por | :

<div id="test">foo|bar<br>|<br></div>

... el límite de inicio del rango se encuentra en el desplazamiento 3 en el nodo de texto que es el primer elemento secundario del elemento <div> , mientras que el límite final está en el desplazamiento 2 dentro del <div> , ya que hay dos nodos secundarios (nodo de texto "foobar" y un elemento <br> ) que yace antes del límite. Debería crear el rango programáticamente de la siguiente manera:

var range = rangy.createRange(); // document.createRange() if not using Rangy
var div = document.getElementById("test");
range.setStart(div.firstChild, 3);
range.setEnd(div, 2);