How to split words of an input by space

Question

I have a Laravel 9 forum project and I have added this form field:

    <div class="create__section">
       <label class="create__label BMehrBold" for="tags">Tags (separate each one by [space])</label>
       <input type="text" class="form-control BKoodakBold" id="tags" placeholder="Enter the keywords here">
       <span id="tagshow"></span>
    </div>

So as you can see I have said that Each tag should be separated by space.

So if user enters javascript for example as value, it should show this at the tagshow section:

#javascript

Then he should be able to enter other keywords as well and separate each one by [space]:

#javascript #jquery ...

But I need to define when the user press [space] on keyboard in order to get the tag value of the input.

So how can I do that?

Answer 1

Yep, .split() and .map() are your friends here:

const [tags, tagshow]=["tags","tagshow"].map(id=>document.getElementById(id));
tags.addEventListener("input",_=>
tagshow.textContent=tags.value.trim().split(/ +/).map(w=>"#"+w).join(" "))

<div class="create__section">
   <label class="create__label BMehrBold" for="tags">Tags (separate each one by [space])</label>
   <input type="text" class="form-control BKoodakBold" id="tags" placeholder="Enter the keywords here">
   <span id="tagshow"></span>
</div>