Regex para Extensões de Imagem

Existem muitos cenários onde você deseja determinar se um arquivo é uma imagem, como em uploads de arquivos ou processamento de caminhos. Cubra os principais formatos de imagem com uma regex simples.

Código

const REGEX_IMG = /\.(png|webp|jpe?g|avif|gif)/;

function isImage(filename: string): boolean {
  return REGEX_IMG.test(filename);
}

Exemplos de Uso

isImage("photo.jpg");     // true
isImage("image.jpeg");    // true (e? também cobre jpeg)
isImage("graphic.png");   // true
isImage("animation.gif"); // true
isImage("compressed.webp"); // true
isImage("modern.avif");   // true
isImage("document.pdf");  // false

Explicação do Padrão

• \.: Corresponde a um ponto literal
• (png|webp|jpe?g|avif|gif): Alternância via grupo de captura
  • jpe?g: Corresponde a jpg e jpeg (e é opcional)

Correspondência sem Distinção de Maiúsculas/Minúsculas

Para lidar com extensões em maiúsculas, adicione a flag i:

const REGEX_IMG = /\.(png|webp|jpe?g|avif|gif)/i;

isImage("PHOTO.JPG"); // true

Abordagens Alternativas

Se você preferir tipos MIME em vez de regex:

async function isImageFile(file: File): Promise<boolean> {
  return file.type.startsWith("image/");
}

Ao extrair extensões de URLs, a API URL é mais robusta:

function getExtension(url: string): string {
  try {
    const pathname = new URL(url).pathname;
    return pathname.slice(pathname.lastIndexOf("."));
  } catch {
    return "";
  }
}

Embora a regex seja simples, ela pode produzir falsos positivos quando URLs contêm parâmetros de consulta. Escolha o método apropriado com base no seu caso de uso.