javascript - 如何包装单词看起来像标签？

Question

我想听输入，当用 javascript 单击空格时，空格之前的单词将被换行，看起来像一个标签。

它应该像下面“问一个公共(public)问题”中的“标签”。 到目前为止的代码:

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>