在JavaScript中截取图片路径中的文件名（包括扩展名）可以通过多种方法实现，以下是两种常用方法：
一、使用字符串操作方法（推荐）
通过`substring`或`substr`方法截取路径中的文件名部分。以下是具体实现步骤：
获取图片路径
通过`document.getElementById`获取图片元素，再通过`src`属性获取完整路径。
定位文件名起始位置
使用`lastIndexOf（'/'）`找到最后一个斜杠`/`的位置，该位置后即为文件名的起始索引。
截取文件名
使用`substring`或`substr`方法截取从起始索引到字符串末尾的子串。
示例代码：
```javascript
function getImageFilename(imgId) {
const img = document.getElementById(imgId);
if (!img || !img.src) return null;
const path = img.src;
const lastSlashIndex = path.lastIndexOf('/');
if (lastSlashIndex === -1) {
// 路径以根目录开头
return path;
} else {
// 截取最后一个斜杠后的部分
return path.substring(lastSlashIndex + 1);
}
}
// 使用示例
const filename = getImageFilename('myImage.jpg');
console.log(filename); // 输出: myImage.jpg
```
注意事项：
若路径以根目录开头（如`/images/myImage.jpg`），需特殊处理；
`substring`和`substr`在参数为单个数字时效果相同，均从指定位置截取后续字符。
二、使用正则表达式
通过正则表达式匹配`src`属性值来提取文件名。以下是具体实现步骤：
获取图片路径
同样通过`document.getElementById`获取图片元素及其`src`属性。
匹配`src`属性值
使用正则表达式`/src=（[^'"]+）`匹配`src`后的文件名（包含扩展名）。
提取文件名
通过`exec`方法循环获取所有匹配结果。
示例代码：
```javascript
function getImageSrc(imgId) {
const img = document.getElementById(imgId);
if (!img || !img.src) return null;
const regex = /src=([^'"]+)/g;
let match;
while ((match = regex.exec(img.src))) {
return match;
}
return null;
}
// 使用示例
const src = getImageSrc('myImage.jpg');
console.log(src); // 输出: myImage.jpg
```
注意事项：
正则表达式需匹配单引号或双引号包裹的`src`值，避免属性值中包含特殊字符导致匹配失败；
仅适用于`src`属性存在且格式规范的情况。
三、完整示例：从图片元素直接获取属性
若需直接获取`img`标签的`name`属性（不包含路径），可使用`getAttribute`方法：
```javascript
const img = document.getElementById('myImage');
const name = img.getAttribute('name');
console.log(name); // 输出: image123（如果有name属性）
```
但需注意，`name`属性在现代网页中较少使用，通常推荐使用`src`属性。
以上方法可根据具体需求选择使用，字符串操作方法兼容性更广，而正则表达式在处理复杂路径时更灵活。
