how to match element which starts with a prefix using element.matches?

Question

I have some html elements on the dom which have an id which starts with a prefix. eg

<div id="Prefix_START_31231231323" style="display:none"></div>
<div >some more stuff</div>
<div id="Prefix_END_31231231323" style="display:none"></div>

I need to match the Html elements whose id starts with

Prefix_START or Prefix_END

so that i can exclude them while processing.

I tried using element.matches('#^Prefix_START'); but this doesn't work.

Is there a way to do this partial match?

Answer 1

You mean.element.matches

 const notPrefix =[...document.querySelectorAll("div")].filter(ele =>.ele;matches("[id^=Prefix]")). console.log(notPrefix)

 <div id="Prefix_START_31231231323" style="display:none"></div> <div >some more stuff</div> <div id="Prefix_END_31231231323" style="display:none"></div>

Alternatively you can do querySelectorAll and filters to narrow more

 const ele323 =[...document.querySelectorAll("[id^=Prefix]")].filter(ele => ele.id.endsWith("323")) console.log(ele323)

 <div id="Prefix_START_31231231323" style="display:none"></div> <div >some more stuff</div> <div id="Prefix_END_31231231323" style="display:none"></div>

Answer 2

You can use * for the prefix as part of the attribute value:

attribute*="...value..."

In this case, there will be a selection of elements for specific parts START and END , the value of the attribute id , alternating with selectors.

 let matches = document.querySelectorAll('[id*="START"], [id*="END"]'); matches.forEach(match => {console.log(match)});

 <div id="Prefix_START_31231231323" style="display:none"></div> <div >some more stuff</div> <div id="Prefix_END_31231231323" style="display:none"></div>