querySelector() combine multiple attribute selectors

Question

I have a input field with class of this format:

some_starting_constant_string somevariablestring some_ending_constant_string

So I want a querySelector that uses a combination of starts with and ends with:

document.querySelectorAll("input[class^='some_starting_constant_string' AND class$='some_ending_constant_string']

Is this possible? Combining a starts with and ends with rule?

Answer 1

You just have to separate both attribute selectors :

input[class^='some_starting_constant_string'][class$='some_ending_constant_string']

 console.log( document.querySelectorAll("[class*='start'][class$='end']") ) 

 <div class="start__end"></div> <div class="start_heretoo_end"></div> <div class="sta__end"></div> <div class="rt__end"></div> <div class="start__d"></div>