jQuery change added text inside textarea from input text on delete-CodePudding

I want to update textarea value from input text field real-time.

With this code I can do it but if you delete some characters then everything is getting added repeatedly. How can I just add what if is in the input field or nothing if it's empty?

So if the name field is empty then only remain My name is:

and same with the email field

$("#name").keyup(function(){
    var name = $("#name").val();
    var text = $('textarea').val();
    text = text.replace("My name is: " , "My name is: "   name)
    $('textarea').val(text);
});

$("#email").keyup(function(){
    var email = $("#email").val();
    var text = $('textarea').val();
    text = text.replace("My email is: ", "My email is: "   email)
    $('textarea').val(text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<b>Name</b> <input type="text" name="name" id="name" required/>
<b>Email</b> <input type="email" name="email"  id="email" required/>
<b>Message</b>

<textarea rows="20" cols="20" name="message">Hello, xyz!

My name is: 

My email is: 

</textarea>

CodePudding user response：

The issue is because the text gets updated on each key press, so that replacing only the My name is: string doesn't remove the user's input.

To fix this you can use a regular expression which targets the line prefix and includes all content up to the following line break:

$("#name").keyup(function() {
  var name = $("#name").val();
  var text = $('textarea').val();
  text = text.replace(/My name is: .*/gi, "My name is: "   name)
  $('textarea').val(text);
});

$("#email").keyup(function() {
  var email = $("#email").val();
  var text = $('textarea').val();
  text = text.replace(/My email is: .*/gi, "My email is: "   email)
  $('textarea').val(text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<b>Name</b> <input type="text" name="name" id="name" required/>
<b>Email</b> <input type="email" name="email" id="email" required/>
<b>Message</b>

<textarea rows="20" cols="20" name="message">Hello, xyz!

My name is: 

My email is: 

</textarea>

In addition, this logic can be DRY'd up. Note that the textarea has also been made readonly so that it can't be amended outside of interacting your input elements.

let $textarea = $('textarea');

$(".user-input").on('input', e => {
  $textarea.val((i, v) => {
    let re = new RegExp(`My ${e.target.name} is: .*`, 'gi');
    return v.replace(re, `My ${e.target.name} is: ${e.target.value.trim()}`);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<b>Name</b> <input type="text" name="name" id="name"  required/>
<b>Email</b> <input type="email" name="email" id="email"  required/>
<b>Message</b>

<textarea rows="20" cols="20" name="message" readonly>Hello, xyz!

My name is: 

My email is: 

</textarea>