分割图像src属性与普通的香草JavaScript和没有Regex

Split image src attribute with plain vanilla JavaScript and no Regex

本文关键字：JavaScript 香草 Regex src 图像 属性 分割      更新时间：2023-09-26

事件

我试图找出如何分割一个src元素与普通的香草JavaScript的<img>标签。我认为我的代码是相当坚实的，但Chrome开发控制台一直给我"someFunction不是一个函数错误"。

我的代码

下面是我当前的代码:

var links = document.getElementsByTagName('img');
for (var i=0; i<links.length; ++i) {
   console.log(links[i].src);
   var partsArr = links[i].toString().split('/');
   console.log(partsArr);

}

它运行了，但是我得到partsArr的输出是:

["[object HTMLImageElement]"]

我本来以为是这样的:

["file:","pathpart1", "pathpart2", ... "filename.ext"]

注意:我必须用纯JavaScript做这个，因为jQuery不可用。此外，这是一个页面在本地主机，我在Chrome开发人员工具控制台编码，如果这有什么不同。

我已经尝试过了

我已经搜索了一个副本，没有找到一个完全回答我的问题。以下是我在提交这个问题之前参考的帖子:

Javascript:拆分和变量问题
分割html字符串
上的图像标签获取图像src名称javascript
如何分割和分配2个词?
是什么导致了错误字符串。Split不是一个函数?

我的问题

  1. 我如何从<img>标签src属性解析图像文件名，使用纯JavaScript，没有正则表达式?

  2. 我在当前代码中做错了什么?

看起来这部分是错的，

var partsArr = links[i].toString().split('/');

不要在元素对象上执行'toString'，而应该直接从元素中访问.src属性。

var partsArr = links[i].src.split('/');

(代表问题作者发布解决方案)。

非常感谢Michael Camden为我提供了另一双眼睛并发现了我的错误。在做了他建议的修改之后，代码可以完美地工作了。

对于其他任何人寻找一个普通的JavaScript方式来获得所有的图像名称从网页没有所有的文件路径位置信息，这是我写的脚本，像一个魅力:

var links = document.getElementsByTagName('img');
for (var i=0; i<links.length; ++i) {
   console.log(links[i].src);
   var partsArr = links[i].src.split('/');
   console.log(partsArr);
   var imageName = partsArr[partsArr.length -1];
   console.log(imageName);

}
相关文章：