Divide an constant array value in textarea with a selected number to be an indvidual numbered new array

Question

I need a javascript function that can be use to divide(with the specified defined number ) an array inside textarea after click button

<textarea id="source> 
    const uint8_t ArrayName [] PROGMEM = {  // 10 lines
      0xAA, 0xAA, 0xAA, 0xAA, 0xAA,
      0xBB, 0xBB, 0xBB, 0xBB, 0xBB,
      0xCC, 0xCC, 0xCC, 0xCC, 0xCC,
      0xDD, 0xDD, 0xDD, 0xDD, 0xDD,
      0xEE, 0xEE, 0xEE, 0xEE, 0xEE,
      0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
      0x00, 0x00, 0x00, 0x00, 0x00,
      0x01, 0x01, 0x01, 0x01, 0x01,
      0x22, 0x22, 0x22, 0x22, 0x22,
      0x33, 0x33, 0x33, 0x33, 0x33,
    };
</textarea>

into this on the result textarea (this sample divide by 3)

<textarea id="result> 
    const uint8_t ArrayName_0 [] PROGMEM = {
      0xAA, 0xAA, 0xAA, 0xAA, 0xAA,
      0xBB, 0xBB, 0xBB, 0xBB, 0xBB,
      0xCC, 0xCC, 0xCC, 0xCC, 0xCC
    };
    const uint8_t ArrayName_1 [] PROGMEM = {
      0xDD, 0xDD, 0xDD, 0xDD, 0xDD,
      0xEE, 0xEE, 0xEE, 0xEE, 0xEE,
      0xFF, 0xFF, 0xFF, 0xFF, 0xFF
    };
    const uint8_t ArrayName_2 [] PROGMEM = {
      0x00, 0x00, 0x00, 0x00, 0x00,
      0x01, 0x01, 0x01, 0x01, 0x01,
      0x22, 0x22, 0x22, 0x22, 0x22
    };
    const uint8_t ArrayName_3 [] PROGMEM = {  // rest of line
      0x33, 0x33, 0x33, 0x33, 0x33
    };
</textarea>

I use this function that get from here to, but the result is wrong I'm confused about adding a copy of the first line, to the beginning of each resulting array

function divide() {
  var lines = $('#source').val().split(/\n/);
  var texts = []
  for (var i = 0; i < lines.length; i++) {
    if (/\S/.test(lines[i])) {
      texts.push($.trim(lines[i]));
    }
  }
  var list = texts;
  var li = "";
  
  for (var e = 0; e < list.length; e++) {
  if (e % 3)
{
    var lit = li + list[e] ;
    li = lit.substring(0,lit.length-1);
    li = li + '\n}\n';
} else
{
    li = li + list[e] + '\n';
}
  }
    li = lit.substring(0,lit.length-1);
    li = li + '\n}';

  document.getElementById("result").value = li;
}

Thanks for anybody help in this source.

Answer 1

Using reduce, you can group the lines into sets of n and then use a little string manipulation and array editing to reassemble into the format you specified

function divide(n) {
  var lines = $('#source').val().trim().split(/\n/).slice(0, -1);
  let ii = 0, prefix = lines.splice(0, 1)[0], result = [];
  let groups = lines.reduce((b, a, i) => {
    if (i % n === 0) {
      b.push([a]);
      ii++
    } else b[ii].push(a);
    return b;
  }, [[]]).filter(a => a.length > 0);

  groups.forEach((g,i) => {
    g.unshift(prefix.replace('ArrayName', `ArrayName_${i}`))
    g[g.length-1] = g[g.length-1].slice(0,-1)
    g.push("}");
    result.push(g.join("\n"));
  })
  
  document.getElementById("result").value = result.join("\n\n");
}

divide(3)

textarea {
  height: 300px;
  width: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="source"> 
    const uint8_t ArrayName [] PROGMEM = { 
      0xAA, 0xAA, 0xAA, 0xAA, 0xAA,
      0xBB, 0xBB, 0xBB, 0xBB, 0xBB,
      0xCC, 0xCC, 0xCC, 0xCC, 0xCC,
      0xDD, 0xDD, 0xDD, 0xDD, 0xDD,
      0xEE, 0xEE, 0xEE, 0xEE, 0xEE,
      0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
      0x00, 0x00, 0x00, 0x00, 0x00,
      0x01, 0x01, 0x01, 0x01, 0x01,
      0x22, 0x22, 0x22, 0x22, 0x22,
      0x33, 0x33, 0x33, 0x33, 0x33,
    };
</textarea>


<textarea id="result"> </textarea>