Splitting the random string into two steps And do the math on the final result (js -jquery)

I want to split random strings generated by my code,

But here I just use static string for example|

i can do it manual ,but its boring to this in the long time and large scale code

i want function , to do this easily

here is my codes :

function stringSplitter(myString, chunkSize) {
  var splitString = [];
  for (var i = 0; i < myString.length; i = i + chunkSize) {
    splitString.push(myString.slice(i, i + chunkSize));
  }
  return splitString;
}
var randnumber = 'va2b1881ff21GSD1SSSS18aav1v112H1tkdpkmmnnwqkkq118188493';

var get4 = stringSplitter(randnumber, 4);

var str1 = $("#get").html(get4);
var str2 = $("#get2").html(get4[0]);
var str3 = $("#get3").html(get4[1]);
var str4 = $("#get4").html(get4[2]);

//.................
var get2of4_1 = stringSplitter(get4[0], 1);
var str5 = $("#td1").html(get2of4_1[0]);
var str6 = $("#td2").html(get2of4_1[1]);
var str7 = $("#td3").html(get2of4_1[2]);
var str8 = $("#td4").html(get2of4_1[3]);

var get2of4_2 = stringSplitter(get4[1], 1);
var str9 = $("#td5").html(get2of4_2[0]);
var str10 = $("#td6").html(get2of4_2[1]);
var str11 = $("#td7").html(get2of4_2[2]);
var str12 = $("#td8").html(get2of4_2[3]);

var get2of4_3 = stringSplitter(get4[2], 1);
var str13 = $("#td9").html(get2of4_3[0]);
var str14 = $("#td10").html(get2of4_3[1]);
var str15 = $("#td11").html(get2of4_3[2]);
var str16 = $("#td12").html(get2of4_3[3]);

//for example :

var sum = str5 + str6 + str7 / 100
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../!Needs/jquery.min.js"></script>
</head>

<body>

  <hr>
  <span id="get">
    ...........
    </span>
  <hr>
  <br>
  <span id="get2"></span>
  <br>
  <span id="get3"></span>
  <br>
  <span id="get4"></span>
  <br>
  <span id="get5"></span>
  <br><br>
  <table border="1">
    <tr>
      <td id="td1"></td>
      <td id="td2"></td>
      <td id="td3"></td>
      <td id="td4"></td>
    </tr>
    <tr>
      <td id="td5"></td>
      <td id="td6"></td>
      <td id="td7"></td>
      <td id="td8"></td>
    </tr>
    <tr>
      <td id="td9"></td>
      <td id="td10"></td>
      <td id="td11"></td>
      <td id="td12"></td>
    </tr>
  </table>
</body>

</html>

i split my string twice .
first i got 4 characters , then i splite 4 characters to 1

for Example : abcdefghijklmnopq 4 => (abcd) 1 => (a)(b)(c)(d)

then i want to do some math actions ,

but my problem is . is there and function or simple way to do this, faster and easily ?

i dont want to write several times

and i dont know how to use loop or functions , to make this :

1 => Split random strings into 4 characters ,
2 => Split again that 4 characters into 1 characters
3 => doing some action at final step

i need a function or loop to use,
thank you 🙂

>Solution :

Consider the following.

$(function() {
  function stringSplitter(myString, chunkSize) {
    var splitString = [];
    for (var i = 0; i < myString.length; i += chunkSize) {
      splitString.push(myString.slice(i, i + chunkSize));
    }
    return splitString;
  }
  var randnumber = 'va2b1881ff21GSD1SSSS18aav1v112H1tkdpkmmnnwqkkq118188493';

  var get4 = stringSplitter(randnumber, 4);
  $("#get").html(get4);

  $("#output-1").html(get4.join("<br />"));
  
  var j = 0;
  $.each(get4, function(i, el) {
    var row = $("<tr>").appendTo("#output-2");
    var cells = stringSplitter(el, 1);
    $.each(cells, function(c, val) {
      $("<td>", {
        id: "str-" + (++j)
      }).html(val).appendTo(row);
    });
  });
  
  var sum = parseInt($("#str-5").text()) + parseInt($("#str-6").text()) + parseInt($("#str-7").text()) / 100;
  console.log(sum);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../!Needs/jquery.min.js"></script>
</head>

<body>

  <hr>
  <span id="get">
    ...........
    </span>
  <hr>
  <div id="output-1"></div>
  <table id="output-2" border="1">
  </table>
</body>

</html>

This uses nested ForEach loops to iterate each of the arrays.

Leave a Reply