JS regex: unable to return array matches

Question

I Have a form with multiple input text like:

<div class="width-height">
    <input value="" name="items[1][width]" type="text">
    <br>
    <input value="" name="items[1][height]" type="text">
</div>
 <div class="width-height">
    <input value="" name="items[2][width]" type="text">
    <br>
    <input value="" name="items[2][height]" type="text">
</div>

I try to get with a JS foreach "number" and "width" or "height" in an array

the best result possibility should be an array with 2 value in console.log:

1,width
1,height
2,width
2,height

I try 2 regex :

// first: /\d\]\[[a-z]+/i
// second: /\d\]\[\w+/g
$('.width-height > input').each(function () {
    console.log("1 : " + $(this).attr('name').match(/\d\]\[[a-z]+/i));
    console.log("2 : " +  $(this).attr('name').match(/\d\]\[\w+/g));
});

but the result is only:

1 : 1][width
2 : 1][width

I have tried to use uncapture setting for excluding part that I don't need :

console.log("3 : " +  $(this).attr('name').match(/(?:\w+\[)\d(?:\]\[)\w+/g));

but it return only 1 string

3 : items[1][width

I guess I don't understand something in regex.. with non-capture and "g" flag i think it should return all possibility without capture and build an array with retrieving value but .. not.. :-/

Tranks for your help!

Quentin · Accepted Answer · 2015-07-24 14:57:01Z

3

A non-capturing group doesn't exclude any data from the whole match, it just won't appear in the list of captured groups.

You need to use capturing groups to handle this (which also means you can't use match).

A capturing group is delimited with ( and ).

$('.width-height > input').each(function () {
    var regex = /(\d)\]\[(\w+)/;
    var matches = regex.exec($(this).attr('name'));
    console.log(matches[1] + "," + matches[2]);
});

answered Jul 24, 2015 at 14:57

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dakab · Accepted Answer · 2015-07-24 14:51:29Z

1

Try this straight-forward, native approach:

var inputs = document.querySelectorAll('div.width-height > input[name^="items"]');
var result = [];
var match = null;

Array.prototype.forEach.call(inputs,function(input){
    match = input.name.match(/^items\[(\d)\]\[(width|height)\]$/);
    if(match.length===3)
        result.push([match[1],match[2]]);
});

console.log( result );

Did you mean an array of arrays by “array with 2 value”? If the format of the name attribute value isn’t that static, it would be just a minor change in the regex. Or did you wish to have your regex explained?

answered Jul 24, 2015 at 14:51

dakab

5,97510 gold badges46 silver badges71 bronze badges

2 Comments

Jean-philippe Emond Over a year ago

I just want to handle both value, he can override, its just because I need to do a function if its "width" and another with "height" and I need the number to passed through the function. That I see.. its just the non "g" flag .. its works as well

dakab Over a year ago

@Jean-philippeEmond: I don’t entirely understand. You need the number and the word, right? The “global” flag is irrelevant because there is no repetition in a single attribute so the first match suffices.

Ammadu · Accepted Answer · 2015-07-24 15:03:09Z

0

Try this

$('.width-height > input').each(function () {
    var matches = $(this).attr('name').match(/[\d]?[\w]+/gi);     
    console.log(matches.splice(1));   
});

answered Jul 24, 2015 at 15:03

Ammadu

1,67515 silver badges17 bronze badges

Comments

1252748 · Accepted Answer · 2015-07-24 15:15:56Z

0

If you're interested in doing this without jQuery, this will return to you an array of your requested output.

var inputs = document.querySelectorAll("input[type=text]");
var result = Array.prototype.slice.call(inputs).map(function(el){
   return el.getAttribute("name").replace(/.*\[(\d+)\]\[(\w+)\].*$/, "$1,$2");                                      
});
console.log(result);

JSBIN

REGEX

edited Jul 24, 2015 at 15:15

answered Jul 24, 2015 at 15:05

1252748

15.5k35 gold badges118 silver badges244 bronze badges

Collectives™ on Stack Overflow

JS regex: unable to return array matches

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related