Как применить CSS к тексту, разделенному запятыми внутри тега textarea? (Проект React.js)

Question

Желаемый результат:

---

Я пытаюсь выделить текст, разделенный запятыми, внутри тега 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}})
}

И это JSX для текстовой области в моей функции render() {...}:

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

Буду признателен за любую помощь.

Answer 1

Так что я понимаю, что этот вопрос был немного ме, не имел особого смысла и заставили меня звучать как массивный нуб (это было как 4 часа утра). Я пытался получить теги, которые пользователь вставил бы для рендеринга, так же, как [ относится к изображению в вопросе ]

Я смог условновизуализировать элемент span над текстовой областью, который будет динамически отображать каждый тег в элементе span. Это дало желаемый результат.

Надеюсь, это поможет кому-то, кто хочет решить подобную проблему.