vue中的一段文字中的带有特殊符号 替换成input，递归处理

图1

例如这种花括号要替换为input，生成效果图如图2，

图2

解决思路是将上面的一段文字按照{分割成数组，然后页面遍历这个数组

handTK(tkString, t1, tkArr) {

  var s1 = tkString.match(/\{(.+?)\}/g);

  if (s1 != null && s1.length > 0) {

    var obj = {};

    var s = tkString.split(s1[0]);

    obj.question = s[0];

    obj.questionType = s1[0];

    obj.input = "";

    obj.flag = "0";

    let p = s1[0].replace(/,(.+?)\}/g,"");

    p = p.replace("{","");

    obj.placeholder = p

    let t = s1[0];

    t = t.replace(/\{(.+?),/g , "");

    t = t.replace("}","");

    obj.flagType = t;

    tkArr.push(obj);

    if (s[1] != "" && s[1] != undefined && s[1] != null) {

      this.handTK(s[1], t1, tkArr);

    }

  } else {

    if (tkArr.length > 0) {

      var obj = {};

      obj.question = tkString;

      obj.questionType = "";

      obj.input = "";

      obj.flag = "1";

      obj.placeholder = "";

      obj.flagType = "";

      tkArr.push(obj);

    }

  }

},

调用处

//填空题

if (this.dimensionList[i].subjectList[j].questionType == "03" &&!this.dimensionList[i].subjectList[j].industryFlag) {

  var tkString = this.dimensionList[i].subjectList[j].questionContent;

  console.log("填空", tkString);

  var tkArr = new Array();

  this.handTK(tkString, "", tkArr);

  console.log(tkArr);

  this.dimensionList[i].subjectList[j].newCommentTK = tkArr;

}

结构

<el-col :span="23">

  <span v-for="(commentTK,indexTK) in dEle.newCommentTK" :key="indexTK" >

    <span v-html="commentTK.question"></span>

    <span  v-if="commentTK.flag =='0'">

      <span style="display:inline-block;height:auto;width:110px;margin-right:8px" >

        <el-input

          class="write-input"

          v-model="commentTK.input"

          :disabled ="isChange"

          :placeholder="commentTK.placeholder"

          maxLength='20'

          size="small"

          style="border:#fff;outline:none;"

          @input="inputWriteTK($event , commentTK,dEle,dItem , dIndx , indexTK)"

          @blur="blurWriteTK(commentTK,dEle,dItem.questionnaireId,dEle.dimensionId,dEle.id,dEle.newCommentTK)"

        ></el-input>

      </span>

    </span>

  </span>