当前位置：首页 > news >正文

使用正则表达式检测Base64字符串并提取图片类型及正文的JavaScript函数，代码精简且高效

news 2025/8/11 7:03:26

自己用的。源代码：

function parseBase64(str) {// 尝试匹配 data URI 格式（包含图片类型）const dataUriMatch = str.match(/^data:image\/(\w+);base64,([A-Za-z0-9+/=\s]+)$/);if (dataUriMatch) {const imageType = dataUriMatch[1];const base64Data = dataUriMatch[2].replace(/\s/g, '');if (/^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/.test(base64Data)) {return { type: imageType, data: base64Data };}}// 尝试匹配纯Base64字符串（无图片类型）const pureBase64 = str.replace(/\s/g, '');if (/^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/.test(pureBase64)) {return { type: null, data: pureBase64 };}return null; // 无效Base64
}

示例：

// 测试1：带图片类型的有效Base64
const imgBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
console.log(parseBase64(imgBase64));
// 输出: { type: "png", data: "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" }// 测试2：纯Base64字符串
const textBase64 = 'SGVsbG8gV29ybGQh'; // "Hello World!"的Base64编码
console.log(parseBase64(textBase64));
// 输出: { type: null, data: "SGVsbG8gV29ybGQh" }// 测试3：无效Base64
console.log(parseBase64("invalid@base64")); // 输出: null

功能说明：

检测Data URI格式：
- 使用正则/^data:image\/(\w+);base64,([A-Za-z0-9+/=\s]+)$/匹配：
  - image/\w+：提取图片类型（如png/jpeg）
  - ([A-Za-z0-9+/=\s]+)：捕获Base64正文（允许空格和等号）
- 移除正文中的空格后验证Base64有效性
检测纯Base64字符串：
- 移除所有空格后使用严格正则验证：
  - ^([A-Za-z0-9+/]{4})*：匹配4的倍数长度的有效字符组
  - ([A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$：处理结尾的填充等号
返回结果：
- 有效Data URI：返回{ type: "图片类型", data: "Base64正文" }
- 有效纯Base64：返回{ type: null, data: "Base64正文" }
- 无效输入：返回null

正则关键点：

Base64有效性验证：/^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/
- 确保字符集合法（A-Z/a-z/0-9/+/）
- 验证长度是4的倍数
- 正确处理结尾的=填充符
空格处理：在验证前移除所有空格（replace(/\s/g, '')），增强兼容性