1. 图片格式简介

  • JPEG（联合照片专家组）：适用于连续色调的图片，如照片。
  • PNG（可移植网络图形）：适用于具有透明背景的图片。
  • GIF（图形交换格式）：适用于简单动画和图标。
  • BMP（位图）：适用于高分辨率的图片。
  • SVG（可伸缩矢量图形）：适用于矢量图形，具有无损压缩和可缩放的特点。

2. 使用正则表达式匹配图片格式

function matchImageFormat(filename) {
  const imageRegex = /\.(jpg|jpeg|png|gif|bmp|svg)$/i;
  return imageRegex.test(filename);
}

console.log(matchImageFormat('example.jpg')); // true
console.log(matchImageFormat('example.txt')); // false

在上面的代码中，我们定义了一个名为 matchImageFormat 的函数，它接收一个文件名作为参数。imageRegex 是一个正则表达式，用来匹配以 .jpg、.jpeg、.png、.gif、.bmp 或 .svg 结尾的文件名。通过调用 test 方法，我们可以判断给定的文件名是否匹配正则表达式。

3. 处理图片格式

3.1 检测图片类型

function detectImageType(filename) {
  const imageRegex = /\.(jpg|jpeg|png|gif|bmp|svg)$/i;
  if (imageRegex.test(filename)) {
    const type = filename.split('.').pop().toLowerCase();
    return type;
  }
  return null;
}

console.log(detectImageType('example.jpg')); // jpg
console.log(detectImageType('example.txt')); // null

3.2 图片预览

function createImageElement(url) {
  const imageRegex = /\.(jpg|jpeg|png|gif|bmp|svg)$/i;
  if (imageRegex.test(url)) {
    const img = document.createElement('img');
    img.src = url;
    img.alt = 'Image';
    return img;
  }
  return null;
}

const imageUrl = 'example.jpg';
const imageElement = createImageElement(imageUrl);
document.body.appendChild(imageElement);

4. 总结