Add "@" before every word + ONE space between every word (JavaScript)?

Question

I put together a code, in the input field one writes words and the output shows same words but with @ attached and have one space in between each words. The code I have so far is semi-functional, it kinda does what I want to do, but with some issues.

I need some help with a few things:

1. I need to make sure that the ouput always has one space in between characters. If a user inputs ( types or pastes ) a sentence with MORE THAN ONE "space", the output shrinks it down to one space. As you can see:

Currently if you input: tomato, orange, (double space) apple, it will output @tomato @orange @ @apple.

I want it to the output be: @tomato @orange @apple (remove the extra @, that was inserted due to double space)

2. When one deletes everything typed in the input field, the output still shows "@". I want the output be blank just like input if one deletes the input field.

Here is the code:

 function atPrefix (text) { return text .split(' ') .map(character => '@' + character) .join(' ') }

 <textarea id="specialInput" type="text" oninput="document.querySelector('#output').innerText = atPrefix(this.value)"></textarea> <p> <textarea id="output"> </textarea> </p>

Answer 1

Add a filter() function to filter out any token that is only made of spaces:

 function atPrefix (text) { return text .split(' ') .filter(token => token.trim() !== '') .map(token => '@' + token) .join(' ') }

 <textarea id="specialInput" type="text" oninput="document.querySelector('#output').innerText = atPrefix(this.value)"></textarea> <p> <textarea id="output"> </textarea> </p>

Answer 2

Something like this should work

function atPrefix (text) {
  if(text) {
     return text
       .replace(/\s\s+/g, ' ')
       .split(' ')
       .map(character => '@' + character)
       .join(' ')
   } else {  return text }  
}

So basically you are checking if text is not an empty string, and replacing multiple space characters with single space through regex.

Answer 3

your code is good but after the split just use then array.filter(e=>!!e);

 function atPrefix (text) { return text.split(' ') .filter(word => !!word) .map(word => '@' + word.trim()) .join(' ') }

 <textarea id="specialInput" type="text" oninput="document.querySelector('#output').innerText = atPrefix(this.value)"></textarea> <p> <textarea id="output"> </textarea> </p>

Answer 4

You can find an explanation for this regex here: https://regexr.com/4qgs7

 function atPrefix (text) { return text.replace(/\\b(\\w+)\\b/gm,"@$1"); }

 <textarea id="specialInput" type="text" oninput="document.querySelector('#output').innerText = atPrefix(this.value)"></textarea> <p> <textarea id="output"> </textarea> </p>

Answer 5

using regular express to replace ",?\\s+" with " @" and prefix with leading @; Do the string manipulation only when it's not blank. this will address your second problem.