getSelectionで単語全体を選択

Question

getSelection関数を使用して記事からビューボックスまでの単語を選択します。

ここに私のコードはhttp://jsfiddle.net/xQKNh/2/です。

ここで、JavaScriptを使用して単語全体を選択する方法について質問したいと思いますか？私のコードで

説明については

、

Is your question about programming? 

私はr question about proを選択した場合、view boxは

r question about pro 

が表示されます。しかし言葉が完了作る方法？

your question about programming. 

Javascriptコード：

function getSelected() { 
    if(window.getSelection) { return window.getSelection(); } 
    else if(document.getSelection) { return document.getSelection(); } 
    else { 
    var selection = document.selection && document.selection.createRange(); 
    if(selection.text) { return selection.text; } 
    return false; 
    } 
    return false; 
} 
$(document).ready(function() { 
    $('#content-area').mouseup(function() { 
    var selection = getSelected(); 
    if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) { 
     $('#show-text').html(selection) 
    } 
    }); 
}); 

Answer 1

最近のバージョンのFirefoxとWebKitブラウザには、Selectionオブジェクトのmodify()（work-in-progress specも参照）メソッドが組み込まれています。 IEはバージョン4以来これを行うために全く異なる方法を持っていました。どちらの場合でも、このメソッドは要素境界をまたいで作業するという大きな利点があります。

次の例は、過去数年間にリリースされたIE 4+、Firefox 4+、Safari、Chromeで動作します。 OperaはまだSelectionオブジェクトのmodify()メソッドをサポートしていません。

UPDATE 2011年10月20日

私は（主に）実際にこれを書き換え（コメントで指摘したように、それは、前にIE以外のブラウザでは正常に動作しませんでした）今動作しました。残念ながら、非IEでは選択展開が欲張りすぎて、単語全体がすでに選択されている場合は選択範囲を次の単語に拡大しますが、現時点ではこれを簡単には理解できません。

UPDATE 2012年6月11日

私は今this answer to a related questionからの改善でこれを更新しました。これはMatt MとFong-Wan Chauに感謝します。

ライブデモ：http://jsfiddle.net/rrvw4/23/

コード：

function snapSelectionToWord() { 
    var sel; 

    // Check for existence of window.getSelection() and that it has a 
    // modify() method. IE 9 has both selection APIs but no modify() method. 
    if (window.getSelection && (sel = window.getSelection()).modify) { 
     sel = window.getSelection(); 
     if (!sel.isCollapsed) { 

      // Detect if selection is backwards 
      var range = document.createRange(); 
      range.setStart(sel.anchorNode, sel.anchorOffset); 
      range.setEnd(sel.focusNode, sel.focusOffset); 
      var backwards = range.collapsed; 
      range.detach(); 

      // modify() works on the focus of the selection 
      var endNode = sel.focusNode, endOffset = sel.focusOffset; 
      sel.collapse(sel.anchorNode, sel.anchorOffset); 

      var direction = []; 
      if (backwards) { 
       direction = ['backward', 'forward']; 
      } else { 
       direction = ['forward', 'backward']; 
      } 

      sel.modify("move", direction[0], "character"); 
      sel.modify("move", direction[1], "word"); 
      sel.extend(endNode, endOffset); 
      sel.modify("extend", direction[1], "character"); 
      sel.modify("extend", direction[0], "word"); 
     } 
    } else if ((sel = document.selection) && sel.type != "Control") { 
     var textRange = sel.createRange(); 
     if (textRange.text) { 
      textRange.expand("word"); 
      // Move the end back to not include the word's trailing space(s), 
      // if necessary 
      while (/\s$/.test(textRange.text)) { 
       textRange.moveEnd("character", -1); 
      } 
      textRange.select(); 
     } 
    } 
} 

Answer 2

ここにトリックはDOM rangesを使用することですが、それが出力するように。スペースを叩くまでは、どちらの方向にも範囲を広げることができます。だから、警告（広範囲にテストされていない警告）：

function getSelected() { 
    if(window.getSelection) { return window.getSelection(); } 
    else if(document.getSelection) { return document.getSelection(); } 
    else { 
    var selection = document.selection && document.selection.createRange(); 
    if(selection.text) { return selection.text; } 
    return false; 
    } 
    return false; 
} 

function expand(range) { 
    if (range.collapsed) { 
     return; 
    } 

    while (range.toString()[0].match(/\w/)) { 
     range.setStart(range.startContainer, range.startOffset - 1); 
    } 

    while (range.toString()[range.toString().length - 1].match(/\w/)) { 
     range.setEnd(range.endContainer, range.endOffset + 1); 
    } 
} 

$(document).ready(function() { 
    $('#content-area').mouseup(function() { 
    var selectionRange = getSelected().getRangeAt(0); 
    var start = selectionRange.startOffset; 
    expand(selectionRange); 
    var selection = selectionRange.toString(); 
    if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) { 
     $('#show-text').html(selection) 
    } 
    }); 
}); 

最適化は読者の練習として残されています。