Ottieni il testo evidenziato / selezionato

351

È possibile ottenere il testo evidenziato in un paragrafo di un sito Web, ad esempio utilizzando jQuery?

javascript jquery textselection

— Dan
fonte

2

Ecco una soluzione funzionante dipaksblogonline.blogspot.in/2014/11/…

— Dipak

Semplice javascript ha funzionato per me. document.getSelection (). anchorNode.data.substr (document.getSelection (). anchorOffset, document.getSelection (). focusOffset-document.getSelection (). anchorOffset)

— Rohit Verma

@RohitVerma: Funzionerà solo nel caso semplice di una selezione contenuta in un singolo nodo di testo, il che non è assolutamente garantito.

— Tim Down

@Dipak Come si replica la funzionalità di condivisione social dal blog a cui si fa riferimento nel post? Invece di restituire semplicemente la stringa selezionata, sto cercando di popolare quella variabile in un collegamento Twitter.

481

Ottenere il testo selezionato dall'utente è relativamente semplice. Non c'è alcun vantaggio da ottenere coinvolgendo jQuery poiché non è necessario altro che gli oggetti windowe document.

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

Se sei interessato a un'implementazione che tratterà anche delle selezioni <textarea>e degli <input>elementi texty , puoi utilizzare quanto segue. Dal momento che è ora 2016 sto omettendo il codice richiesto per il supporto IE <= 8, ma ho pubblicato cose per questo in molti posti su SO.

function getSelectionText() {
    var text = "";
    var activeEl = document.activeElement;
    var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
    if (
      (activeElTagName == "textarea") || (activeElTagName == "input" &&
      /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
      (typeof activeEl.selectionStart == "number")
    ) {
        text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
    } else if (window.getSelection) {
        text = window.getSelection().toString();
    }
    return text;
}

document.onmouseup = document.onkeyup = document.onselectionchange = function() {
  document.getElementById("sel").value = getSelectionText();
};

Selection:
<br>
<textarea id="sel" rows="3" cols="50"></textarea>
<p>Please select some text.</p>
<input value="Some text in a text input">
<br>
<input type="search" value="Some text in a search input">
<br>
<input type="tel" value="4872349749823">
<br>
<textarea>Some text in a textarea</textarea>

Espandi frammento

— Tim Down
fonte

9

A cosa serve l'altro {} -fork? di cosa parla "Control"?

— Dan

29

@Dan: Mi dispiace, ho perso questa domanda (non credo che SO mi abbia avvertito). Il secondo ramo è per IE <= 8 (strumenti IE 9 window.getSelection()). Il document.selection.typecontrollo sta verificando che la selezione sia una selezione di testo anziché una selezione di controllo. In IE, una selezione di controllo è una selezione all'interno di un elemento modificabile contenente uno o più elementi (come immagini e controlli modulo) con contorni e maniglie di ridimensionamento. Se si chiama .createRange()tale selezione, si ottiene un ControlRangeanziché un TextRangee ControlRangenon hanno textproprietà.

— Tim Down,

2

@TimDown È molto sottile dire "jQuery non ha X", perché, ovviamente, con il plugin giusto, può fare qualsiasi cosa tu possa fare nel browser con javascript. In questo caso, abbiamo jquery.selection ( madapaja.github.io/jquery.selection ). È ugualmente sbagliato dire "né dovrebbe". Sono arrivato qui perché stavo cercando esattamente questo. Ho un caso d'uso e jQuery è la soluzione giusta.

— Auspex,

8

@Auspex: vedo il tuo punto di vista ma non sono d'accordo. Un plugin jQuery è una libreria che ha una dipendenza da jQuery; non è esso stesso jQuery. Nel caso della gestione della selezione, jQuery stesso non fornisce esattamente nulla (il che è come dovrebbe essere perché la gestione della selezione non è ciò a cui jQuery è destinato), quindi qualsiasi soluzione che utilizza jQuery lo sta usando per inciso.

— Tim Down

1

@ Dennis98: non sono infastidito o offeso da remoto :) Il controllo per i tipi di input è perché ricevi avvisi nella console in Chrome se provi ad accedere selectionStarto selectionEndin un <input>tipo di elemento (come "numero") che non supportalo (vedi jsfiddle.net/6zoposby/2 , per esempio). Ho lasciato il controllo per l'esistenza di in selectionStartmodo che il codice non si interrompa in IE <= 8. Ammetto che il controllo per activeElementè probabilmente eccessivo ora. Uso sliceperché è più potente (anche se non è utile qui) e leggermente più breve da digitare di substring.

— Tim Down

111

Ottieni il testo evidenziato in questo modo:

window.getSelection().toString()

e ovviamente un trattamento speciale per es .:

document.selection.createRange().htmlText

— Parpar
fonte

2

Per IE> = 10 "il document.selection supporto è stato rimosso in IE10 e sostituito con window.getSelection ". Fonte: connect.microsoft.com/IE/feedback/details/795325/…

— user2314737

Ciò fallirà in più condizioni in vari browser (ad es. Firefox).

— Makyen,

11

Questa soluzione funziona se stai utilizzando Chrome (impossibile verificare altri browser) e se il testo si trova nello stesso elemento DOM:

window.getSelection().anchorNode.textContent.substring(
  window.getSelection().extentOffset, 
  window.getSelection().anchorOffset)

— Andrew Kennedy
fonte

0

Usa window.getSelection().toString().

Puoi leggere di più su developer.mozilla.org

— Ebuka
fonte