クライアントブラウザでWebソケットを使用してRange()
オブジェクトを再構築しようとしています。ノード、startOffsetおよびendOffsetで範囲を再構築する
var range = window.getSelection().getRangeAt(0);
var node = range.startContainer
私は、クライアント上の範囲ビルダー機能にWebSocketを介して3つのパラメータを渡しています:
https://jsfiddle.net/k36goyec/
まず私は私のブラウザでRangeオブジェクトと範囲がで始まりNodeを取得していますブラウザ。
var text = node.parentNode.textContent;
var startOffset = range.startOffset
var endOffset = range.endOffset
このデータは私のbuildRange関数に渡されます:あなたは以下を参照することができたよう
/**
*
*/
buildRange: function(text, startOffset, endOffset){
var node = this.getNodeByText(text); // get the Node by its contents
var range = document.createRange();
range.setStart(node, startOffset);
range.setEnd(node, endOffset);
span = document.createElement('span');
span.style.backgroundColor = this.color;
$(span).addClass('hl');
range.surroundContents(span);
},
、私は、ページ上のすべての要素をループしてそのを比較することにより、クライアントブラウザ上のノードを取得していますテキストのコンテンツ:
/**
*
*/
getNodeByText: function(text){
var all = document.getElementsByTagName("*");
for (var i = 0; i < all.length; i++) {
if (all[i].textContent === text) {
return all[i];
}
}
},
私はsetStart()とsetEnd()を使用して、ノードでの選択範囲を設定しています。
問題があります。
range.startOffset/endOffsetスペックは以下の言葉:
If the startNode is a Node of type Text, Comment, or CDATASection, then startOffset is the number of characters from the start of startNode. For other Node types, startOffset is the number of child nodes between the start of the startNode.
私は、テキストの範囲を選択すると、私は次のエラーを取得する:
IndexSizeError: Index or size is negative or greater than the allowed amount
私のようなのオフセットを渡していますので、これは、 0,10(10文字選択)がノードはテキストノードではない要素ノードです。私は確実にテキストノードを取得するように見えることはできません
が、私は唯一の要素ノード自体を取得することができ
...Q:私は確実にノードと範囲を再構築するにはどうすればよい
とオフセット?
あなたは要素を返すgetElementsByTagNameを使用しています。 https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodesとhttps://developer.mozilla.org/en/docs/Web/API/を見てみることをお勧めしますノード/ノードタイプ – Orangesandlemons