どのように選択したテキストを取得するのですか？javascriptで周囲のコンテキストを取得することはできますか？

私は、ユーザーがこのコードを使用して、Webページ上を選択したテキストをつかむことができています：どのように選択したテキストを取得するのですか？javascriptで周囲のコンテキストを取得することはできますか？

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

}

は、私は言葉に周り選択した単語を取得することがかのうです。

は、例えば、これらの文章を取る：「あなたはにframglubble zartboxが必要な場合は、あなたが赤のウィジェットを購入する必要がありそうでなければ、あなたが青のウィジェットを購入し、いくつかのお金を節約することができます。」

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

は、私が選択する前と同じDIV要素内部の選択後の部分を識別することができます迅速なスクリプトを書かれているあなたの助け

出典

2010-12-02 user495688

@Jamesワイズマン：私は漠然と「IEのみで可能」のようなものを答え、「（言葉」、+ -1） 'メソッド'動きを使用する」が、あなたのページが大きいと破ることを期待するつもりでしたユーザーの一部分 "となります。しかし、範囲は全く新しいものです。あなたがより良い方法を知っているなら、私はここで自分自身に興味があります。 –

@ user495688 - あなたの質問は有効で有効ですが、私はジェームズの意見で答えを受け入れるべきだと考えています。 –

申し訳ありませんが、私は答えを確認することを忘れています.. :) – user495688

していただきありがとうございます。

同じDIVに複数回同じ単語が含まれていて、その単語だけを選択した場合、私が書いた現在のコードは、それが最初または2番目の選択された単語かどうかを特定できません。。

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

あなたのニーズを十分に満たしていれば、この回答を受け入れてください。そうでなければ、私は知る必要があります。ユーザーは単語を1単語だけ選択すると仮定できますか？答えが「はい」の場合、私はこれをどう回避するか考えています。

出典

2010-12-02 08:20:18

私は、ユーザーakamは1つの単語を選択し、その後、選択された単語の前後に単語を取得すると仮定します。言葉は20単語だけに制限されています。言い換えれば10単語前、10単語後、またはそれ以前の単語が5単語しか含まず15単語後に取られていれば柔軟性があります。 – user495688

異なるDIV /段落でセレクションの前後の部分を識別することは可能ですか？ – user495688

@ user495688 - コードが十分であるか、同じ段落内に複数の同じ単語をサポートする必要があるかどうかはまだ分かりません。「異なるDIV /パラグラフでの選択の前後の部分」に関して、それは容易ではないでしょう - あなたはテキストのデザインをコントロールできませんか？ –

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

、以下はテキストノードだったと選択は、パイプで区切られている場合：あなたが選択から取得したい範囲は、内4の開始オフセットを持っているでしょう...

"red |widget| blue widget"

テキストノード

以下はあなたの選択を表す範囲を取得し、開始境界を警告する：あなたは、現在の選択が来た場合には、例えば、知りたいと思ったので、もし

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

範囲は、他の範囲と比較することができます上記のテキストノード内の単語「青」の後に、あなたは「青」の単語を網羅する範囲を作成することができますし、選択された範囲と比較：

IEで

// 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);

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

出典

2010-12-02 09:27:13

IEはmoveのメソッドセットを持っています。これにより、この問題はいくつかの行に減らされ、任意の数の単語を前方または後方に拡大します（http://www.webreference.com/js/column12/trmethods.html参照）。そこから、任意の値のリストとテキストを比較するだけです。他のブラウザにはこの機能がありませんAFAIK。ブラウザ戦争の運命：誰かが他の特許から無視されたり、特許によって禁止されている素晴らしい機能を開発しているので、これらの革新に対するクロスブラウザサポートの負担が必然的にウェブサイトのデザイナーに当てはまるので、この機能は永遠に失われたり避けられます。

以下は、選択したテキストの親要素のIDのみを取得する一般化された関数です。そして、このクロスブラウザーのソリューションを使用するには、各単語を固有のIDまたは他の属性を持つ独自の要素にラップする必要があります。この設定では、兄弟または順次ID /名前付き要素を先読みして戻すのは比較的苦労しないはずです。

ここでキャッチするのは、クライアントが単語またはフレーズの先頭から最後までクリックしてドラッグする必要があり、まったく境界がないことです。単語をダブルクリックしても、次の要素（またはIEの場合は親DIV）を参照します。さらに、選択境界を単一の親DIVに制限するコードを追加する必要があります。下のコードでは、選択範囲を周囲の要素にも展開できるためです。しかし、うまくいけば、ここからそれを修正することができます。それ以外の場合は、周囲のすべてのテキストと比較してテキストの座標を特定するためにベクトルを使用する必要があります。

 

<script type="text/javascript"> 

function get_selected_element_id() { 
if (window.getSelection) { 
    // FF 
    var range = window.getSelection(); 
    } 
else if (document.selection) { 
    // IE 
    var range = document.selection.createRange(); 
    } 
if (range.focusNode) { 
    // FF 
    var test_value = range.focusNode.parentNode.id; 
    } 
else { 
    // IE 
    var test_value = range.parentElement().id; 
    } 
return test_value; 
} 


</script> 

</head> 

<body> 

<div id="test_div"> 
<span id="test1">test</span> <span id="test2">asdf</span> <span id="test3">test2</span> <span id="test4">bla</span> 
</div> 

<button onclick="alert(get_selected_element_id());">go</button>

出典

2010-12-02 10:30:02

どのように選択したテキストを取得するのですか？javascriptで周囲のコンテキストを取得することはできますか？

答えて

関連する問題