Question

我尝试过：

var els = document.querySelectorAll('a[href*="dabbing-through-the-snow"]')

页面上有36个元素，其中包含这样的链接：

https://www.teepublic.com/t-shirt/3298777-funny-maltese-dabbing-through-the-snow-dab-christm?store_id=138163。

但是，我认为我的代码选择了页面上的所有链接。

如何仅选择包含文本的链接，例如dabbing-through-the-snow？

Answer 1

您可以使用document.querySelectorAll([attribute*=value])选择具有包含值字符串的属性的所有元素，因此您的代码应该正确。

var els = document.querySelectorAll('a[href*="dabbing-through-the-snow"]');
var anchors = document.querySelectorAll('a');
console.log("Anchors:", anchors.length, "Matched Anchors:", els.length);

<a href="">1</a>
<a href="https://www.teepublic.com/t-shirt/3298777-funny-maltese-dabbing-through-the-snow-dab-christm?store_id=138163">2</a>

如果条件比较复杂，您可能还想使用for循环遍历所有锚元素。

var anchors = document.querySelectorAll("a");
var href = "dabbing-through-the-snow";
var found = [];

for (var i = 0; i < anchors.length; i++) {
  if (anchors[i].href.includes(href)) {
    found.push(anchors[i]);
  }
}
console.log("Anchors:", anchors.length, "Matched Anchors:", found.length);

<a href="">1</a>
<a href="https://www.teepublic.com/t-shirt/3298777-funny-maltese-dabbing-through-the-snow-dab-christm?store_id=138163">2</a>

Answer 2

您可以尝试以下代码来获取带有字符串的href：

const $aHref = $("a").filter((index, value) => $(value).attr('href').match(/\/dabbing-through-the-snow\//));
const urlString = $.map($aHref, data => $(data).attr('href'));
console.log(urlString);

如何根据URL中的某些文本选择锚元素？

2 个答案: