O campo de texto vue realiza a identificação automática de endereços IP e quebras de linha automáticas para colar dados em grandes lotes

Eu encontrei tal requisito no trabalho:

O campo de texto é necessário para permitir que os usuários colem grandes quantidades de dados (usados ​​principalmente para copiar dados de word, txt e excel), separados por vírgulas, identificando automaticamente os endereços IP neles e envolvendo-os automaticamente.

O Baidu não encontrou uma solução adequada por muito tempo, então combinei vários blogs e escrevi esse método, da seguinte maneira:   

1. Implemente primeiro um campo de texto      

      <div>

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

                </div>

 2. Use o relógio para monitorar as mudanças de dados

/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/g é usado para corresponder a todos os endereços IP no conteúdo colado

(/,/g, "\n") substitua todas as vírgulas por novas linhas

  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")

    },
  },