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!

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

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

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!