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.

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