javascriptを使用して、親ノードからの選択範囲のオフセットを見つける方法

Question

私のウェブサイトのユーザーが自分のウェブページ内のテキストを選択したとします。また、Webページのすべての要素にidがあるとします。
テキストに最も近い親ノードをデータベースに保存します。 その部分は簡単ですが、私はちょうど呼び出し：

firstnode = rangeThatUserHighlighted.commonAncestorContainer; 
if (firstnode.nodeType == 3) { 
     firstnode = firstnode.parentElement; 
} 

（3のここでのnodeTypeがcommonancestorが、私はそれの親を取得しなければならないことを意味テキストノード、であることを意味します。） 私はのIDを格納することができますデータベース内のそのノード。しかしそれは他の日に選択を再現するのに十分な情報ではありません。 （元のページだけでなく、HTMLの段落がBODY要素に関連した他の場所のいくつかの他のWebページに移動されている場合でも選択範囲を再作成する必要があります）
範囲にはオフセットがあります私は次のことができると思った。

コール：

rangeThatUserHighlighted.setStartBefore(firstnode); 

、私は "rangeThatUserHighlighted.startOffset"（とendOffsetの）を救うことができます。

これは私には意味をなさない結果をもたらします。

私は、単に強調表示されるテキストを検索することも考えましたが、それは2つの理由で機能しません。私のパラグラフでは同じテキストが複数回出現することがあります。どのテキストがハイライト表示されるのかわかりません。第2に、BOLD、ITALICなどの書式タグがあり、正確な位置を捨てることがあります。

答えは何ですか？

ありがとうございました。

Answer 1

解決策が見つかりました。まず、検査されるテキストとHTMLの全体が1つの大きなDIVまたはARTICLEタグになければなりません。第二に、コードは、各非テキストタグにidを割り当てる必要があります。ユーザーは単なるテキスト、アンカーノードを強調表示した場合に今

$(document).ready(function() { 
     var curid; 
     var count = 0; 
     // ArticletoHighlightRFS is the id of the article tag that encloses 
     // the html paragraph(s) 
     $("#ArticleToHighlightRFS").find("*").each(function (i) { 

      curid = "" + this.id; 
      if (curid.length < 1) { 
       count = count + 1; 
       this.id = "articlechild" + count; 
      } 
     }); 

    }) 

：jqueryのではたとえば、あなたは、タグを作成するには、次の数行を使用する場合がありますテキストノードは同じで、#textタイプになります。その場合、キーは前の兄弟を#textノードに見つけることです（簡単ですが、'anchorNode.previousSibling'と呼んでください）。そのノードのIDを保存し、後でanchorNodeをで再作成することができますdocument.getElementById（previousNodeID）を呼び出してから、nextSiblingを呼び出して、アンカーノードである#textノードをもう一度保持します（これは少し単純化されていますが、コードを入力してください、次の段落を参照してください）

実例はjsfiddle（https://jsfiddle.net/73nc02zs/3/）です。要約すると、このコードでは、ユーザーがhtmlの段落の段落またはサブセットを強調表示し、その情報をデータベースに保存し、後で同じページの段落を出力するハイライトを再現する別の位置の別のページ