I am trying to add an event in a textarea to put commas after each space. As an example:

Input 1:

2 2 2 2

Output 1:

2,2,2,2 or 2, 2, 2, 2

Input 2:

2 2 2 2   2     2

Output 2:

2,2,2,2,2,2 or 2, 2, 2, 2, 2, 2

So in the frontend, I did something as follows:

<textarea
  [(ngModel)]="data"
  type="text"
  #data
  (keyup)="keyupvalue(data.value)"
></textarea>
{{ data }}

For TypeScript as follows:

data = '';
keyupvalue(e) {
  console.log(e);
  this.data = e.split(' ').join(',').trim();
}

The above works fine when I've values given in the textarea like this: 2 2 2 2

Output:

2,2,2,2

I may have input like this: 2 2 2 2 2 (Two whitespaces)

Output Got:

2,2,2,2,,2

Even I may have inputs as follows:

2
2
2
2
2
2

Expected Output:

2,
2,
2,
2,
2,
2

Not sure with the above code snippet or a bit of tweak would make it work. Will appreciate if any suggestion or improvements provided.

I am trying to add an event in a textarea to put commas after each space. As an example:

Input 1:

2 2 2 2

Output 1:

2,2,2,2 or 2, 2, 2, 2

Input 2:

2 2 2 2   2     2

Output 2:

2,2,2,2,2,2 or 2, 2, 2, 2, 2, 2

So in the frontend, I did something as follows:

<textarea
  [(ngModel)]="data"
  type="text"
  #data
  (keyup)="keyupvalue(data.value)"
></textarea>
{{ data }}

For TypeScript as follows:

data = '';
keyupvalue(e) {
  console.log(e);
  this.data = e.split(' ').join(',').trim();
}

The above works fine when I've values given in the textarea like this: 2 2 2 2

Output:

2,2,2,2

I may have input like this: 2 2 2 2 2 (Two whitespaces)

Output Got:

2,2,2,2,,2

Even I may have inputs as follows:

2
2
2
2
2
2

Expected Output:

2,
2,
2,
2,
2,
2

Not sure with the above code snippet or a bit of tweak would make it work. Will appreciate if any suggestion or improvements provided.

• angular
• typescript
• textarea
• angular15

2 Answers 2

Rather than using a simple split/trim, you may prefer to use a regular expression to capture not just a single space but group several spaces into one capture group. Then you can replace that group with a comma.

const input = `2 2 2 2

2 2  2  2   2`

const output = input.replace(/\s+/g, ', ')
console.log(output)

You almost got it, I think the approach is good.

If you break down the steps, for this.data = e.split(' ').join(',').trim(); you have:

.split(' ') -> string[]
.join(',') -> string
.trim() ->string

and given input '2 2 2 2' (single spaced), you get:

.split(' ') -> ["2", "2", "2", "2"] 
.join(',') -> "2,2,2,2"

however with more than one space '2 2 2 2' as delimiter you get:

.split(' ') -> ["2", "", "", "2", "", "", "", "", "2", "", "", "", "", "", "2"]
.join(',') -> "2,,,2,,,,,2,,,,,,2" 

The split function splits at every space, regardless of whether there exists a non empty value in between spaces. '2 2 2' could be visualized as '<2>< ><>< ><>< ><2>< ><>< ><2>' as an intermediary representation between the stages when the value is a string and the value is an array.

So I think the cleanest way to solve this would be to filter empty values, so supposing we had a function that takes a space delimited string and returns another with comma separate values, in the current state it may look something like:

const getCommaSeparated = (value:string)=>{
    return value.split(" ").join(",")
}

we would want to update it to be:

const getCommaSeparated = (value:string)=>{
    return value.split(" ").filter(v=>v!=="").join(",")
}

So here you filter all empty string values "" out of the array before joining.

playground may be helpful