前端如何實(shí)現(xiàn)類似的富文本解析的功能？

應(yīng)用的場景是一個(gè)評(píng)論功能，如果我要@某人，需要在input中顯示@小明，input的內(nèi)容就是這條評(píng)論的content字段
。要生成一條評(píng)論向后端POST如下數(shù)據(jù)。

let data = {
  content: [@userid|小明]內(nèi)容1
}

但是顯示在input中和評(píng)論列表中content卻是@小明。后端希望我做一個(gè)富文本解析的功能把

@小明  轉(zhuǎn)換成 [@userid|小明]
然后GET來的數(shù)據(jù)要把
[@userid|小明] 轉(zhuǎn)換 @小明，顯示在列表中

前端顯示的和實(shí)際后端傳的格式不同，這個(gè)要怎么實(shí)現(xiàn)呢？