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

Question

I am currently having problem with selecting and matching the innerHTML using querySelectorAll.

Here is what i did:

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

What the html is:

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

But i want to match the class js-display-url starting with product but can't do that. please help.

Answer 1

With DOM selectors you cannot select elements based on the inner HTML, but you can loop through all the elements with that class and single out the ones that match your condition:

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]);
    }
}

Answer 2

There isn't a DOM selector which will filter based on text nodes, but you can filter using some array methods, since a NodeList is array-like.

In particular, Array.prototype.filter can get the elements that meet your criteria.

 var filter = Array.prototype.filter; var allElements = document.querySelectorAll('.js-display-url'); var productElements = filter.call(allElements, function(element) { return element.innerText.startsWith('product'); }); console.log(productElements); 

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