使用 document.querySelector 查找包含查询字符串的所有链接 [重复]答案

【问题标题】：using document.querySelector to find all links containing a query string [duplicate]使用 document.querySelector 查找包含查询字符串的所有链接 [重复]
【发布时间】：2020-04-26 23:12:45
【问题描述】：

我有一个跨网站的 20 多个链接的列表。例如：

/one2one/r/Data/Quote/
/one2one/r/Data/Quote/business/
/one2one/r/Data/Quote/commercial/

它们通常都包含相同的查询字符串。

目的是通过 Adobe DTM 设置属性，例如在新标签页中打开。这是我目前为其中一个链接所做的工作。但是，我们在整个网站上有 20 多个链接。有没有办法我可以修改它，以便它获取包含这个查询字符串的所有链接，或者我可以将它们添加为数组并手动维护？我已经测试了两者，但我不确定我是否正确地做这件事，因为两者都不起作用。

任何帮助将不胜感激。提前致谢。

var els = document.querySelectorALL("a[href='/one2one/r/Data/Quote/']");
for (var i=0; i < els.length; i++) {
  els[i].setAttribute("target", "_blank");
}

【问题讨论】：

首先是querySelectorAll() - 注意小写。其次，使用通配符属性选择器。查看副本。
除了其他回复所说的之外，我会注意到 *= 运算符将匹配完整的 href 值，因此您可能会在查询参数包含的链接上出现误报价值，以及。如果你想更严格，你可以在你的循环中进一步过滤掉它们，例如if (~els[i].pathname.indexOf('/one2one/r/Data/Quote/')){ /** matches path component, do something */ }

标签： javascript jquery

【解决方案1】：

querySelectorAll 中的 All 不应全部大写。您只需在选择器中的href 前面添加一个星号（*）来使用通配符，如下所示：

var els = document.querySelectorAll("a[href*='/one2one/r/Data/Quote/']");
for (var i=0; i < els.length; i++) {
    els[i].setAttribute("target", "_blank");
}

检查并运行以下代码片段以获取上述方法的实际示例：

var els = document.querySelectorAll("a[href*='/one2one/r/Data/Quote/']");
for (var i=0; i < els.length; i++) {
    els[i].setAttribute("target", "_blank");
    els[i].style.color = "red";
}

<a href="/one2one/r/Data/Quote/AAAA">AAA</a>
<a href="/one2one/r/Data/Quote/BBBB">BBB</a>
<a href="/one2one/r/Data/Quote/CCCC">CCC</a>
<a href="/one2one/r/Data/Quote/DDDD">DDD</a>

您可以查看另一个 StackOverflow 线程，该线程被标记为重复，以便更好地了解星号（通用选择器）的确切作用。

【讨论】：