.split(",") every 4th item only?

Question

I started with a string:

hidden = "a,b,c,d,e,f,g,h";

I then split(",") the string into something I can try to work with:

array = hidden.split(",");

If I console.log out, the result is:

["a", "b", "c", "d", "e", "f", "g", "h"]

What I would eventually like to end up with (using JS only) is:

["a,b,c,d","e,f,g,h"];

or

[["a,b,c,d"],["e,f,g,h"]];

Thanks!

EDIT to show that I am actually trying to figure this out (don't mind the formatting):

if (currentPage === "view-bills.php")
{
var str = "";
hidden = document.getElementById("billItems");
array = hidden.value.split(",");
for (var i=0;i<array.length;i++)
{
str += "<option>"+ array[i] +"</option>";
}
var itemsAmt = document.getElementById("items").value;
document.getElementById("displayItems").innerHTML = "<optgroup label='"+ itemsAmt +" items'>" + str + "</optgroup>";
}

UPDATE:

The problem has been solved, however, I would like to show you the outcome of my project (accessing classes instead of id's this time):

http://i.imgur.com/umjhGPP.png

Once again, don't mind my formatting, I have trouble pasting things in here:

if (currentPage === "view-bills.php")
{
// Add items to select box
hidden = document.getElementsByClassName("billItems");
for (var n=0;n<hidden.length;n++)
{
array = hidden[n].value.split(",");
groups = [];
for(var i=0;i<array.length;i+=5)
{
groups.push(array.slice(i,i+5).join(','))
}
var str = "";
for (var j=0;j<groups.length;j++)
{
str += "<option>"+ groups[j] +"</option>";
}
var itemsAmt = document.getElementsByClassName("items")[n].value;
document.getElementsByClassName("displayItems")[n].innerHTML = "<optgroup label='"+ itemsAmt +" items'>" + str + "</optgroup>";
}
}

Answer 1

You can use a regular expression:

var hidden = "aaa,bbb,ccc,ddd,eee,fff,ggg,hhh,iii";
console.log(hidden.match(/(([^,]+,){0,3}[^,]+)/g));

Output

["aaa,bbb,ccc,ddd", "eee,fff,ggg,hhh", "iii"]  

See jsFiddle

Answer 2

An alternate way with a simple loop;

hidden = "a,b,c,d,e,f,g";
arr = hidden.split(",");
groups = []

for(var i = 0; i < arr.length; i+=4)
  groups.push(arr.slice(i,i+4).join(','))

console.log(groups)

> [ 'a,b,c,d', 'e,f,g' ]

Answer 3

This code takes the split version of the data and then groups it into groups of 4.

If there aren't exactly four items in the last group, it adds it after the for loop.

You could reduce repetition by extracting the join logic into a simple function so you aren't repeating the code (you would have to change both lines if you wanted to join with a different character, for example). I have kept the example rather procedural so you can get the general idea.

var hidden = "a,b,c,d,e,f,g,h";

var allItems = hidden.split(',');

var groups = [];
var currentGroup = [];

for (var i = 0; i < allItems.length; i++) {
    currentGroup.push(allItems[i]);

    if (currentGroup.length === 4) {
        groups.push(currentGroup.join(','));
        currentGroup = [];
    }
}

if (currentGroup.length > 0) {
    groups.push(currentGroup.join(','));
}

console.log(groups);

Result:

[ "a,b,c,d", "e,f,g,h" ]

Answer 4

You can get it in a reduce e.g. via lodash:

return _.reduce(hidden.split(','), function(result, value, key) {
    if(key % 4 === 0) result.push("");
    result[result.length - 1] += value;
    return result;
}, []);

I think this is about the simplest solution you'll find, given the necessity of the chunk-every-fourth step.

Answer 5

So far I've just found the obvious loop:

var array = hidden.split(",");
var result = [];
for(var i = 0; i + 3 < array.length; i += 3) {
    result.push("" + array[i] + array[i+1] + array[i+2] + array[i+3]) + ",";
}
if(i < array.length) {
    var last = "";
    for(; i < array.length; i++) {
        last += array[i];
    }
    array.push(last);
}