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

Question

Desired result:

---

I'm trying to highlight text separated by commas inside of a textarea tag (in a React project).

I really can't figure out how to accomplish this, yet every solution I've come across online uses jQuery (I really don't want to inject jQuery halfway through my project).

This is the function I currently have to trim the input values and split them:

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}})
}

And this is the JSX for the textarea within my render() {...} function:

<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>

I'd appreciate any help.

Answer 1

So I understand that this question was a bit meh, didn't make much sense and made me sound like a massive noob (it was like 4 in the morning). I was trying to get the tags that the user would put in to render the same as [ refer to the image in the question ]

I was able to conditionally render a span element above the textarea which would render each tag within a span element, dynamically. This achieved the desired result.

Hopefully, this will be helpful to someone looking to solve a similar problem.