Como remover tags HTML de string com JavaScript

Neste artigo você vai aprender a como remover tags HTML de string com JavaScript, vamos utilizar uma abordagem simples

Remover tags HTML de uma string com JavaScript é uma tarefa comum na programação web. Existem várias maneiras de fazer isso, mas vamos apresentar duas delas aqui.

Usando a função replace():

A função replace() é uma função built-in do JavaScript que permite substituir uma substring por outra. Podemos usá-la para substituir todas as tags HTML por nada, removendo-as assim da string.

function removeHTMLTags(str) {
  return str.replace(/<[^>]*>/g, '');
}

Usando o método innerText:

O método innerText é uma propriedade de um elemento HTML que retorna o conteúdo de um elemento sem as tags HTML.

Podemos usar esse método para remover as tags HTML de uma string, criando um elemento temporário e usando-o para acessar o conteúdo sem as tags.

function removeHTMLTags(str) {
  var tmp = document.createElement("DIV");
  tmp.innerHTML = str;
  return tmp.innerText;
}

Ambos os métodos acima removem as tags HTML de uma string com JavaScript. A escolha de qual usar dependerá da sua aplicação e das suas necessidades específicas.

Porque remover tags HTML de string com JavaScript?

Existem várias razões para remover tags HTML de uma string com JavaScript, algumas das quais incluem:

1. Processamento de dados: Às vezes, as strings recebidas de um servidor ou de outra fonte contêm tags HTML que precisam ser removidas antes de serem processadas ou exibidas em uma página web.
2. Segurança: As tags HTML podem ser usadas para injetar código malicioso em uma página web, como scripts que podem roubar informações do usuário ou danificar o site. Remover as tags HTML de uma string pode ajudar a garantir que o código seja seguro.
3. Acessibilidade: As tags HTML podem ser usadas para dar formato ao conteúdo, mas às vezes elas podem causar problemas para usuários com necessidades especiais. Remover as tags HTML de uma string pode ajudar a garantir que o conteúdo seja acessível para todos os usuários.
4. Estética: Algumas vezes, as tags HTML podem causar problemas de formatação ou estética quando exibidas em uma página web. Remover as tags HTML de uma string pode ajudar a garantir que o conteúdo seja exibido de forma adequada.

Enfim, remover tags HTML de uma string com JavaScript é uma tarefa útil e frequente para garantir a segurança, acessibilidade, estética e processamento de dados.

Deixe um comentário contando o que achou deste artigo 🙂

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 118 aulas
• 4 projetos
• 9h 33min

Conhecer formação

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Em conclusão, remover tags HTML de uma string com JavaScript é uma tarefa comum na programação web.

Existem várias maneiras de fazer isso, como usando a função built-in replace() ou o método innerText.

Ambos os métodos são eficazes e fáceis de implementar, mas a escolha de qual usar dependerá das necessidades específicas da sua aplicação.

Esperamos que este artigo tenha sido útil e lhe dê uma boa base para trabalhar com remoção de tags HTML em suas próximas tarefas de programação.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Rodando o exemplo pra ver o resultado:

Antes de sair usando, vale ver a entrada e a saída lado a lado, assim tu enxerga exatamente o que a regex tira

const html = '<p>Olá, <strong>mundo</strong>!</p>'

console.log(removeHTMLTags(html))
// Olá, mundo!

Repara que só as tags somem, o texto de dentro continua ali intacto

É esse o comportamento que tu quer na maioria dos casos: limpar a marcação e preservar o conteúdo 🙂

innerText ou textContent? Qual usar:

Essa é a dúvida clássica de quem chega aqui, então bora resolver ela

O innerText devolve o texto do jeito que ele APARECE na tela, ou seja, ele leva em conta a renderização: o que está escondido por CSS fica de fora, e ele tenta respeitar quebras de linha visuais

Já o textContent devolve o texto cru de todos os nós, sem se importar com estilo nem com o que está visível

function removeHTMLTags(str) {
const tmp = document.createElement('div')
tmp.innerHTML = str
return tmp.textContent
}

Na prática: se tu só quer o texto limpo pra salvar, comparar ou mandar pra uma API, o textContent é o caminho mais previsível

Se tu quer o texto como o usuário LÊ na tela, aí sim o innerText faz sentido

Tome cuidado com um detalhe: os dois dependem do DOM do navegador, então esse caminho não funciona direto no Node sem uma camada que simule o DOM

