Regex für Bilderweiterungen

Es gibt viele Szenarien, in denen Sie feststellen möchten, ob eine Datei ein Bild ist, wie z.B. bei Datei-Uploads oder Pfadverarbeitungen. Decken Sie wichtige Bildformate mit einem einfachen Regex ab.

Code

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

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

Verwendungsbeispiele

isImage("photo.jpg");     // true
isImage("image.jpeg");    // true (e? deckt auch jpeg ab)
isImage("graphic.png");   // true
isImage("animation.gif"); // true
isImage("compressed.webp"); // true
isImage("modern.avif");   // true
isImage("document.pdf");  // false

Erklärung des Patterns

• \.: Passt auf einen literalen Punkt
• (png|webp|jpe?g|avif|gif): Alternative über Capture-Gruppe
  • jpe?g: Passt auf jpg und jpeg (e ist optional)

Groß-/Kleinschreibung

Um Großbuchstaben-Erweiterungen zu behandeln, fügen Sie das i-Flag hinzu:

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

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

Alternative Ansätze

Wenn Sie MIME-Typen Regex vorziehen:

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

Beim Extrahieren von Erweiterungen aus URLs ist die URL-API robuster:

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

Obwohl Regex einfach ist, kann es zu Fehlerkennungen kommen, wenn URLs Query-Parameter enthalten. Wählen Sie die passende Methode je nach Anwendungsfall.