The vue text field realizes the automatic identification of IP addresses and automatic line breaks for pasting data in large batches

I encountered such a requirement at work:

The text field is required to support users to paste large quantities of data (mainly used for copying word, txt, and excel data), separated by commas, automatically identifying the IP addresses in them, and automatically wrapping them.

Baidu has not found a suitable solution for a long time, so I combined multiple blogs and wrote such a method, as follows:   

1. Implement a text field first      

      <div>

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

                </div>

 2. Use watch to monitor data changes

/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/g is used to match all IP addresses in the pasted content

(/,/g, "\n") replace all commas with newlines

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

    },
  },