logo hsb.horse
← Retour à l’index des snippets

Snippets

Regex pour les extensions d'images

Pattern regex JavaScript/TypeScript pour détecter les formats d'image depuis les noms de fichiers. Supporte png, webp, jpg, jpeg, avif, gif.

Publié: Mis à jour:

Il existe de nombreuses situations où vous souhaitez déterminer si un fichier est une image, comme lors d’uploads de fichiers ou de traitements de chemins. Couvrez les principaux formats d’image avec une regex simple.

Code

const REGEX_IMG = /\.(png|webp|jpe?g|avif|gif)/;
function isImage(filename: string): boolean {
return REGEX_IMG.test(filename);
}

Exemples d’utilisation

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

Explication du pattern

  • \.: Correspond à un point littéral
  • (png|webp|jpe?g|avif|gif): Alternative via groupe de capture
    • jpe?g: Correspond à jpg et jpeg (e est optionnel)

Insensibilité à la casse

Pour gérer les extensions en majuscules, ajoutez le flag i :

const REGEX_IMG = /\.(png|webp|jpe?g|avif|gif)/i;
isImage("PHOTO.JPG"); // true

Approches alternatives

Si vous préférez les types MIME aux regex :

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

Pour extraire les extensions depuis des URLs, l’API URL est plus robuste :

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

Bien que la regex soit simple, elle peut produire des faux positifs lorsque les URLs contiennent des paramètres de requête. Choisissez la méthode appropriée selon votre cas d’usage.