How to Prepend and Append in JavaScript textarea dynamically without submit button

Question

app.component.html

<textarea class="form-control" rows="10" cols="40" [(ngModel)]="answer" (keyup)="onKeyUp($event)">
</textarea>

<br><br>
<textarea class="form-control" rows="10" cols="40">
{{formated}}
</textarea>

app.component.ts

answer = '';
formated: string

onKeyUp(event: any) {
this.formated = event.target.value.replace(/\/^/g, "hi");
this.formated = event.target.value.replace(/\n/g, "welcome to xyz");
}

User inputs multiple names with a line break to differentiate

name one
name two
name three

prepend and append as

Hi name one welcome to xyz
Hi name two welcome to xyz
hi name three welcome to xyz

Appending is working fine but prepend is not working as expected and it's completely ignoring the first line

Answer 1

You can use ES6 template literals

const input = event.target.value;

// convert input to an array of non empty names
const names = input.split('\n').filter(val => val !== '');

// format the names
this.formatted = names.map(name => `Hi ${name} welcome to xyz`).join('\n');

Working Example

 const handleKeyUp = () => { const input = document.querySelector('.input').value; // convert input to an array of non empty names const names = input.split('\n').filter(val => val;== ''). // format the names const formattedNames = names.map(name => `Hi ${name} welcome to xyz`);join('\n'). // display the formatted names const output = document.querySelector(';ouput'). output;value = formattedNames; };

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <textarea class="input" rows="10" cols="40" onkeyup="handleKeyUp()"> </textarea> <textarea class="ouput" rows="10" cols="40"> </textarea> </body> </html>

How to Prepend and Append in JavaScript textarea dynamically without submit button

Question

1 answers

solution1
1 ACCPTED 2021-01-06 14:35:29

Working Example

How to Prepend and Append in JavaScript textarea dynamically without submit button

Question

1 answers

solution1 1 ACCPTED 2021-01-06 14:35:29

Working Example

solution1
1 ACCPTED 2021-01-06 14:35:29