Usando o DOMParser para strings que vieram de fora:

Tem um terceiro caminho que quase ninguém mostra e que é o mais indicado quando a string NÃO é sua, tipo conteúdo vindo de uma API, de um CMS ou de resposta de modelo de IA

O DOMParser monta um documento separado, isolado da sua página, e você lê o texto dali

function removeHTMLTags(str) {
const doc = new DOMParser().parseFromString(str, 'text/html')
return doc.body.textContent || ''
}

Por que isso importa? Porque no caminho do innerHTML tu está montando a marcação de um terceiro dentro de um elemento real do seu documento

O documento gerado pelo DOMParser é inerte: os scripts que vierem na string não são executados ali

Se a string é 100% sua e você confia nela, o replace resolve numa linha

Se ela vem de fora, prefira o DOMParser

Onde a regex quebra (leia antes de colocar em produção):

Então se liga nos casos em que ela te trai:

Atributo com sinal de maior dentro, tipo um title com um > no meio: o corte acontece no lugar errado e sobra lixo na saída

Entidades HTML: & e companhia continuam ali como estão, a regex não converte nada de volta pra texto normal

Conteúdo de script e style: a tag some, mas o que estava DENTRO dela vira texto solto no seu resultado

E o mais importante: remover tag não é sanitizar

Se você tira as tags de uma string e depois joga esse resultado de volta em um innerHTML, dá pra montar cenário em que o conteúdo escapado volta a virar marcação

Regra simples pra não se ferrar: pra EXIBIR texto na tela, use textContent em vez de innerHTML

Se o teu caso é aceitar HTML de usuário e ainda assim renderizar HTML, aí o assunto não é remover tag, é sanitização, e isso pede uma ferramenta feita pra isso

Como remover as tags e manter as quebras de linha:

Um detalhe que pega muita gente: tira as tags de um texto com vários parágrafos e vem tudo grudado numa linha só

A solução é trocar as tags de quebra ANTES de remover o resto

function htmlParaTexto(str) {
return str
.replace(/<br\s*\/?>/gi, '\n')
.trim()
}

A ordem aqui é tudo: primeiro tu converte o que representa quebra, depois tu limpa o resto, por último tu arruma os espaços sobrando

Já me ferrei invertendo isso e o texto saiu todo em uma linha, aí fica difícil entender o que aconteceu haha

Onde isso aparece no dia a dia hoje:

O cenário mudou desde que essa necessidade era só sobre conteúdo de CMS

Hoje é muito comum receber texto já formatado de uma API, de um editor rich text ou de uma resposta de modelo de IA, e precisar da versão limpa daquilo

Casos típicos:

Gerar o resumo ou a prévia de um card a partir do conteúdo completo

Contar caracteres de verdade, sem contar marcação junto

Mandar o texto pra busca, pra comparação ou pra um campo que não aceita HTML

Exportar pra um arquivo de texto puro ou pra um e-mail em texto

Em todos eles a pergunta é a mesma: o destino renderiza HTML? Se não renderiza, remove a marcação antes de mandar 🙂

Perguntas frequentes:

Como remover apenas UMA tag específica da string?

Basta apontar a regex pra ela em vez de usar o padrão genérico, por exemplo trocando só as tags de negrito e mantendo o resto da marcação

str.replace(/<\/?strong>/gi, '')

Dá pra remover tags HTML no Node.js?

O caminho do replace funciona em qualquer lugar, porque é só manipulação de string

O caminho do innerText e do textContent não, porque eles dependem do DOM do navegador, que não existe por padrão no Node

Remover tags HTML protege contra XSS?

Não trate como proteção

Remover tag limpa a aparência do texto, mas o que protege de verdade é exibir conteúdo com textContent em vez de innerHTML, e usar sanitização quando você realmente precisa renderizar HTML de terceiros

Qual dos métodos é o mais indicado?

String sua e confiável: replace resolve numa linha

String vinda de fora: DOMParser com textContent

Texto que precisa sair igual ao que o usuário vê na tela: innerText

E as entidades tipo & ficam na string?

Com o replace sim, elas continuam do jeito que vieram

Os caminhos que passam pelo DOM já entregam o texto decodificado, esse é um bom motivo pra escolher eles quando o conteúdo tem acento, aspas e símbolos