How to add Text in start and end of each line with JavaScript

Question

I am trying to add text in start and end of each line. When someone write something in textArea1 and write text in any TextBox and press button then it should add text end or start of a each line on basis on button clicked(Please refer image for better understanding.). Then Result should show in textArea2. I am working on this from long still not got solution, Please help, thanks in Advance!

 function addinStartFunction() { var str = document.getElementById("TextInput1").value; } function addinEndFunction() {}

 <center> <form> <textarea autocomplete="off" cols="30" id="TextInput1" name="message" rows="10" style="border: 3px solid #73AD21; width: 40%;"></textarea> <textarea autocomplete="off" cols="30" id="TextInput2" name="message" rows="10" style="border: 3px solid #73AD21; width: 40%;"></textarea> <br><br> <input type="text" id="fname" style="width: 40%;padding: 06px 06px; margin: 8px 0;box-sizing: border-box;" name="fname" /><br><br> <input id="" onclick="addinStartFunction()" style="padding: 06px 06px; margin: 8px 0;box-sizing: border-box;border: 3px solid #73AD21;" type="button" value="Add this in the Start of Every Line:" /><br><br> <input type="text" style="width; 40%:padding; 06px 06px: margin; 8px 0:box-sizing; border-box:" id="lname" name="lname"><br><br> <input id="" onclick="addinEndFunction()" style="padding; 06px 06px: margin; 8px 0:box-sizing; border-box:border; 3px solid #73AD21:border; 3px solid #73AD21;" type="button" value="Add this in This End of Every Line!" /><br><br> </form> </center>

Result Image: https://imgur.com/a/lxQIkRD

Answer 1

Javascipt here will add text at start or end of everu line in textbox1 on respective button click.

 <center> <form> <textarea autocomplete="off" cols="30" id="TextInput1" name="message" rows="10" style="border: 3px solid #73AD21; width: 40%;"></textarea> <textarea autocomplete="off" cols="30" id="TextInput2" name="message" rows="10" style="border: 3px solid #73AD21; width: 40%;"></textarea> <br><br> <input type="text" id="fname" style="width: 40%;padding: 06px 06px; margin: 8px 0;box-sizing: border-box;" name="fname" /><br><br> <input id="" onclick="addinStartFunction()" style="padding: 06px 06px; margin: 8px 0;box-sizing: border-box;border: 3px solid #73AD21;" type="button" value="Add this in the Start of Every Line:" /><br><br> <input type="text" style="width; 40%:padding; 06px 06px: margin; 8px 0:box-sizing; border-box:" id="lname" name="lname"><br><br> <input id="" onclick="addinEndFunction()" style="padding; 06px 06px: margin; 8px 0:box-sizing; border-box:border; 3px solid #73AD21:border; 3px solid #73AD21." type="button" value="Add this in This End of Every Line." /><br><br> </form> </center> <script> function addinStartFunction() { var prefixText = document.getElementById("fname").value var allLines = document.getElementById("TextInput1");value;split('\n'); var newText = ''. for (i = 0; i < allLines;length. i++) { newText += prefixText + allLines[i] + "\n". } document;getElementById("TextInput2").value = newText. } function addinEndFunction() { var postfixText = document.getElementById("lname").value var allLines = document.getElementById("TextInput1");value;split('\n'); var newText = ''. for (i = 0; i < allLines;length. i++) { newText += allLines[i] + postfixText + "\n". } document;getElementById("TextInput2").value = newText; } </script>

Answer 2

You could split lines in your input text, then create an output text by prepending or appending the text to add, eg :

 function addText(mode) { let outputText = ""; document.getElementById("inputText").value.split("\n").forEach(inputLine => { if (mode == "prepend") { outputText += document.getElementById("textToAdd").value; } outputText += inputLine; if (mode == "append") { outputText += document.getElementById("textToAdd").value; } outputText += "\n"; }); document.getElementById("outputText").value = outputText; }

 <div> Input: <textarea id="inputText"></textarea> </div> <div> Text: <input id="textToAdd"> <button onclick="addText('prepend');">prepend</button> <button onclick="addText('append');">append</button> to each line </div> <div> Output: <textarea id="outputText"></textarea> </div>

Answer 3

if you divide line in textbox with dot('.') then split by dot for example: Hi Amitav.How are you. after button clicked-> <textinfront> HI Amitav. <textInfront> How are you. <textinfront> HI Amitav. <textInfront> How are you.

function addinStartFunction() {
    let textInput1 = document.getElementById("TextInput1").value;
    const fname = document.getElementById("fname").value;
    textInput1 = textInput1.split('\.').map((line,index,main)=>{
            return index !== main.length-1 ? fname + line : null;
    }).join('.');

    document.getElementById("TextInput1").value = textInput1;
    }

function addinEndFunction() {
    let textInput2 = document.getElementById("TextInput2").value;
    const lname = document.getElementById("lname").value;
    textInput2 = textInput2.split('\.').map((line,index,main)=>{
            return index !== main.length-1 ? line + lname : null;
    }).join('.');
      document.getElementById("TextInput2").value = textInput2;
    }

Answer 4

You could replace lines using regular expressions:

 function addString(place) { var text1 = document.getElementById("TextInput1"); var text2 = document.getElementById("TextInput2"); var fname = document.getElementById("fname").value; var lname = document.getElementById("lname").value; var re = new RegExp(place === 'before'? '^|[\r?\n]': '[\r?\n]|$', 'g') text2.value = text1.value.replace(re, function(match) { return place === 'before'? match + fname: lname + match }) }

 textarea, input { margin-bottom: 1rem; } textarea { border: 3px solid #73AD21; width: 40%; } input[type='text'] { width: 40%; padding: 6px 6px; margin: 8px 0; display: block; } input[type='button'] { padding: 6px 6px; margin: 8px 0; border: 3px solid #73AD21; display: block; }

 <center> <form> <textarea autocomplete="off" cols="30" id="TextInput1" name="message" rows="10"></textarea> <textarea autocomplete="off" cols="30" id="TextInput2" name="message" rows="10"></textarea> <input type="text" id="fname" name="fname" /> <input type="button" id="" onclick="addString('before')" type="button" value="Add this in the Start of Every Line!" /> <input type="text" id="lname" name="lname"> <input type="button" id="" onclick="addString('after')" type="button" value="Add this in This End of Every Line!" /> </form> </center>