Javascript 如何将css应用于textarea标记内由逗号分隔的文本？（React.js项目）

预期结果：

---

我试图突出显示textarea标记（在React项目中）内由逗号分隔的文本

我真的不知道如何实现这一点，但我在网上遇到的每个解决方案都使用jQuery（我真的不想在项目进行到一半时注入jQuery）

这是我当前必须修剪输入值并拆分它们的函数：

handleTags = async (event) => {
    let tags = event.target.value.toLowerCase().trim().replace(/[^\w,-]/g, '')
    tags = tags.split(",")
    await this.setState({post: {...this.state.post, tags: tags}})
}

这是我的

render（）{…}

函数中textarea的JSX：

<Card.Footer className="quickpost-tags-container">
 <textarea
   onChange={event => this.handleTags(event)}
   className="postbox-tags-textarea"
   placeholder="science, non-fiction, etc..."
   contentEditable
   suppressContentEditableWarning>
 </textarea>
</Card.Footer>

this.handleTags（事件）}
className=“邮箱标签文本区域”
占位符=“科学、非小说等…”
内容可编辑
suppressContentEditableWarning>

---

我非常感谢任何帮助。

所以我知道这个问题有点不对劲，没有多大意义，而且让我听起来像个大傻瓜（就像凌晨4点）。我试图获得用户将放入的标签，以呈现与[相同的内容，参考问题中的图像

我能够有条件地在textarea上方呈现

span

元素，动态呈现

span

元素中的每个标记。这达到了预期的效果

---

希望这对希望解决类似问题的人有所帮助。

请注意，如果不使用textarea，就无法做到这一点。原生textarea元素不允许子元素，因此除了实际的文本之外，没有任何东西可以设置样式。你不能为文本的各个部分设置单独的样式，至少不能以你想要的方式。您需要构建自己的组件，使用不同的元素（如contentediable div），或者使用构建了自己的HM的库。真遗憾，谢谢你。