How to split words of an input by space-CodePudding

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

    <div >
       <label  for="tags">Tags (separate each one by [space])</label>
       <input type="text"  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?

CodePudding user response：

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 >
   <label  for="tags">Tags (separate each one by [space])</label>
   <input type="text"  id="tags" placeholder="Enter the keywords here">
   <span id="tagshow"></span>
</div>

CodePudding user response：

You can do it with split():

const input = "javascript html css";

const tags = input.split(' ');
console.log(tags)

CodePudding user response：

You can use String.prototype.replace() and use the Pattern $1 to embed your match with the added prefix #. The regex /([^ ] )/g or /(\S )/g would match anything that is not a space (your tag words)

const el = (sel, par) => (par || document).querySelector(sel);

el("#tags").addEventListener("input", () => {
  el("#tagshow").textContent = tags.value.replace(/([^ ] )/g, "#$1");
});

<label>
  Tags (separate each one by [space])
  <input type="text" id="tags" placeholder="Enter the keywords here">
</label>
<div id="tagshow"></div>

the nice thing about the above solution is that you can also wrap your tags into SPAN elements as tags pills pretty easily:

const el = (sel, par) => (par || document).querySelector(sel);

el("#tags").addEventListener("input", () => {
  el("#tagshow").innerHTML = tags.value.replace(/(\S )/g, `<span >#$1</span>`);
});

#tagshow {
  display: flex;
  gap: 0.5rem;
}

.tag {
  background: #eee; 
  border-radius: 0.5rem;
  padding: 0.3rem 0.5rem;
}

<label>
  Tags (separate each one by [space])
  <input type="text" id="tags" placeholder="Enter the keywords here">
</label>
<div id="tagshow"></div>

CodePudding user response：

You can try this:

function splitString() {
  const inputTags = document.getElementById("tags").value;
  const tags = inputTags.toString().split(' ');
  console.log(tags);
}

 <div >
   <label  for="tags">Tags (separate each one by [space])</label>
   <input type="text"  id="tags" placeholder="Enter the keywords here">
   <span id="tagshow" style="background-color:blue; color: white; cursor:pointer;" onclick="splitString()">button</span>
 </div>