Textbox data from Javascript

Need a small help.

The below script picks the value from the textbox and add it to the URL.

Example:

Text Box value:
one
two
three
Four
Five
Six
Seven

Output URL:
https://www.google.com/search?q=one+two+three+four+five+six+seven

The help I need:

Instead of adding all the text box values to the URL, i need the text box values to be split into multiples of 5 and split the URL accordingly

The output should be:
https://www.google.com/search?q=one+two+three+four+five
https://www.google.com/search?q=six+seven

$(function () {
  $("#text1").click(function () {
    if ($('#textbox1').val() != '') {
      var search_container1 = $("#textbox1").val().split(" ");
      for (k = 0; k < search_container1.length; k++) {
        search_container1[k] = search_container1[k].replace(/\s/gi, "+");
      }
      var srcbox1 = "val1234";

      if (srcbox1 == "val1234") {
        var search_val1234 = "";
        for (var i = 0; i < search_container1.length; i++) {
          search_val1234 = search_container1[i];
          {
            window.open("https://www.google.com/search?client=firefox-b-d&q=" + search_val1234 + "");
          }
        }

      }
    }
    else if ($('#textbox1').val() == '') {
      alert("Enter Keyword");
    }
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>textbox</title>
</head> 

<body>  
    <div class="container">

        <div class="col-sm">
                      <div class="card">
                      <div class="card-body"><center><a>Deal IDs</a></center>
                        <br>
                              <textarea id="textbox1" cols="5" rows="7"></textarea><br>
                        <center><br><button id="text1" class="btn btn-warning btn-block ">Submit</button></center>
                        </div>
                    </div>
                   </div>
    </div>


</body>

</html>

Solution

Here is the jsFiddle link which you can refer for your solution.

$("#queryBtn").on('click', function(){
	let val = $("#inputTextArea").val();
  if(val){
  	const chunk = 5;
  	let valuesArray = val.toLowerCase().split(/[\s*\n*]/ig).filter((x) => x != "");
    console.log(valuesArray);
    let i,j,tArr;
    for (i=0,j=valuesArray.length; i<j; i+=chunk) {
        tArr = valuesArray.slice(i,i+chunk);
        window.open("https://www.google.com/search?q=" + tArr.join("+"));
    }
  }
});

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<div class="container">
  <h5>
  Enter values in textarea
  </h5>
  <textarea id="inputTextArea" class="form-control" aria-label="With textarea"></textarea>
  <br>
  <button type="button" id="queryBtn" class="btn btn-primary">Send</button>
</div>

Try the fiddle link in order for the window.open to work ===> JS-Fiddle Link

to explain the code line by line -

First took the value from text area using jquery id selector.
Set the chunk to be equal to 5 (Since you have 5 as the chunk size).
From text area we got string, so converted the string to lowercase and then using regular expression, we tried to split by space and new line characters. Then pipe lining it to the filter function which removes the unnecessary empty string jargon inside the array.
Loop which is chunk wise, so splicing the array chunk wise and then joining it with '+' character which is then passed to window.open.

Play around with the code and welcome to stack overflow :)

Make sure to up-vote if it solved your problem.