javascript - 使用查询选择器获取以特定 innerHTML 开头的所有元素？

Question

我目前在使用 querySelectorAll 选择和匹配 innerHTML 时遇到问题。

这是我做的:

document.querySelectorAll('*[class^="js-display-url"]').contains('product')

html是什么:

<span class="js-display-url">product/poss/newslanges</span>

但我想匹配以产品开头的类 js-display-url 但不能这样做。请帮忙。

Answer 1

使用 DOM 选择器，您无法根据内部 HTML 选择元素，但您可以循环遍历具有该类的所有元素，并挑选出符合条件的元素:

var allElements = document.querySelectorAll('*[class^="js-display-url"]');
var myElements = [];

for (var i = 0; i < allElements.length; i++) { 
    if (allElements[i].innerHTML.startsWith('product')) {
        myElements.push(allElements[i]);
    }
}