Need a possibility to get the exact match of a search string in a on.click handler. This is what I have now,
$("#wrapper").on("click", "label:contains('SEARCH') ~ .material > .icon", function (e) {
Problem is, that "contains" matches all words with Label containing "SEARCH".
E.g. "Search", "Searchsting", "Searchsentence" and so on....
Any ideas?? Have spent a lot of time, to find a solution. E.g. mixing :contains(''):not(:contains). But with no success.
<div class="wrapper">
<div class="field dco-uncommon has-required required dco-enabled" id="bss_options_5283" depend-id="20652" style="display: block;">
<label class="label" for="select_5283"><span>SEARCH</span></label>
<div class="control ">
<select name="options[5283]" id="select_5283" class="product-custom-option admin__control-select required" data-selector="options[5283]" aria-required="true">
<option value="">-- Please choose --</option>
<option value="75108" price="0" depend-id="20659">Option 1</option>
<option value="75111" price="35" depend-id="20662">Option 2</option>
</select>
</div>
<div class="material">
<span class="icon" style="background-image: url(amethyst_1646165.jpg)" data-title="Amethyst 1646165" title="Amethyst 1646165"></span>
<span class="icon" style="background-image: url(apfel_1644435.jpg)" data-title="Apfel 1644435" title="Apfel 1644435"></span>
<span class="icon" style="background-image: url(auster_1644480.jpg)" data-title="Auster 1644480" title="Auster 1644480"></span>
<span class="icon" style="background-image: url(azure_1641085.jpg)" data-title="Azure 1641085" title="Azure 1641085"></span>
<span class="icon" style="background-image: url(baltic_1645155.jpg)" data-title="Baltic 1645155" data-properties="" title="Baltic 1645155"></span>
</div>
</div>
</div>
The logic you're looking for is not supported by jQuery, so I was able to get this library that extends jQuery and gives you exactly what you're looking for:
https://blog.mastykarz.nl/jquery-regex-filter/
This library allows you to use regex to filter values in your elements:
Then here we are using normal javascript regex to match the exact word: ^SEARCH$
// extend jquery
jQuery.extend(
jQuery.expr[':'], {
regex: function(a, i, m, r) {
var r = new RegExp(m[3], 'i');
return r.test(jQuery(a).text());
}
}
);
// extend jquery
$(function() {
$("#wrapper").on("click", `label:regex('^SEARCH$')`, function (e) {
console.log('This label contains the exact string "SEARCH"')
})
});#wrapper {
height: auto;
width: 200px;
background-color: #DDDDDD;
padding: 2px;
}
label {
display: block;
background-color: white;
padding: 3px;
margin: 2px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<label for="">SEARCH</label>
<label for="">SEARCHstring</label>
<label for="">stringSEARCHother</label>
<label for="">stringsearchother</label>
<label for="">SEARCH</label>
</div>