我如何将此 jquery 转换为 javascript

Question

how can i convert this jquery code to vanilla Javascript

 $("h2:contains('" + search + "')").closest(".element").show();
 $("h2:not(:contains('" + search + "'))").closest(".element").hide();

i got the second half of the line to be closest(".element").style.display = "block" but i cant find a way for the first half to work in normal Javascript. I am creating a live search function to match the text in the search input to match the h2 . if they match it will display the content if not the content will display as none.

Answer 1

In Jquery contains gives you a string of text to look for.

So here you need to get all the h2 tag and search in their text.

As h2 elements don't have a value, you should use innerHTML and then instead of contains, you should use includes method.

var allHTwos= document.getElementsByTagName('h2');
for (i=0; i<allHTwos.length; i++) {
    var gh = allHTwos[i];
    var ts = gh.innerHTML;
    if(ts.includes(search)){
// Do your hide/unhide here
}
}