How to do the real wildcard selector in jquery

Question

html

<input type="text" name="[content][0][name]" value="a">
<input type="text" name="[content][1][name]" value="b">
<input type="text" name="[content][1][nickname]" value="c">

js

var pattern = '[content][*][name]';
var wildcardPosition = pattern.indexOf('*');
var start = pattern.substr(0, wildcardPosition);
var end = pattern.substr(wildcardPosition + 1);

$('[name^="' + start + '"][name$="' + end + '"]').each(function(index, item) {
    console.log($(item).val());
});

This is my solution, but obviously, when you have more * in the pattern it will fail, hope there is a way to to make it perfect.

Answer 1

I have a solution for you. It uses the Regex Selector for jQuery by James Padolsey

console.clear();

// Regex Selector for jQuery
// copyright 2009 James Padolsey
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));
}

// This function takes an attribute and pattern and matches attributes according to the pattern
jQuery.fn.extend({
  patternMatch: function(attribute, pattern) {
    var regex = pattern
      .replace(/^/, '^')
      .replace(/$/, '$')
      .replace(/\[/g, '\\[')
      .replace(/\]/g, '\\]')
      .replace(/\*/g, '[^\\]]*?')
    
    
    return this.filter(':regex(' + attribute + ',' + regex + ')');
  }
})

// helper function to use pattern on named form elements
function checkPattern(pattern) {
  var elementsSelector = 'input, select, textarea';
  var $elements = $(elementsSelector).filter('[name]');
  $elements.removeClass('selected');
  
  $elements.patternMatch('name', pattern).addClass('selected');
}

checkPattern(jQuery('#check').val())

// helper function to trigger checkPattern with button text
function buttonClick(o) {
  jQuery('#check').val(o.textContent);
  checkPattern(jQuery('#check').val())
}

.selected {
  background: lightgreen;
}

input, button {
  width: 200px;
  font-family: monospace;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table><tr><td valign="top">
<input type="text" class="show-name" id="in1" name="[content][0][name]" value="[content][0][name]"><br>
<input type="text" class="show-name" id="in2" name="[content][1][name]" value="[content][1][name]"><br>
<input type="text" class="show-name" id="in3" name="[content][1][nickname]" value="[content][0][nickname]"><br>
<input type="text" class="show-name" id="in4" name="[content][0][extra]" value="[content][0][extra]"><br>
<input type="text" class="show-name" id="in3" name="[content][0]" value="[content][0]"><br>
</td>
<td>

<input type="text" id="check" value="[content][*][name]" oninput="checkPattern(this.value)" />
<br>
<button onclick="buttonClick(this);">[content][*][*]</button><br>
<button onclick="buttonClick(this);">[content][1][*]</button><br>
<button onclick="buttonClick(this);">[content][*][*x*]</button><br>
<button onclick="buttonClick(this);">[content][*][name]</button><br>
<button onclick="buttonClick(this);">[content][*][*name]</button><br>
<button onclick="buttonClick(this);">[*][*][*]</button><br>
<button onclick="buttonClick(this);">[*][*]</button><br>
</td>
</tr>
</table>