[javascript] 엑셀 이메일 한번에 붙여넣기(feat.이메일 체크 및 중복체크)

서론

사용자가 엑셀로 관리하고 있는 이메일 목록을 복사 & 붙여넣기 하여 수신자 목록을 적용하려고 한다. 그 기능을 적

소스

html

<template>
  <div class="text-center">
    <input type="textArea" />
    <v-col cols="12" md="6">
      <v-textarea
        solo
        name="input-7-4"
        v-model="inputEmail"
        label="이메일을 입력해주세요."
      ></v-textarea>
    </v-col>
    <v-btn :disabled="inputEmail === ''" @click="addEamil">추가 ↓</v-btn>

    <v-col cols="12" md="6">
      <div v-for="(item, index) in addEamilList" :key="index">
        {{ index }} {{ item }}
      </div>
    </v-col>
  </div>
</template>

설명

textArea : 입력 폼으로 v-model="inputEmail" 을 이용하여 데이터 제어
button : inputEmail 데이터 유무로 disabled 제어하고 click시 addEamil 메소드 호출
div : addEmailList 데이터 기준으로 추가된 데이터를 노출

script

<script>
import _ from "lodash";
export default {
  data() {
    return {
      inputEmail: "",
      addEamilList: [],
    };
  },
  methods: {
    // 엔터 치환
    replaceEnter(val, replaceVal) {
      return val.replace(/(\r\n|\n|\r)/gm, _.isNil(replaceVal) ? "/" : replaceVal);
    },
    // 이메일 체크
    emailCheckFlag(val) {
      // eslint-disable-next-line no-useless-escape
      const reg = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
      return reg.test(val);
    },
    addEamil() {
      const emailList = this.replaceEnter(this.inputEmail).split("/");

      for (let data of emailList) {
      	// 이메일 체크 & 중복 체크
        if (this.emailCheckFlag(data) &&!this.addEamilList.some((item) => item === data)) {
          this.addEamilList.push(data);
        }
      }

      this.inputEmail = "";
    },
  },
};
</script>

설명

메소드
replaceEnter : 엔터값을 정규식을 이용해 치환한 메소드로 치환값이 있다면 해당 값으로 치환하고 없다면 '/' 으로 치환한다.
emailCheckFlag : 전달값을 이메일 체크하여 true / false return
addEamil :  textArea에 등록한 inputEmail 데이터를 기반으로
1. 입력한 데이터를 치환하고 '/' 을 기반으로 split 하여 배열 변환
2. 배열을 반복문
3. 이메일 체크 & 중복 체크하여 addEamilList 에 push한다

확인