我如何完善这个Javascript代码，使其只适用于来自图像的链接(而不是来自文本的链接)

Question

我想对上一个问题中的一些代码进行一些改进：

// the new base url
var base = ' https://www.example.co.uk/gp/wine/order?ie=UTF8&asin=';
var links  = document.getElementsByTagName('a');
for(var i = 0;i < links.length;i++){
    // check each link for the 'asin' value
    var result = /asin=([dw]+)/.exec(links[i].getAttribute('href'));
    if(result){
        // make a new url using the 'base' and the 'asin' value
        links[i].setAttribute('href', base+result[1]);
    }
}

现在，改为对所有链接执行操作，我能让它只查看来自图像的链接吗？

这里有一个HTML片段来展示我的意思：

<a href="/shop/product?ie=UTF8&amp;asin=Z00FDLN878&amp;tab=UK_Default" target="_blank"><img width="125" height="125" border="0" src="http://ecx.images-amazon.com/images/I/01W9a7gwosL.jpg" alt="43453"></a>

这是一个图像链接——我确实希望它能对此采取行动。

不可能

我的直觉是，这在代码中实际上是不可能的，因为document.getElementsByTagName('a')看不到文本链接和图像链接之间的区别。

Answer 1

使用querySelectorAll只预选正确类型的节点。例如：

// the new base url
var base        = 'https://www.example.co.uk/gp/wine/order?ie=UTF8&asin=';
var linkImgs    = document.querySelectorAll ("a > img");
for (var J = linkImgs.length - 1;  J >= 0;  --J) {
    var imgLink = linkImgs[J].parentNode;
    //--- Check each link for the 'asin' value
    var result  = /asin=([dw]+)/.exec (imgLink.getAttribute ('href') );
    if( result) {
        // make a new url using the 'base' and the 'asin' value
        imgLink.setAttribute ('href', base+result[1]);
    }
}

Answer 2

您可以使用regex检查链接的HTML中的链接：

for(var i = 0;i < links.length;i++) {
    // check each link for the 'asin' value
    var result = /asin=([dw]+)/.exec(links[i].getAttribute('href'));
    // check each link for an img tag
    var hasimage = /<img [^>]+>/.test(links[i].innerHTML);
    if(result && hasimage){
        // make a new url using the 'base' and the 'asin' value
        links[i].setAttribute('href', base+result[1]);
    }
}

此外，使用正则表达式搜索HTML可能不是最好的选择，但如果您控制生成的内容，那么这可能是没有第三方HTML解析器的最快方法。

Answer 3

您可以根据链接是否包含图像来过滤链接。

var links  = document.getElementsByTagName('a');
links = [].filter.call(links, function(item) {
   // test to see if child node is an image
   return item.childNodes[0].nodeName === 'IMG'; 
});
for(var i = 0;i < links.length;i++){
    // do what you gotta do
}

Answer 4

您可以只测试IMG子级，并且只在有链接的情况下处理该链接。

JSFiddle 示例

// the new base url
var base = ' https://www.example.co.uk/gp/wine/order?ie=UTF8&asin=';
var links  = document.getElementsByTagName('a');
for(var i = 0;i < links.length;i++){
    var linkElement = links[i];
    //get the first child of the a element
    var firstChild = linkElement.children[0];
    //if there is a child and it's an IMG then process this link
    if (typeof(firstChild) !== "undefined" && firstChild.tagName=="IMG") { 
      // check each link for the 'asin' value
      var result = /asin=([dw]+)/.exec(links[i].getAttribute('href'));
      if(result){
          // make a new url using the 'base' and the 'asin' value
          links[i].setAttribute('href', base+result[1]);
      }}
}

Answer 5

// the new base url
var base = ' https://www.example.co.uk/gp/wine/order?ie=UTF8&asin=';
var links  = document.getElementsByTagName('img');
var hrefs = links.parent;
for(var i = 0;i < hrefs.length;i++){
    // check each link for the 'asin' value
    var result = /asin=([dw]+)/.exec(hrefs[i].getAttribute('href'));
    if(result){
        // make a new url using the 'base' and the 'asin' value
        hrefs[i].setAttribute('href', base+result[1]);
    }
}

Answer 6

有一个链接集合，您可以检查链接是否有一个子节点：

var link, links = document.links;
var re = /asin=([dw]+)/;
for (var i=0, iLen=links.length; i<iLen; i++) {
  link = links[i]
  if (link.getElementsByTagName('img').length && re.test(link.href)) {
    link.href = base + result[1];
  }
}

Answer 7

我的初始响应是查看查询SelectAll，然后分配一个类名来抓取所有会受到您尝试做的任何事情影响的标签。当我拿到笔记本电脑时，我会用一个例子编辑它。