Neste artigo você vai aprender a como remover tags HTML de texto com JavaScript, de uma maneira simples e com compatibilidade em todos os navegadores

Remover tags HTML de texto com JavaScript capa

Fala programador(a), beleza? Bora aprender mais sobre HTML e também JavaScript!

Primeiramente precisamos receber o HTML que precisamos remover as tags

Você pode fazer isso com algum método de seleção como querySelector, e converter para texto com textContent

E então vamos criar uma função que passar o HTML em DOMParser, um objeto do JavaScript

Este objeto possui um método que recebe o HTML em texto e pode retornar apenas o texto que este elemento contém

Veja o exemplo completo:

var meuHtml = document.querySelector("div").textContent

function removerTags(html){
   const data = new DOMParser().parseFromString(html, 'text/html');
   return data.body.textContent || "";
}

console.log(removerTags(meuHtml)); // somente o texto

Aqui realizamos todos os passos do que foi explicado:

  1. Selecionamos o HTML e convertemos para texto;
  2. Criamos a função que nos entrega apenas o texto, removendo as tags;
  3. Retorna o texto das tags;

E assim podemos extrair os textos de qualquer elemento do nosso HTML!

Conclusão

Neste artigo você aprendeu a como remover tags HTML de texto com JavaScript

Utilizamos o método parseFromString de DOMParser, que faz o trabalho para nós

Precisamos apenas passar uma string com as tags e o texto a ser extraído

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!
Inscrever-se
Notificar de
guest

2 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários
CAIO VINICIUS NOLASCO FREITAS

ReferenceError: DOMParser is not defined

Esse é o retorno, como faço para adicionar essa biblioteca?

Thiago

É uma interface nativa.