JQuery selects a specific string and a number from 0 to 9 after it?

Question

I have these HTML elements

            <button id="btn7">7</button>
            <button id="btn8">8</button>
            <button id="btn9">9</button><button id="btnMulti">*</button>
            <button id="btn4">4</button>
            <button id="btn5">5</button>
            <button id="btn6">6</button><button id="btnDiv">/</button>
            <button id="btn1">1</button>
            <button id="btn2">2</button>
            <button id="btn3">3</button><button id="btnPlus">+</button>
            <button id="btn0">0</button>
            <button id="clear">C</button>
            <button id="clearEntry">CE</button><button id="btnMinus">-</button>
            <button id="equal">=</button>

how can I select all button elements with an attribute identifier that contains "btn" and some number after it? In other words, buttons: "btn [0-9]" . It should be something like this:

$(':button[id^="btn"]').match(/[0-9]/);

Answer 1

You can use .filter()to filter identifiers that have a number in their identification attributes. To do this, you can use the callback in the filter function using a regular expression:

$('button').filter(function() {
  var rg = /\d/g;
  if (rg.test(this.id)) {
    return this;
  }
}).css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn7">7</button>
<button id="btn8">8</button>
<button id="btn9">9</button>
<button id="btnMulti">*</button>
<button id="btn4">4</button>
<button id="btn5">5</button>
<button id="btn6">6</button>
<button id="btnDiv">/</button>
<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
<button id="btnPlus">+</button>
<button id="btn0">0</button>
<button id="clear">C</button>
<button id="clearEntry">CE</button>
<button id="btnMinus">-</button>
<button id="equal">=</button>

Run codeHide result

You can use var to hold a specific selector:

var btn = $('button').filter(function() {
  var rg = /\d/g;
  if (rg.test(this.id)) {
    return this;
  }
});


btn.css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn7">7</button>
<button id="btn8">8</button>
<button id="btn9">9</button>
<button id="btnMulti">*</button>
<button id="btn4">4</button>
<button id="btn5">5</button>
<button id="btn6">6</button>
<button id="btnDiv">/</button>
<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
<button id="btnPlus">+</button>
<button id="btn0">0</button>
<button id="clear">C</button>
<button id="clearEntry">CE</button>
<button id="btnMinus">-</button>
<button id="equal">=</button>

Run codeHide result

Answer 2

, , ,

http://james.padolsey.com/javascript/regex-selector-for-jquery/

jQuery

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^s+|s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

:

// Select all elements with an ID starting a vowel:
$(':regex(id,^[aeiou])');

// Select all DIVs with classes that contain numbers:
$('div:regex(class,[0-9])');

// Select all SCRIPT tags with a SRC containing jQuery:
$('script:regex(src,jQuery)');

// Yes, I know the last example could be achieved with 
// CSS3 attribute selectors; it just an example...

2:

: $('button:regex(id,btn[0-9])')

CodePen