如何 select 所有带有特定文本内容的锚标签 Javascript？

Question

我想使用 selector in document.querySelector() 到 select 所有带有文本 "print".

的标签

<a href="https://www.google.co.in">print</a>

我怎么会select一样。我不想使用 jQuery。我不必仅是 querySelector，但任何其他 select 都可以。

Answer 1

var findElements = function(tag, text) {
  var elements = document.getElementsByTagName(tag);
  var found = [];
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].innerHTML === text) {
      found.push(elements[i]);
    }
  }
  
  return found;
}

console.log(findElements('a', 'print'));

<a href="https://www.google.co.in">print</a>
<a href="https://www.google.co.in">skip</a>

Answer 2

对于 select 所有你应该使用的锚点 document.querySelectorAll()

然后简单地遍历节点列表并检查内部 html 是否为 'print'

然后将其推入数组。该数组包含所有带有文本 'print'

的锚链接

var anchors = document.querySelectorAll('a');
var selectedLinks = []

for (var i = 0; i < anchors.length; i++) {
  var link = anchors[i];

  if (link.innerHTML === 'print') {
    selectedLinks.push(link) 
  }
}

Answer 3

您可以使用下面的JavaScript函数，

function contains(selector, text) {
   var elements = document.querySelectorAll(selector);
   return Array.prototype.filter.call(elements, function(element){
     return RegExp(text).test(element.textContent);
   });
}

并使用

调用

var results = contains('a', 'print'); // find "a" that contain "print"
var results = contains('a', /^print/); // find "a" that start with "print"
var results = contains('a', /print$/i); // find "a" that end with "print", case-insensitive

如何 select 所有带有特定文本内容的锚标签 Javascript？

How to select all anchor tags with specific text content with Javascript?

html

javascript

css-selectors

selectors-api