How to select all elements with jquery where the class starts with a name, has a wildcard in the middle and ends with a name?Check at multiple classes

Question

I have a couple of div containers with similar classes. The pattern for start and end is the same for field-*-preview. I need a wildcard for the middle.

This also works so far, but with multiple classes it is the case that if there is another class behind the class (field-*-preview), this element is not recorded.

var sel = $('[class*=field-][class$=-preview]').length
console.log(sel)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field-1-preview row-1 col-md-4"></div>
<div class="field-2-preview"></div>
<div class="field-3-preview"></div>
<div class="field-4-preview"></div>

Tom · Accepted Answer · 2021-11-12T16:11:54.010

With this selector [class$=-preview] you are searching for elements that have the attribute class ending with -preview. You should combine two selectors searching for elements having the class attribute that contains both field- and -preview.

var sel = $('[class*=field-][class*=-preview]').length
console.log(sel)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field-1-preview row-1 col-md-4"></div>
<div class="field-2-preview"></div>
<div class="field-3-preview"></div>
<div class="field-4-preview"></div>

Note that it could match elements you don't want to select such as :

<div class="field-foo bar-preview"></div>

if you add arbitrary characters to class `-preview`, such as `-previewtest`, then this class will also be protected. This is not true. — s.kuznetsov, Nov 12 '21 at 16:20

score 0 · Answer 2 · answered Nov 12 '21 at 15:59

How about:

const sel = $('[class]').filter(function() {
  const pattern = /^field\-.+\-preview$/;
  for (const value of this.classList) {
    if (pattern.test(value)) {
      return true;
    }
  }
  return false;
}).length;

console.log(sel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field-1-preview row-1 col-md-4"></div>
<div class="field-2-preview"></div>
<div class="field-3-preview"></div>
<div class="field-4-preview"></div>

How to select all elements with jquery where the class starts with a name, has a wildcard in the middle and ends with a name?Check at multiple classes

2 Answers2