Jak utworzyć obiekt zakresu, gdy znam tylko przesunięcia znaków?

Question

Więc mam element div zawierający blok tekstu, wcześniej użytkownik wybrał trochę tekstu w tym bloku i utworzyłem obiekt zakresu z tego wyboru. Zachowałem przesunięcie punktów początkowych i końcowych zaznaczonego tekstu, ale mam problemy z ponownym utworzeniem zakresu (więc mogę nim manipulować). "quotables" to element div, który przechowuje cały tekst. Nie wiem, co robię źle.

 


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

 

ale zachować uzyskiwanie błędy: Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
m.setStart
(funkcja anonimowa)
d.extend._Deferred.f.resolveWith
ddextend.ready
dcaddEventListener.y

Answer 1

Granica zakresu nie jest przesunięciem znaku w ciągu znaków reprezentujących HTML. Jest to raczej przesunięcie w węźle DOM. Jeśli węzeł jest na przykład węzłem tekstowym, granica jest wyrażana jako przesunięcie znaku w tekście węzła. Jeśli węzeł jest elementem, jest wyrażany jako liczba węzłów potomnych węzła przed granicą. Na przykład w poniższym kodzie HTML, w zakresie którego granice są oznaczone |:

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

... Zakres za granica początek leży w offsecie 3 w węźle tekstowym, który jest pierwszym dzieckiem elementu <div>, podczas gdy granica końcowa znajduje się w punkcie 2 przesunięcia w obrębie <div>, ponieważ istnieją dwa węzły podrzędne (węzeł tekstowy "foobar" i jeden element <br>) leżące przed granicą. Utworzony zostanie programowy program w następujący sposób:

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