JavaScript

Como selecionar texto de um elemento com JavaScript

12 de março de 2022

Como selecionar texto de um elemento com JavaScript

Neste artigo você vai aprender a como selecionar texto de um elemento com JavaScript, utilizando uma abordagem simples!

selecionar texto de um elemento com JavaScript capa

Fala programador(a), beleza? Bora aprender mais sobre DOM e JavaScript!

Para selecionar o texto de um elemento vamos precisar seguir alguns passos

Primeiramente precisamos selecionar este elemento, para poder ter controle de ações sobre o mesmo

Após isso teremos uma bifurcação de código, pois para alguns navegadores teremos uma versão de código e para outros outra

Basicamente faremos um if/else para identificar estes navegadores

E criaremos uma estrutura de código que corresponde a cada um

As duas consistem basicamente na mesma coisa: selecionar o comprimento todo do texto e fazer o highlight no navegador

Este highlight é a confirmação que o código foi selecionado, veja o código necessário:

element = document.querySelector("#my-paragraph");

if (document.body.createTextRange) {
  const range = document.body.createTextRange();
  range.moveToElementText(element);
  range.select();
} else if (window.getSelection) {
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(element);
  selection.removeAllRanges();
  selection.addRange(range);
}

Este código faz a seleção do elemento na primeira linha, um com id de #my-paragraph

Você precisa trocar para o seletor do seu elemento

Após isso, fazemos a bifurcação para checar o tipo do navegador

E prosseguimos com o resto do código necessário para selecionar o texto nas duas situações

E pronto, o texto estará selecionado!

Conclusão

No artigo de hoje você aprendeu a como selecionar texto de um elemento com JavaScript

Primeiramente precisamos selecionar o elemento alvo

E depois fazer uma checagem do navegador do usuário, para escolher a abordagem que fará o trabalho com sucesso

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!

Subscribe
Notify of
guest
4 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Marcos

Seus posts ajudam muito

Battisti

valeu Marcos!

Mateus R.

Cara, muito obrigado, ajudou muito! estava precisando desse tipo de função para implementar em uma outra de copiar o texto da tela e deu certinho rsrs

Battisti

de nada Mateus!

4
0
Would love your thoughts, please comment.x