Wybierz całe słowo z getSelection

Question

Chcę użyć funkcji getSelection, aby wybrać wyrazy z artykułów do pola widoku.

Oto mój kod: http://jsfiddle.net/xQKNh/2/.

Teraz chcę zapytać, jak korzystać z JavaScript, aby wybrać całe słowo?

Dla wyjaśnienia,

Is your question about programming? 

W moim kodu, jeśli wybiorę r question about pro The view box pokaże

r question about pro 

ale jak zrobić wyrazy zakończone? Tak, że wysyła:

your question about programming. 

kod 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

Najnowsze wersje przeglądarek Firefox i WebKit mają wbudowaną metodę modify() (patrz także: work-in-progress spec) obiektu Selection, aby to zrobić. IE ma zupełnie inny sposób, aby to zrobić od wersji 4. W obu przypadkach ta metoda ma znaczną przewagę w pracy nad granicami elementów.

Poniższy przykład działa w IE 4+, Firefox 4+ oraz Safari i Chrome w wersjach wydanych w ciągu ostatnich kilku lat. Opera nie obsługuje jeszcze obiektów z serii modify().

UPDATE 20 października 2011

mam przepisany ten faktycznie (w większości) pracuje obecnie (to nie działa poprawnie w przeglądarkach innych niż IE przed, jak wskazano w komentarzach). Niestety, rozszerzenie selekcji jest zbyt chciwe w nie-IE i rozszerza zaznaczenie do następnego słowa, jeśli całe słowo jest już wybrane, ale nie widzę w tej chwili łatwego sposobu.

UPDATE 11 czerwca 2012

Mam zaktualizowany to z poprawą od this answer to a related question. Podziękowania dla Matta M i Fong-Wana Chau za to.

żywo demo: http://jsfiddle.net/rrvw4/23/

Kod:

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

Sztuką jest, aby używać DOM ranges. Następnie możesz rozszerzyć zakres w dowolnym kierunku, aż uderzysz w spację. Tak (ostrzeżenie, niezupełnie przetestowane):

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

Optymalizacja jest pozostawiona jako ćwiczenie dla czytelnika.