乐趣区

关于前端:Vue-文本框含有多个换行的文本去重

jiezi

在 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 => {// 查问实现})
    },
退出移动版