2

次のコードを使用して、ユーザーがWebページで選択したテキストを取得できます。

function getSelected() {
  var userSelection;
  if (window.getSelection) {
      selection = window.getSelection();
  } else if (document.selection) {
      selection = document.selection.createRange();
  }

}

選択した単語の周りの単語を取得することは可能ですか。

たとえば、次の文を見てください。「zartboxをフラングブルする必要がある場合は、赤いウィジェットを購入する必要があります。それ以外の場合は、青いウィジェットを購入して、いくらかのお金を節約できます。」

私のコードは、その人が「ウィジェット」という単語を選択したかどうかを教えてくれます。しかし、選択が「赤」または「青」の後にあるかどうかを知りたいのですが。これは可能ですか？私はいくつかのアドバイスを求めてインターネットを精査してきましたが、答えを見つけるのに苦労しています。

ご協力ありがとうございました

4

3 に答える 3

2

IE 以外のブラウザーでこれを行う方法は、選択Range範囲からオブジェクトを取得することです。範囲には開始境界と終了境界があり、範囲の各境界はノード内のオフセットとして表されます。境界がテキスト ノード内にある場合、このオフセットは文字オフセットになります。

たとえば、次がテキスト ノードで、選択範囲がパイプで区切られているとします。

"red |widget| blue widget"

... すると、選択範囲から得られる範囲は、テキスト ノード内の開始オフセットが 4 になります。

以下は、選択を表す Range を取得し、開始境界を警告します。

var sel = window.getSelection();
var selectedRange = sel.rangeCount ? sel.getRangeAt(0) : null;
if (range) {
    alert("Offset " + selectedRange.startOffset
        + " in node " + selectedRange.startContainer.nodeName);
}

範囲は他の範囲と比較される場合があるため、たとえば、現在の選択範囲が上記のテキスト ノードの「青」という単語の後にある場合は、「青」という単語を含む範囲を作成し、それを比較することができます。選択した範囲:

// Assume the text node is stored in a variable called textNode
var blueRange = document.createRange();
blueRange.setStart(textNode, 11);
blueRange.setEnd(textNode, 15);

var selectionIsAfterBlue =
   (selectedRange.compareBoundaryPoints(Range.END_TO_START, blueRange) == 1);

IE では、これはどれも機能せず、すべてが異なる方法で行われ、一般的にははるかに困難です。これを単一の一貫したインターフェイスに正規化するには、Rangyライブラリを使用できます。

于 2010-12-02T09:27:13.060 に答える
1

同じ DIV 要素内の選択前と選択後の部分を識別できるクイック スクリプトを作成しました。

ただし、同じ DIV に同じ単語が複数回含まれていて、その単語のみを選択した場合、私が書いた現在のコードは、それが最初に選択された単語なのか 2 番目に選択された単語なのかを識別できないため、最終的にはニーズに応えられません。

とにかく、ここでコードを表示/コピー/テストできます: http://jsfiddle.net/kvHxJ/何かを選択して、表示されるアラートを確認してください。

結局のところ、それで十分な場合は、この回答を受け入れて先に進みます...それ以外の場合は、ユーザーが単語全体、1単語のみを選択すると想定できますか? 答えが「はい」の場合、これを回避する方法がわかりました。

于 2010-12-02T08:20:18.427 に答える
0

IE にはmove一連のメソッドがあり、この問題をわずか数行に減らして、任意の数の単語を前後に選択範囲を拡張します ( http://www.webreference.com/js/column12/trmethods.htmlを参照)。そこからは、テキストを任意の値のリストと比較するだけです。他のブラウザにはこの機能がありません。ブラウザー戦争の運命: ある素晴らしい機能を開発すると、他の特許によって無視または禁止されます。そのため、これらすべてのイノベーションに対するクロスブラウザー サポートの負担が必然的に Web サイト デザイナーに真っ向からかかるため、その機能は永久に失われ、回避されます。

したがって、以下は、選択したテキストの親要素の ID のみを取得する一般化された関数です。また、このクロスブラウザー ソリューションを使用するには、一意の ID またはその他の属性を備えた独自の要素で各単語をラップする必要があります。このセットアップを使用すると、兄弟または順番にID/名前が付けられた要素を前後に見るための比較的簡単なジャンプになるはずです。

ここでの問題は、クライアントが単語またはフレーズの最初から最後までクリック/ドラッグする必要があり、隣接するスペースがまったくないことです。単語をダブルクリックしても、次の要素 (IE の場合は親 DIV) を参照します。さらに、選択境界を単一の親 DIV に制限するコードを追加する必要があります。以下のコードは選択を周囲の要素にも拡張する可能性があるためです。しかし、うまくいけば、ここから修正することができます. それ以外の場合は、ベクトルを使用して、周囲のすべてのテキストと比較してテキストの座標を特定する必要があります。

<script type="text/javascript">

関数 get_selected_element_id() {
 if (window.getSelection) {
  //FF
  var range = window.getSelection();
  }
 else if (ドキュメント.セレクション) {
  //IE
  var range = document.selection.createRange();
  }
 if (range.focusNode) {
  //FF
  var test_value = range.focusNode.parentNode.id;
  }
 そうしないと {
  //IE
  var test_value = range.parentElement().id;
  }
 test_value を返します。
 }


</script>

</head>

<本体>

<div id="test_div">
 <span id="test1">テスト</span> <span id="test2">asdf</span> <span id="test3">テスト2</span> <span id="test4">bla</スパン>
 </div>

<button onclick="alert(get_selected_element_id());">行く</button>
于 2010-12-02T10:30:02.390 に答える