0

Eu tenho uma string (html) e preciso remover tudo que está entre a primeira ocorrência de <div class="c e primeiro fechamento da tag > e último fechamento da "</div>". O primeiro, deve ser dessa forma pois a classe dessa div é gerada dinamicamente, permanecendo apenas o primeiro caractere.

Por exemplo: <div class="c2029" style="font-size:45px"><p class="auto">Testando 123...</p></div> deverá ser transformado em <p class="auto">Testando 123...</p>

Tentei da seguinte forma, mas está removendo toda a string:

var testString = '<div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div>'
var result = testString.replace(/\<div\_c.*\>/, '');

Editado

Caso a string tenha uma quebra de linha, a solução deixa de funcionar:

var testString = `<div class="c892"><h3>Título teste</h3>
Descrição após quebra de linha.</div>`
var result = testString.replace(/<div class="c.*?>(.*?)<\/div>/, '$1');

console.log(result);

JSFiddle

Como o Pedro havia informado na própria resposta, era só adicionar [\s\S] tendo o seguinte resultado:

var result = testString.replace(/<div class="c.*?>([\s\S]*?)<\/div>/, '$1');
2
  • Leia o comentário do Anderson Woss neste link, em que o recomendado é usar DOM para HTML parsing e não Regex. Commented 1/02/2018 às 14:00
  • @danieltakeshi então, estou tentando remover apenas essa div e manter todo o conteúdo interno Commented 1/02/2018 às 14:02

1 Resposta 1

3

Apesar de sabermos muito bem qual é a resposta clássica para as pessoas que tentam processar HTML utilizando expressões regulares, também temos a resposta seguinte na mesma pergunta, que adiciona um ponto interessante.

Para casos pontuais onde eu preciso extrair ou trabalhar algum dado de maneira simples em um texto HTML, muitas vezes é bem mais rápido e prático produzir uma expressão regular que faça o trabalho por mim do que utilizar um parser de HTML. Não vejo problema em usar regex nesse tipo de situação.

Esclarecido isso, a resposta:

var testString = '<div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div>'
var result = testString.replace(/<div class="c.*?>(.*?)<\/div>/, '$1');

console.log(result);

A expressão regular em si:

<div class="c.*?>(.*?)<\/div>

Explicação:

  • <div class="c.*?> - Aqui é utilizado um lazy quantifier (.*?) para capturar o padrão inicial e parar na primeira ocorrência do fechamento da tag >.
  • (.*?)<\/div> - Utilizamos novamente o lazy quantifier em um grupo de captura e terminamos com a tag de fechamento da div.
  • Por último, utilizamos o replace() mantendo o grupo 1 obtido na captura, utilizando o marcador $1.

Atualização

De acordo com o OP, parece que a resposta desejada era outra, já que existem situações onde a <div> de fechamento não aparece (o que não foi especificado na pergunta).

Solução 2:

<div class="c.*?>(((?!<\/div>)[\s\S])*)(<\/div>)?

Essa expressão regular foi ajustada para que pudesse considerar a nova situação e também a possibilidade de quebras de linha.

Demonstração: regex101.com

Explicação:

  • <div class="c.*?> - Esse é o início da captura do padrão especificado. captura qualquer texto até o fechamento da tag >.
  • (((?!<\/div>)[\s\S])*) - Esse já é um truque um pouco mais complexo. O padrão (?!<\/div>) é um lookahead que verifica se o match anterior não está seguido do padrão <\/div>. Em seguida eu capturo o próximo caractere que é e não um espaço em branco (dado pelo padrão [\s\S]), ou seja, qualquer caractere após essa asserção. É necessário verificar primeiro e capturar depois, porque se fosse o contrário ([\s\S](?!<\/div>)), o último caractere antes do padrão que não deve ser capturado também não seria capturado (Você pode verificar como isso ocorre alterando a demonstração do regex101). No fim, eu coloquei isso em um grupo de captura e mandei repetir o mesmo padrão zero ou mais vezes, resultando em: (((?!<\/div>)[\s\S])*).
  • (<\/div>)? - Finalmente, eu capturo o padrão de fechamento da div, marcando ele como opcional com o quantificador ?. Dessa forma, mesmo se o fechamento não existir, não vai haver problema algum.
12
  • dizem que deus chora quando um programador usa Regex para parsear um html...
    – Paz
    Commented 1/02/2018 às 16:06
  • 1
    Dizem, ainda, que há uma passagem oculta no livro dos Provérbios: "O homem perverso processa HTML com regex, mas o reto considera a utilização de um parser. Não há sabedoria, nem inteligência, nem mesmo conselho a favor daqueles que blasfemam contra o Senhor lendo linguagens livres de contexto com gramáticas regulares". Commented 1/02/2018 às 17:14
  • @Pedro saberia me dizer o por que não funciona quando há algum "\n" dentro dessa div? Commented 2/02/2018 às 18:10
  • 1
    @JulyanoFelipe Seu exemplo não funciona porque não existe a tag de fechamento da div na string. Veja novamente: jsfiddle.net/9w60cz0v/2 Commented 2/02/2018 às 19:25
  • 1
    @JulyanoFelipe Posso ajudar, sim. Qual é o novo problema? Commented 25/04/2018 às 17:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .