Question 16450 in Laravel Question posted in
The official Laravel Documentation can be found here.

How to split words of an input by space – Laravel

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?

Tags:

4

Answers


  1. 0

    You can do it with split():

    const input = "javascript html css";

const tags = input.split(' ');
console.log(tags)
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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 class="tag">#$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>
    Login or Signup to reply.
  4. 0

    You can try this:

    function splitString() {
  const inputTags = document.getElementById("tags").value;
  const tags = inputTags.toString().split(' ');
  console.log(tags);
}
     <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" style="background-color:blue; color: white; cursor:pointer;" onclick="splitString()">button</span>
 </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search