[React] 휴대폰번호 (-)하이픈 자동입력 정규식

input에 휴대폰번호 (-)하이픈 자동입력 정규식

import { useState } from "react";

export default function App() {
  const [phoneNumber, setPhoneNumber] = useState("");

  function regPhoneNumber(e) {
    const result = e.target.value
      .replace(/[^0-9.]/g, "")
      .replace(/^(\d{0,3})(\d{0,4})(\d{0,4})$/g, "$1-$2-$3")
      .replace(/(-{1,2})$/g, "");
    setPhoneNumber(result);
  }

  return (
    <input
      type="text"
      maxLength={13}
      value={phoneNumber}
      onChange={regPhoneNumber}
    />
  );
}

 

정규식 설명

 // 숫자만 입력가능
.replace(/[^0-9.]/g, "")

//3자리,4자리,4자리 입력
.replace(/^(\d{0,3})(\d{0,4})(\d{0,4})$/g, "$1-$2-$3")

//중간에 하이픈(-)자동추가
.replace(/(-{1,2})$/g, "");