Vue rendering control problem through string

the background sends me such a string < sharpvalue
how to convert it into a form where the amount of is lower than < InputNumber > < / InputNumber > yuan , and the control also needs to pass a value

.
Jan.08,2022

if it has to be solved in this way, it's OK.
but this is unscientific, and the backend should not return such a string. The backend can return a json, with numerical values and other information, and directly return the string as a programming method.


// js
// 
const res = '-sharp12.5'
const matchArr = res.match(/(.*)\-sharp(([1-9]\d*|0)(\.\d{1,2})?)(.*)/)
// datacomputed
this.headStr = matchArr[1] // ""
this.value = matchArr[2] // 12.5
this.tailStr = matchArr[5] // ""

// template
headStr<InputNumber :value="value"></InputNumber>tailStr
Menu