对于循环不能正常工作与字符串替换

Question

我正在尝试制作一个javascript webextension，它添加了几个数字，例如。 “123”到购物网站上每个产品的超链接文本的内部文本的末尾，例如。 http://www.tomleemusic.ca

例如，如果我转到此链接，http://tomleemusic.ca/catalogsearch/result/?cat=0&q=piano

我想将商品的标识号添加到商品名称的末尾。

name of product and the href tag are in its item link, tomleemusic.ca/xxxxxx with the x's being the item number

但是，通过以下代码，我只需将列表中第一项的项目编号附加到每个项目，而不是每个项目的不同项目编号。

var productsListLink = document.querySelectorAll(".products-grid .item .product-name a:not(.product-image)");
for (var i = 0; i < productsListLink.length; i++) {
    var a = productsListLink[i];
    var name = a.innerHTML || "";
    var addon = document.querySelector(".products-grid .item .product-name a:not(.product-image)").getAttribute('href');
    var newaddon = addon.replace("http://tomleemusic.ca/","");
    name += newaddon;
    a.innerHTML = name;
    a.setAttribute('title', name);
}

Answer 1

querySelector将始终返回第一个匹配元素。因此，当你这样做

var addon = document.querySelector(".products-grid .item .product-name a:not(.product-image)").getAttribute('href');

你正在选择第一个a（你在第一次迭代中得到的那个）。

但是，通过使用数组方法和正则表达式匹配id，您可以使代码更加清晰：

Array.prototype.forEach.call(
  document.querySelectorAll(".products-grid .item .product-name a:not(.product-image)"),
  (productNameElement) => {
    const idMatch = productNameElement.href.match(/\d+$/);
    if (idMatch) productNameElement.appendChild(document.createTextNode(idMatch[0]));
  });

另请注意，只有部分元素具有ID号。例如，搜索结果之一：

<a href="http://tomleemusic.ca/benchworld-sonata-1c-single-adjustable-artist-piano-bench-in-polished-walnut" title="BENCHWORLD SONATA 1c Single Adjustable Artist Piano Bench In Polished Walnut">BENCHWORLD SONATA 1c Single Adjustable Artist <span class="searchindex-highlight">Piano</span> Bench In Polished Walnut</a>

没有，所以最好先检查一下是否匹配。

Answer 2

在这一行中，您只抓取第一个匹配元素：

var addon = document.querySelector(".products-grid .item .product-name a:not(.product-image)").getAttribute('href')

在a的每个循环迭代中，您已经拥有了实际使用的元素;只需使用它：

var addon = a.getAttribute('href')

例：

var productsListLink = document.querySelectorAll(".products-grid .item .product-name a:not(.product-image)");
for (var i = 0; i < productsListLink.length; i++) {
    var a = productsListLink[i];
    var name = a.innerHTML || "";
    var addon = a.getAttribute('href');
    var newaddon = addon.replace("http://tomleemusic.ca/","");
    name += newaddon;
    a.innerHTML = name;
    a.setAttribute('title', name);
}

<div class="products-grid">
  <div class="item">
    <span class="product-name">
      <a href="http://tomleemusic.ca/1"></a>
    </span>
  </div>
  <div class="item">
    <span class="product-name">
      <a href="http://tomleemusic.ca/2"></a>
    </span>
  </div>
  <div class="item">
    <span class="product-name">
      <a href="http://tomleemusic.ca/3"></a>
    </span>
  </div>
</div>