Javascript：DOM操作後の選択（ハイライト表示されたテキスト）を返します

Question

この関数は、ユーザーが選択したテキストを返し、タグ（この場合は太字のタグ）でラップします。

function makeBold() { 
    var selection = window.getSelection(); 
    var range = selection.getRangeAt(0); 
    var newNode = document.createElement("b"); 
    range.surroundContents(newNode); 
} 

私は関数を呼び出した後、今、選択（強調表示されたテキスト）が削除されます。その選択を返すにはどうすればいいですか？あるいは、最初に選択を失うことなく関数を呼び出すにはどうすればよいですか？

Answer 1

次のように動作します：

function makeBold() { 
    var selection = window.getSelection(); 
    if (selection.rangeCount) { 
     var range = selection.getRangeAt(0).cloneRange(); 
     var newNode = document.createElement("b"); 
     range.surroundContents(newNode); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
} 

は、しかし、注意すべきいくつかの問題があります。

• 範囲のsurroundContents()方法は、すべての範囲のために動作しません：それは内部に意味を作るために持っています新しいノード内のRangeコンテンツを囲むDOM。たとえば、2つの段落にまたがる範囲でsurroundContents()を使用しても、いずれかを完全に選択しないと、エラーが発生します。これの正式な定義については、DOM Level 2 Range specを参照してください。
• バージョン8までのIEはDOM範囲をサポートしておらず、他のブラウザと全く異なるSelectionオブジェクトを持っています。 IE 9は他のブラウザと同様の範囲と選択機能を持っています。
• 先に進む前に、選択のrangeCountプロパティをチェックする必要があります。そうしないと、選択がない場合に例外が発生します。