2
<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

11
  • 2
    Talvez seja melhor usar um parser de HTML. Se pode ter qualquer coisa dentro da tag, quer dizer que também pode ter outras divs, então vc terá que saber se está dentro da div interna ou externa para saber onde parar, e embora seja possível (com regex recursiva, que nem todas as linguagens suportam), é bem mais fácil usando os parsers disponíveis em cada linguagem :-)
    – hkotsubo
    Commented 10/04/2019 às 16:55
  • não, não preciso que seja em regex para algo maior, é só um exemplo, o que me interessa é a ideia.
    – Rod
    Commented 10/04/2019 às 16:56
  • e incluindo a div? editei a pergunta, digamos que exista um padrão nessa div com id=1, só exista ela.
    – Rod
    Commented 10/04/2019 às 16:58
  • 1
    Pq não pega o innerHTML da div?
    – Sam
    Commented 10/04/2019 às 17:12
  • 1
    Já vi. É mais fácil pegar o inner HTML da div. Está usando qual linguagem?
    – Sam
    Commented 10/04/2019 às 17:13

2 Respostas 2

3

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.

3
  • 1
    cara, vou estudar muitooo sobre isso. Pra fazer o que quero to realmente muito cabaço ainda. Obrigado.
    – Rod
    Commented 10/04/2019 às 18:34
  • me indica um bom livro sobre regex?
    – Rod
    Commented 10/04/2019 às 18:42
  • @Rod Para estudo, dois sites que eu gosto bastante são esse e esse. E livros, eu recomendo esse (que é bem denso e vai fundo mesmo no assunto) e esse.
    – hkotsubo
    Commented 10/04/2019 às 18:46
3

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

7
  • tá pegando tudo regexr.com/4c1n0
    – Rod
    Commented 10/04/2019 às 17:22
  • faça replace pelo grupo $1 Commented 10/04/2019 às 17:24
  • perfeito. No regexr onde estou usando trata diferente, mas é isso mesmo que queria. Obrigado amigo.
    – Rod
    Commented 10/04/2019 às 17:26
  • só uma última dúvida, em uma linguagem com PHP ou ASP como recupero esse $1? Tem algum link?
    – Rod
    Commented 10/04/2019 às 17:27
  • nesse site regex101.com/r/KCm86L/1 clique em code generator, nele pode escolher a linguagem Commented 10/04/2019 às 17:28

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 .