正则${}匹配替换

需求：将字符串中的占位符 ${} 匹配替换为input框，输入后将输入的内容插入到字符串中

1.记录所需要替换的占位符的位置，使用正则查找 /(?<=\$\{).*?(?=\})/g

//二位数组的查找

 let _this = this
      forEach(this.jsaList, (item, index) => {
        forEach(item.measuresList, (_item, _index) => {
          var num = -1
          if (/(?<=\$\{).*?(?=\})/g.test(_item.name)) {
            _item.name.replace(/(?<=\$\{).*?(?=\})/g, function () {
              num += 1
              _this.recordList.push([index, _index, num]) //index为父数组的位置，_index为子数组的位置，num为当前字符串的第几个输入框
              return `<input class='blank' type='text' style=border:none;border-bottom:1px solid #ccc;outline:none' value="${_item.strnum[num]}"></input>`
            })
          }
        })
      })

2.替换字符串中的站位符，使用v-html编译

                name: subItem,//字符串内容
                strnum: subItem.match(/(?<=\$\{).*?(?=\})/g),//将匹配到的站位符中的内容存起来
                str: /(?<=\$\{).*?(?=\})/g.test(subItem)
                  ? subItem.replace(/(?<=\$\{).*?(?=\})/g, function () {
                      return `<input class='blank' type='text' style='border:none;border-bottom:1px solid #ccc;outline:none' ></input>`
                    })
                  : subItem,//v-html执行内容

3.回显 将占位符中的内容回显到input框中

                var num = -1
              _item.str = _item.name.replace(
                /(?<=\$\{).*?(?=\})/g,
                function () {
                  num += 1
                  return `<input class='blank' type='text' style='border:none;border-bottom:1px solid #ccc;outline:none' value="${_item.strnum[num]}"></input>`
                }
              )

4.提交时，获取当前所有input框的内容，进行更新

let arr = document.getElementsByClassName('blank')
      let arrTxt = []
      for (let i = 0; i < arr.length; i++) {
        arrTxt.push(arr[i].value)
      }
      forEach(this.recordList, (item, index) => {
        this.jsaList[item[0]].measuresList[item[1]].strnum[item[2]] =
          arrTxt[index]
      })

5.将更新后的信息回显到字符串中

forEach(this.jsaList, (item) => {
        forEach(item.measuresList, (_item) => {
          var num = -1
          _item.name = _item.name.replace(/(?<=\$\{).*?(?=\})/g, function () {
            num += 1
            return `${_item.strnum[num]}`
          })
        })
      })

然后就没了~~~~~~~~