CODEWITHSUNDEEP
javascripthtmltextarea
santosh
santosh

Reputation: 892

How to combine two TextArea group of sentences using Javascript?

I am trying to combine two TextArea list like this:

"I love" (TextArea1) + "Eating Fruits" (TextArea2)

"I love" (TextArea1) + "Playing Games" (TextArea2)

Result: I love Eating Fruits

I love Playing Games

By the following code not working combining two separate group sentences based on the same line numbers. Please help!

Code:

function myFunction() {
  var x = document.getElementById("TextInput1").value;
  var y = document.getElementById("TextInput2").value;
  var res = x+" "+y;
     
  document.getElementById("ResultField").value = res;
}
 <textarea cols="30" id="TextInput1" name="message" rows="10" style="border: 3px solid #73AD21; width: 40%;"></textarea>  
  
  <textarea cols="30" id="TextInput2" name="message" rows="10" style="border: 3px solid #73AD21; width: 40%;"></textarea><br />
  
  
  
  <input id="WhiteSpaceRemove" onclick="myFunction()" style="border: 3px solid #73AD21;" type="button" value="Combine!" /><br>
  <br>
  <textarea autocomplete="off" cols="30" id="ResultField" name="message" rows="10" style="border: 3px solid #73AD21; width: 40%;"></textarea><br />

Upvotes: 0

Views: 529

Answers (1)

Patrick Evans
Patrick Evans

Reputation: 42736

The string concatenation is not going to work on single lines of text by default. It will join the entire text of the first one with the other one.

In order to concat line by line you need to split each of the textareas' text up by some delimiter (more than likely a newline character in this case).

let firstLineArray = firstText.split("\n");
let secondLineArrary = secondText.split("\n");

This will give you an array of lines of each textarea's text. You then need to map over the first array joining each line with the corresponding line from the other array.

let resultLineArray = firstLineArray.map((line,currentIndex)=>{
    return line +" "+ secondLineArray[currentIndex];
});

Finally just combine all the lines together into one string and assign it to where you would like it displayed

let result = resultLineArray.join("\n");
resultTextarea.value = result;

Example

var resultElement = document.getElementById("ResultField");
var text1Element = document.getElementById("TextInput1");
var text2Element = document.getElementById("TextInput2");

function myFunction() {
  var x = text1Element.value;
  var y = text2Element.value;
  //split the textareas by newlines
  var xArr = x.split("\n");
  var yArr = y.split("\n");
  //if the textareas don't have matching 
  //number of lines of text abort
  if(xArr.length != yArr.length){
    resultElement.value = "Both textareas should contain the same number of rows of text";
    return;
  }
  
  //map over the array, combine lines, and finally join all into one string
  var result = xArr.map((line, index) => {
    return line + " " + yArr[index];
  }, "").join("\n");
  
  resultElement.value = result;
}
<textarea cols="30" id="TextInput1" name="message" rows="10" style="border: 3px solid #73AD21; width: 40%;"></textarea>
<textarea cols="30" id="TextInput2" name="message" rows="10" style="border: 3px solid #73AD21; width: 40%;"></textarea><br />
<input id="WhiteSpaceRemove" onclick="myFunction()" style="border: 3px solid #73AD21;" type="button" value="Combine!" /><br>
<br>
<textarea autocomplete="off" cols="30" id="ResultField" name="message" rows="10" style="border: 3px solid #73AD21; width: 40%;"></textarea><br />

Upvotes: 1

Related Questions