Javascript For循环在字符串替换时未按预期工作

我正在尝试制作一个javascript webextension，在购物网站上每个产品的超链接文本的内部文本末尾添加两个数字，例如“123”

例如，如果我转到这个链接

我想在产品名称的末尾添加产品的标识号

但是，在下面的代码中，我只是将列表中第一个项目的项目编号附加到每个项目，而不是为每个项目添加不同的项目编号

var productsListLink=document.queryselectoral（“.products grid.item.product name a:not（.product image）”）；
对于（var i=0；i}

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

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

在

a

中的每个循环迭代中，您已经拥有了实际使用的元素；用它来代替：

var addon = a.getAttribute('href')

例如：

var productsListLink=document.queryselectoral（“.products grid.item.product name a:not（.product image）”）；
对于（var i=0；i

---

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

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

在

a

中的每个循环迭代中，您已经拥有了实际使用的元素；用它来代替：

var addon = a.getAttribute('href')

例如：

var productsListLink=document.queryselectoral（“.products grid.item.product name a:not（.product image）”）；
对于（var i=0；i

---

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>

---

没有，因此最好先检查是否有匹配项。

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>

---

没有，因此最好先检查是否有匹配项。

注意，

NodeList\forEach

在使用稍旧的浏览器上可能仍然需要polyfilling。问题给我的印象是，

replace

部件没有按预期工作…？如果OP正在查找标识号，页面上的一些产品没有标识号，因此当这些产品弹出时，输出可能与预期不符，因此需要正则表达式。不完全确定发生这种情况时需要什么是的，不清楚，但你的防御方法是有道理的。谢谢你的详细回答！我几个月前才开始使用java，所以我还在清理我的代码：）这非常有用。请注意，

NodeList\forEach

可能仍然需要在使用稍旧的浏览器上使用polyfilling。问题给我的印象是，

replace

部件没有按预期工作…？如果OP正在查找标识号，页面上的一些产品没有标识号，因此当这些产品弹出时，输出可能与预期不符，因此需要正则表达式。不完全确定发生这种情况时需要什么是的，不清楚，但你的防御方法是有道理的。谢谢你的详细回答！我几个月前才开始使用java，所以我还在努力清理我的代码：）这真是太好了，谢谢！这很有帮助，谢谢！这很有帮助