vue文本域实现大批量粘贴数据自动识别IP地址,并自动换行

工作中碰到这样一个需求:

要求文本域支持用户大批量的粘贴数据(主要用于word,txt,excel数据复制),以逗号隔开,自动识别出其中的ip地址,并自动换行排列。

百度了好久没有找到一个适合的解决办法,所以我结合多条博客,写了这样一个方法,如下:   

1.先实现一个文本域      

      <div>

                  <el-input type="textarea" :rows="21" v-model="textarea"/>

                </div>

 2.使用watch监听数据变化

/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/g 用来匹配粘贴内容内所有的IP地址

(/,/g, "\n") 把所有的逗号替换成换行符

  watch: {
    textarea (val) {
      let reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/g
      let abc = val.match(reg)
      let arr = Array.from(new Set(abc))
      let b = arr.toString()
      this.textarea = b.replace(/,/g, "\n")

    },
  },

猜你喜欢

转载自blog.csdn.net/ZhaoGongZi_Y/article/details/129726342
今日推荐