中括号文本添加下滑线样式

需求：申请[RB2204] [卖开] [24]。

代码实现

str=''申请[HC2205] [卖开] [111]。''

方法：

<style>
.unl {
    text-decoration: underline;
}
</style>




mounted:function(){
    let str = this.replaceText('申请[HC2205] [卖开] [111]。')
    console.log(str);//申请<span class="unl">HC2205</span> <span class="unl">卖开</span> <span class="unl">111</span>。
},
methods:funtion(){

replaceText(str) {
  let match = str.match(/\[[^]*?]/g);
  //匹配以[]开头结尾的数据，转下划线html
  //如果是null，就代表没匹配到，不做后续处理。
  if (match === null){
      return;
  }
  for (let j = 0; j < match.length; j++) {
      let mate = match[j];
      let replace1 = mate.replace(/^\[/gi, "");
      let replace2 = replace1.replace(/\]$/gi, "");
      let replace = str.replace(mate, `<span class="unl">${replace2}</span>`);
      str = replace;
 }
  return str;
}

}

然后v-html绑定值