在textarea中实现批量查问ID时,可通过回车事件触发进行查问,在查问之前实时对输入框的id进行去重。个别都是逗号分隔的查问,如何实现比拟宽松智能的交互?满足多种查问形式的场景:

1.能逗号分隔进行查问
2.能逗号分隔且是换行状态下的查问


3.换行或不换行的逗号分隔查问(局部换行)的状况:


4.距离多个换行也能查问:

5.无逗号的换行查问

6.可能对id进行去重

输入框:

    <el-input        type="textarea"        placeholder="请输出"        v-model="userOptions"        @keyup.enter.native="init"    >    </el-input>

首先应用正则过滤掉换行、多个换行、逗号紧跟换行的状况,并拆成数组:

  let  strarr = this.userOptions.split(/\n+|,\n*/gm);//宰割去除换行后的户号列表数组

遍历进行去重:

 let newArr = []; //一个新的长期数组     for(let i = 0; i < strarr.length; i++){    //如果以后数组的第i曾经保留进了长期数组,那么跳过,     //否则把以后项push到长期数组外面     if ((newArr.indexOf(strarr[i]) == -1)&&strarr[i]!==""){//去重        newArr.push(strarr[i]);       }     }  

到这里曾经获取到了用户输出数据的去重id,newArr数组为最终须要获取到的数据也能够接口数据的查问了。然而输入框的内容还是没有变的,同时也须要对输入框进行去重,上面要对输入框文本进行调整:

  let newstr = this.userOptions;    for(let j in newArr ){    let idx = newstr.indexOf(newArr[j]);//以后要查看的ID    let before =  newstr.substr(0,idx+newArr[j].length); //先保留首个以后ID及之前的字符串    let after =  newstr.slice(before.length).replace(new RegExp(newArr[j]+",|"+newArr[j]+"\n",'gm'),'');//删除掉以后ID之后的所有当ID        newstr = before + after; //两端字符串连贯    }    this.userOptions = newstr;

分为两个变量before、after别离对输出的newstr字符串进行解决,每次遍历保留以后newstr开始到newArr中的id在newstr中的地位。
同时查看在保留后的before直到字符串完结的反复所有ID进行删除。
每轮解决后组成新的newstr持续查看下一个id是否和前面的id反复,直到before之后的所有反复id被革除。

残缺代码:

  data() {    return {      userOptions: ""    };  },...  init() {  let newArr = []; //一个新的长期数组   let newstr = this.userOptions;  let  strarr = this.userOptions.split(/\n+|,\n*/gm);//宰割去除换行后的户号列表数组  let  after="",before="";    for(let i = 0; i < strarr.length; i++){    //如果以后数组的第i曾经保留进了长期数组,那么跳过,     //否则把以后项push到长期数组外面     if ((newArr.indexOf(strarr[i]) == -1)&&strarr[i]!==""){//去重        newArr.push(strarr[i]);       }     }      for(let j in newArr ){    let idx = newstr.indexOf(newArr[j]);//以后要查看的ID    let before =  newstr.substr(0,idx+newArr[j].length); //先保留首个以后ID及之前的字符串    let after =  newstr.slice(before.length).replace(new RegExp(newArr[j]+",|"+newArr[j]+"\n",'gm'),'');//删除掉以后ID之后的所有雷同ID        newstr = before + after; //两端字符串连贯    }    this.userOptions = newstr;   let params = {        url: "xxx",        data: newArr        };        this.$api        .fetch({          params //参数         })         .then(res => {         //查问实现         })    },