Obter o texto Destacado / Selecionado

351

É possível obter o texto destacado em um parágrafo de um site, por exemplo, usando jQuery?

javascript jquery textselection Dan
fonte
2
Aqui está uma solução de trabalho dipaksblogonline.blogspot.in/2014/11/...
Dipak
Javascript simples funcionou para mim. . document.getSelection () anchorNode.data.substr (document.getSelection () anchorOffset, document.getSelection () focusOffset-document.getSelection () anchorOffset...)
Rohit Verma
@RohitVerma: Isso funcionará apenas no caso simples de uma seleção que está contida em um único nó de texto, o que de nenhuma maneira é garantido.
Tim Baixo
@Dipak Como você replica a funcionalidade de compartilhamento social do blog que você menciona na sua postagem? Em vez de apenas retornar a sequência selecionada, estou tentando preencher essa variável em um link do twitter.

Respostas:

481

Obter o texto que o usuário selecionou é relativamente simples. Não há benefício a ser obtido com o jQuery, pois você não precisa de nada além dos objetos 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 você estiver interessado em uma implementação que também lide com elementos de seleção <textarea>e texty <input>, use o seguinte. Como agora é 2016, estou omitindo o código necessário para o suporte ao IE <= 8, mas eu publiquei material para isso em muitos lugares no 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>
Expandir snippet

Tim Down
fonte
9
Para que mais se o {} -fork serve? sobre o que é "Control"?
Dan
29
@ Dan: Desculpe, eu perdi essa pergunta (não acho que SO me alertou para isso). O segundo ramo é para o IE <= 8 (implementos do IE 9 window.getSelection()). A document.selection.typeverificação está testando se a seleção é uma seleção de texto em vez de uma seleção de controle. No IE, uma seleção de controle é uma seleção dentro de um elemento editável que contém um ou mais elementos (como imagens e controles de formulário) com contornos e alças de redimensionamento. Se você chamar .createRange()essa seleção, obterá um ControlRangeao invés de um TextRangee ControlRanges não têm textpropriedade.
Tim Down
2
@ TimDown É muito difícil dizer "jQuery não tem X", porque é claro que, com o plug-in certo, ele pode fazer qualquer coisa que você possa fazer no navegador com javascript. Nesse caso, temos jquery.selection ( madapaja.github.io/jquery.selection ). É igualmente errado dizer "nem deveria". Cheguei aqui porque estava procurando exatamente isso. Eu tenho um caso de uso e o jQuery é a solução certa.
Auspex
8
@Auspex: Eu meio que entendo seu ponto de vista, mas discordo. Um plugin do jQuery é uma biblioteca que depende do jQuery; não é ele próprio jQuery. No caso do manuseio de seleção, o jQuery em si não fornece exatamente nada (o que deve ser porque o manuseio de seleção não é o que serve para o jQuery); portanto, qualquer solução que use o jQuery o usa incidentalmente.
Tim Down
11
@ Dennis98: não sou remotamente irritado ou ofendido :) A verificação dos tipos de entrada é porque você recebe avisos no console do Chrome se tentar acessar selectionStartou selectionEndem um <input>tipo de elemento (como "número") que não apoie-o (consulte jsfiddle.net/6zoposby/2 , por exemplo). Eu deixei a verificação para a existência de, selectionStartpara que o código não seja quebrado no IE <= 8. Admito que a verificação activeElementesteja provavelmente exagerada agora. Eu uso sliceporque é mais poderoso (embora não seja útil aqui) e um pouco mais curto para digitar do que substring.
Tim Down
111

Obtenha o texto destacado desta maneira:

window.getSelection().toString()

e, claro, um tratamento especial para ie:

document.selection.createRange().htmlText
ParPar
fonte
2
Para o IE> = 10 "o document.selection suporte foi removido no IE10 e substituído por window.getSelection ". Origem: connect.microsoft.com/IE/feedback/details/795325/…
user2314737
Isso falhará sob várias condições em vários navegadores (por exemplo, Firefox).
Makyen
11

Esta solução funciona se você estiver usando o chrome (não é possível verificar outros navegadores) e se o texto estiver localizado no mesmo elemento DOM:

window.getSelection().anchorNode.textContent.substring(
  window.getSelection().extentOffset, 
  window.getSelection().anchorOffset)
Andrew Kennedy
fonte
0

Use window.getSelection().toString().

Você pode ler mais em developer.mozilla.org

Ebuka
fonte