实现将字符串中的特殊字符转化为输入框或者下拉框

最新推荐文章于 2024-11-03 19:04:31 发布

bigsmart12

最新推荐文章于 2024-11-03 19:04:31 发布

阅读量489

点赞数

分类专栏：前端文章标签： javascript 开发语言

本文链接：https://blog.youkuaiyun.com/bigsmart12/article/details/123295397

版权

前提：
最近项目有个需求，自定义模板，模板为一段文字，但是规定好一个规则：将字符串中的 {提示文字} 和 [选项一|选项二|选项三] 分别转换为输入框和下拉选择框。在自己没有很好的思路下选择查找网上的资料，找到一篇类似的文章，在这感谢大佬提供的思路原文链接，但大佬的使用情景很简单，只针对了在输入框即提示文字相同的情况下会出现第二个输入框不出现（用的split分割导致），下拉框同理。
要实现的效果如下下拉框和输入框
个人模板编辑时要想实现输入框就使用{} 以及下拉选择使用 [xxx|xxx|xxx]
![在这里插入图片描述](https://img-blog.csdnimg.cn/5d04f3c375c6451293b3ed8bc9086d41.png#pic_center width=512 height=256)

相关代码：

解析相关代码

setWords(item) {
   
      this.tkArrDes = [];
      this.tkArrHint = [];
      this.formData.ultrasoundDescribe = item.ultrasoundDescribe;
      this.formData.ultrasoundHint = item.ultrasoundHint;
      this.formData.name = item.name;
      this.formData.superiorId = item.superiorId;
      this.formData.ultrasoundDescribe = this.formData.ultrasoundDescribe.replaceAll('{}', '{xxx}');
      this.formData.ultrasoundHint = this.formData.ultrasoundHint.replaceAll('{}', '{xxx}');
      this.handTK(this.formData.ultrasoundDescribe, '', this.tkArrDes);
      this.handTK(this.formData.ultrasoundHint, '', this.tkArrHint);
    },
    handTK(tkString, t1, tkArr) {
   
      var s1 = tkString.match(/\{(.+?)\}|\[(.+?)\]/g);
      if (s1 != null && s1.length > 0) {
   
        var obj = {
   };
        const index = tkString.indexOf(s1[0]);
        var s = [tkString.substring(0, index), tkString.substring(index + s1[0].length, tkString.length)];
        obj.question = s[0];
        obj.questionType = s1[0];
        if (obj.questionType.indexOf('{') !== -1) {
   //输入框
          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 (obj.questionType.indexOf('[') !== -1) {
   //下拉框
          obj.input = '';
          obj.flag = '1';
          // debugger
          let p = s1[0].replace(/,(.+?)\]/g, '');
          p = p.replace('[', '');
          p = p.replace(']', '');
          //切割 选项
          const options = p.split('|');
          obj.options = options;
          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 {
   
          obj1.input = '';
          obj1.flag = '-1';
          obj1.placeholder = '';
          obj1.flagType = '';
          tkArr