J'essaye d'ajouter du texte au début et à la fin de chaque ligne. Quand quelqu'un écrit quelque chose dans textArea1 et écrit du texte dans n'importe quelle zone de texte et appuie sur le bouton, il doit ajouter une fin de texte ou un début de chaque ligne sur la base du bouton cliqué (veuillez vous référer à l'image pour une meilleure compréhension!). Ensuite, le résultat doit apparaître dans textArea2. Je travaille là-dessus depuis longtemps toujours pas de solution. Veuillez aider, merci d'avance!

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>

Image de résultat: https://imgur.com/a/lxQIkRD

0
santosh 9 mai 2020 à 14:49

3 réponses

Meilleure réponse

Javascript ajoutera ici du texte au début ou à la fin de chaque ligne dans la zone de texte1 lors du clic de bouton respectif.

<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>
1
as.if.i.code 9 mai 2020 à 12:18

Vous pouvez remplacer des lignes à l'aide d'expressions régulières:

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>
0
SLePort 9 mai 2020 à 13:21

Vous pouvez diviser les lignes dans votre saisissez le texte, puis créez un texte de sortie en ajoutant ou en ajoutant le texte à ajouter, par exemple :

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>
1
Alessio Cantarella 9 mai 2020 à 12:13