Как я могу уточнить этот код Javascript, чтобы уточнить его, чтобы он работал только на ссылки из изображений (а не ссылки из текста)

Я хочу внести некоторые изменения в некоторый код из предыдущего вопроса:

// 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=([\d\w]+)/.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') не вижу разницы между текстовой ссылкой и ссылкой на изображение.

Источник

7 ответов

Решение

Используйте 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=([\d\w]+)/.exec (imgLink.getAttribute ('href') );
    if( result) {
        // make a new url using the 'base' and the 'asin' value
        imgLink.setAttribute ('href', base+result[1]);
    }
}
Источник

Вы можете просто проверить 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=([\d\w]+)/.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]);
      }}
}
Источник

Вы можете фильтровать ссылки в зависимости от того, содержат ли они изображение.

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
}
Источник

Вы можете использовать регулярное выражение для проверки ссылки внутри HTML ссылки:

for(var i = 0;i < links.length;i++) {

    // check each link for the 'asin' value
    var result = /asin=([\d\w]+)/.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.

Источник 
// 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=([\d\w]+)/.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]);
    }
}
Источник

Существует коллекция ссылок, и вы можете просто проверить, имеет ли ссылка дочерний узел изображения:

var link, links = document.links;
var re = /asin=([\d\w]+)/;
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];
  }
}
Источник

Моим первоначальным ответом было бы посмотреть на запрос Выбрать все, а затем назначить имя класса, чтобы захватить все теги a, которые будут зависеть от того, что вы пытаетесь сделать. Когда я доберусь до своего ноутбука, я отредактирую это на примере.

Источник
Другие вопросы по тегам