web-dev-qa-db-ja.com

window.getSelection（）は選択されたテキストを提供しますが、HTML

WYSIWYG HTMLエディター（Firefox用）を拡張しています。選択範囲の周りにタグを追加したいです。 Mozilla Midas仕様 でこれを実現する関数が見つかりません。

選択範囲をHTMLに置き換えるコマンドがあります。
選択内容を読むことができれば、この文字列にタグを追加できます。

window.getSelection() はほとんど機能しますが、プレーンテキスト文字列に変換する nsISelection を提供します。

PS：document.getSelection()は、nsISelectionでさえないプレーンテキスト文字列を返します。

javascripthtmldomselection
30
Bob Fanger

DOM Range spec を見てください。以下を使用して、Firefoxのユーザー選択からRangeを取得できます。

_var range = window.getSelection().getRangeAt(0);
_

Firefoxを含む一部のブラウザでは、選択のgetRangeAt()メソッドを介してアクセスできる複数の選択が可能です。

Rangeは、DOMノードとそれらのノード内のオフセットで表されます。 Rangeを取得したら、範囲の境界はDOMツリーの異なるレベルの異なるノードにある可能性があるため、範囲のコンテンツをタグで囲むだけであるため、正確に目的の処理を行うことは簡単ではありません。常に可能とは限りません。次のようなことができますが、選択したコンテンツを含む新しいブロック要素が作成されます。

_var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
var div = document.createElement("div");
div.style.color = "yellow";
div.appendChild(selectionContents);
range.insertNode(div);
_

別のハック的な代替方法は、documentのexecCommand()メソッドを使用して選択を変更し（特定の色に設定するなど）、_document.querySelectorAll_またはセレクターライブラリを使用することです。その色の要素を選択し、それらにスタイルを適用します。

39
Tim Down

ティムダウンの答えは正しい方向に向かっています。ただし、1つの問題は、extractContents（）がdomから選択を削除することです。使用できます

window.getSelection().getRangeAt(0).cloneContents();

選択したもののコピーを取得するだけです。次に、それを新しいタグでラップし、選択範囲をそれに置き換えます。複数のHTML要素にまたがる範囲に関するTim Downの懸念は、確かに有効なものです。範囲を取得すると、htmlが「修正」されますが、元に戻すと問題が発生する可能性があります。 ここ はRangeオブジェクトの優れたリソースです。

13
rosscj2533

window.getSelection（）はオブジェクトを返します。 objects .toString（）メソッドを呼び出すことにより、返された選択オブジェクトを文字列として使用できます。

var selObj = window.getSelection();
var selectedText = selObj.toString();

https://developer.mozilla.org/en/DOM/window.getSelection

3
Dave Roma