Por padrão, o ponto não considera as quebras de linha, então .*
só vai até a próxima quebra de linha e não consegue ir adiante (e como o g-img
não está na mesma linha do g-card
, ele não encontra nada).
Muitas linguagens e ferramentas possuem uma opção para mudar este comportamento, e geralmente é chamada de "DOT_ALL" ou "single line" (que é um nome meio confuso para o que a opção faz, mas enfim).
No site regex101.com basta escolher a opção "single line" (clique na bandeira no canto direito, logo depois da regex), isso fará com que o ponto também considere as quebras de linha. Veja que com esta opção ativada, são encontrados os matches corretamente.
Outra opção é trocar o ponto por [\s\S]
:
<g-card([\s\S]*?)>([\s\S]*?)<\/g-img>
Basicamente, \s
corresponde a "espaços, TAB e quebras de linha" (o significado exato muda de uma linguagem/engine/ferramenta para outra, mas quebras de linha sempre são consideradas) e \S
é "tudo que não for \s
". Ou seja, [\s\S]
é "tudo que for e que não for quebras de linha": basicamente um "ponto turbinado", pois corresponde a qualquer caractere, inclusive as quebras de linha (independente da opção "single line" estar ativada ou não, veja).
De qualquer forma, usar regex para manipular HTML nem sempre é a melhor solução. Muitas vezes um parser de HTML é a melhor opção.