0

以下に、HTML ページのスニペットの例を示します---

<div id="maindiv">
    <div id="div1">
      Text 1 
      <div id="div1_1"> Text 1_1 </div>
      <div id="div1_1"> <a href="http://google.com/">Text 1_2</a> </div> 
    </div>
    <div id="div2"> Text 2  </div>
</div>

ここでいくつかのシナリオがあります。上記のテキストを含む Web ページがブラウザに表示され、ユーザーがブラウザに表示されたテキストの一部を選択します。

シナリオ 1 --

ユーザーがテキストを選択

Text 1_1  

ウェブページで

シナリオ 2 --

ユーザーがテキストを選択

Text 1  Text 1_1  Text 1_2 

ウェブページで。

シナリオ 3 -- ユーザーが次のテキストを選択する テキスト 1 テキスト 1_1 テキスト 1_2 テキスト 2

シナリオ 4 -- ユーザーが次のテキストを選択

Text 1_2 Text 2

ここで、ユーザーがコンテンツ全体を選択した最上位ノードである Javascript を使用して取得したいと考えています。これは、シナリオ 1 の単一の div です。「div1_1」、シナリオ 2、つまり。「div1」とシナリオ 3 viz. ただし、シナリオ 4 では、div1_2 のコンテンツ全体と div2 のコンテンツ全体が選択されます。つまり、コンテンツが選択されたこれら 2 つの div は兄弟ではありません。したがって、シナリオ 4 で抽出したい結果は "div1_2" と "div2" です。

上記のようにdivを抽出するにはどうすればよいですか? ここで rangy の使用について言及しましたが、これは非常に便利で、標準の JS DOM を超える機能を備えていますが、JQuery や純粋な Javascript などの他の JS ライブラリを使用することもできます。

ここで追加/質問したいもう1つのこと... divのいずれかに画像やリンクがあり、ユーザーの選択にそれらの画像/リンクが含まれている場合でも、最上位のdivを抽出するにはどうすればよいですか?この div のテキスト コンテンツは、ユーザーが選択したテキストと同じですか (画像は無視でき、リンクのテキストは通常​​のテキストと共にユーザーが選択したもののみです)。

4

1 に答える 1