以下に、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 のテキスト コンテンツは、ユーザーが選択したテキストと同じですか (画像は無視でき、リンクのテキストは通常のテキストと共にユーザーが選択したもののみです)。