拆分图像src属性与普通的香草JavaScript,没有正则表达式

时间:2016-11-01 20:08:25

标签: javascript dom split attributes

问题

我正在试图弄清楚如何用<img>标签的普通香蕉JavaScript拆分src元素。我认为我的代码非常可靠,但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不可用。此外,它是localhost上的一个页面,我在Chrome开发人员工具控制台中进行编码,如果这样做有所不同。

我已经尝试了什么

我已经搜索了一份副本,但没有找到一个完全回答我要求的内容。以下是我在提交此问题之前提到的帖子:

Javascript: Split and variable issues
Split a image tag on html string
Getting image src name javascript
How to split and assign 2 words?
What is causing the error `string.split is not a function`?

我的问题

  1. 如何解析<img>标签src属性中的图像文件名,只使用简单的vanilla JavaScript,而不使用正则表达式?

  2. 我目前的代码出了什么问题?

2 个答案:

答案 0 :(得分:2)

看起来这部分是错误的,

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

而不是执行&#39; toString&#39;在元素对象上,您应该只从元素访问.src属性。所以,

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

答案 1 :(得分:0)

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

非常感谢迈克尔·卡姆登(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);


}