如何在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());
});

这是我的解决方案，但是显然，当您在模式中使用更多*时，它将失败，希望有一种方法可以使其完美。

Answer 1

我为您提供解决方案。它使用Regex Selector for jQuery的James Padolsey

AUTHDATA

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;
}