如何包装单词使其看起来像标签？

Question

我想听输入，当用javascript单击空格时，空格前面的单词将被包装成看起来像标签。

它应该像下面的“公共问题”中的“标签”一样。到目前为止的代码：

html：

<label for="subtypes" id="subtypes_label"><b>Restaurant subtypes</b></label>
<textarea type="text" name="subtypes" class="form-control w-50 p-3" id="subtypes" autocomplete="off" oninput=""></textarea>

javascript：

document.getElementById('subtypes').addEventListener('input', function(evt){
    wrapSubtypes(this.value);
});
function wrapSubtypes(value){

}

我不知道该在wrapSubtypes(value)中放什么。谢谢你的帮助。

Answer 1

您可能希望从函数中返回元素中的换行文本，如下所示：

return `<span class="tag">${value.trim().split(/\s/).pop()}</span>`  

​

document.getElementById('subtypes').addEventListener('input', function(evt) {
  if (evt.data === ' ') {
    let tag = wrapSubtypes(this.value);
    document.getElementById('tags').innerHTML += tag;
  }
});

function wrapSubtypes(value) {
  return `<span class="tag">${value.trim().split(/\s/).pop()}</span>`
}

#tags{ padding:10px; }

.tag {
  border-radius: 25%;
  color: #444;
  background: #e5e5e5;
  padding:5px;
  margin-right:10px;
}

<div><label for="subtypes" id="subtypes_label"><b>Restaurant subtypes</b></label>
<textarea type="text" name="subtypes" class="form-control w-50 p-3" id="subtypes" autocomplete="off"></textarea>
</div>

<div id="tags"></div>

​

Answer 2

试试这个：

​

document.getElementById('subtypes').addEventListener('input', function(evt){
    wrapSubtypes(this.value);
});
function wrapSubtypes(value){
  if(value.includes(' ')) {
    let newElement = `<li>${value.trim()}</li>`;
    document.querySelector('ul').innerHTML += newElement
    document.getElementById('subtypes').value = ""
  }
}

<label for="subtypes" id="subtypes_label"><b>Restaurant subtypes</b></label><br>
<textarea type="text" name="subtypes" class="form-control w-50 p-3" id="subtypes" autocomplete="off" oninput=""></textarea>

<p>Tags:</p>
<ul>
</ul>

​