Vue 文本框含有多个换行的文本去重

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

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

Vue 文本框含有多个换行的文本去重_第1张图片
Vue 文本框含有多个换行的文本去重_第2张图片

3.换行或不换行的逗号分隔查询(部分换行)的情况:

Vue 文本框含有多个换行的文本去重_第3张图片
Vue 文本框含有多个换行的文本去重_第4张图片

4.间隔多个换行也能查询:

Vue 文本框含有多个换行的文本去重_第5张图片

5.无逗号的换行查询

Vue 文本框含有多个换行的文本去重_第6张图片

6.能够对id进行去重

输入框:

    
    

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

  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 => {
         //查询完成
         })
    },

你可能感兴趣的:(前端vue.js正则表达式)