<div class="1" >quero pegar
AQUI DENTRO PODE TER
quebra de linha...
paragrafo...
espaços
várias outras tags html...
qualquer coisa...
</div>
Como faço para casar essa div
com regex? Exemplo: https://regexr.com/4c1n0
<div class="1" >quero pegar
AQUI DENTRO PODE TER
quebra de linha...
paragrafo...
espaços
várias outras tags html...
qualquer coisa...
</div>
Como faço para casar essa div
com regex? Exemplo: https://regexr.com/4c1n0
O ideal é usar um parser de HTML, pois ele consegue lidar com todos os casos possíveis e válidos da sintaxe HTML, que são muito mais difíceis de lidar com regex. Dito isso, vamos a algumas alternativas...
Por padrão o ponto não considera quebras de linha, por isso <div class="1">.*</div>
não funciona. Uma alternativa é usar esta regex:
<div[^>]*>([\s\S]*?)<\/div>
Logo após <div
temos [^>]*
: uma sequência de zero ou mais caracteres que não são >
. Embora o ponto (.*
) possa funcionar, é melhor dizer exatamente o que você quer, já que o ponto pode ultrapassar o >
e testar os caracteres que tem depois (e em seguida a regex pode voltar, e fazer esse vai-e-vem várias vezes, até encontrar um match). Já usando [^>]
eu garanto que ela para quando encontra o primeiro >
.
Depois temos [\s\S]
. O atalho \s
(minúsculo) significa "espaços, TAB, quebras de linha, etc" (a lista exata varia conforme a linguagem). E \S
(maiúsculo) significa "qualquer coisa que não seja \s
". Ou seja, [\s\S]
é "qualquer coisa que seja \s
ou que não seja \s
", o que é outra maneira de dizer "qualquer caractere, incluindo quebras de linha" (basicamente um "ponto turbinado").
Em seguida temos o quantificador *
(zero ou mais ocorrências). Se quiser obrigar que a tag tenha alguma coisa dentro dela, pode trocá-lo por +
. O problema é que eles são "gananciosos" e tentam pegar o máximo possível de caracteres. Então eu uso o ?
logo depois para cancelar este comportamento (com isso, a regex passa a pegar a menor quantidade possível de caracteres que a satisfaça). A diferença acontece quando há mais de um div
no texto. Exemplo:
<div class="1" >div1</div>
<div class="1" >div2</div>
Se eu usar <div[^>]*>([\s\S]*)<\/div>
(sem o ?
), a regex pega os dois divs de uma só vez, pois o *
é ganancioso e pega o máximo de caracteres que puder. Isso faz com que ele pegue as duas divs juntas, veja aqui.
Colocando o ?
(ou seja, <div[^>]*>([\s\S]*?)<\/div>
), o *
deixa de ser ganancioso e pega o mínimo possível de caracteres. Com isso, ele pega as duas divs separadamente, veja aqui.
Se não quiser usar grupos de captura, pode trocar a regex para:
(?<=<div[^>]*>)[\s\S]*?(?=<\/div>)
Neste caso usamos lookbehind e loohahead (os trechos com (?<=
e (?=
). A diferença é que eles só verificam se algo existe antes ou depois, mas estes trechos não fazem parte do match (veja aqui). Mas o lookbehind é um pouco mais ineficiente, e nem todas as engines aceitam expressões de tamanho variável em um lookbehind (no caso, o [^>]*
), então provavelmente é melhor usar a primeira solução, com o grupo de captura.
Mas ainda há um problema. Se tiver uma div dentro de outra:
<div class="1">
abc
<div>div interna</div>
xyz
</div>
A regex acima só pega até o primeiro </div>
, deixando "xyz" de fora (veja aqui). E se eu tirar o ?
da regex, volto para o problema anterior, que é pegar várias divs de uma vez (veja aqui).
Aí começa a complicar, e talvez nesse caso seja mais fácil usar um parser de HTML, pois ele já trata desses casos para você. Uma regex para isso não é impossível, mas é muito mais complicada, pois teria que usar regex recursivas:
<div[^>]*>((?:(?R)|(?:(?!<\/?div)[\s\S]))*)<\/div>
O problema é que nem todas as linguagens e engines suportam regex recursivas (o trecho com (?R)
, que chama a própria regex recursivamente). Basicamente, a regex verifica se dentro dela existem outras divs ou outras tags que não são divs, garantindo que só pegue o que está dentro da div mais externa (veja aqui esta regex funcionando).
Novamente, avalie seus casos de uso e veja se vale a pena usar estas expressões (e se a mais simples já serve para os seus casos). Em algumas situações, usar regex é aceitável, mas dependendo do quão complexo está seu HTML, um parser é a melhor opção.
A regex recursiva acima, por exemplo, ainda deixa passar este caso:
<div class="1">abc
<!--
comentario </div>
-->
xyz
</div>
A regex não consegue identificar que </div>
está dentro de um comentário e deve ser ignorada (e como você disse que dentro da div pode ter "qualquer coisa", resolvi incluir este exemplo, mesmo que seja "raro"). Com isso, o trecho "xyz" é deixado de fora (veja aqui).
Já um parser de HTML consegue ignorar os comentários sem maiores problemas.
Utilizei a seguinte regex:
\<div.*\>((.*|\s|\r|\n)*)\<\/div\>/gm
Veja o exemplo abaixo:
const texto = `<div class="1" >quero pegar
AQUI DENTRO PODE TER
quebra de linha...
paragrafo...
espaços
várias outras tags html...
qualquer coisa...
<p> Teste </p>
<p><span> Teste <span> </p>
</div>`;
const regex = /\<div.*\>((.*|\s|\r|\n)*)\<\/div\>/gm;
console.log(texto.replace(regex, '$1'));
Veja o regex: https://regex101.com/r/KCm86L/1