정규 표현식

조건과 일치하는 문자열을 검색하거나 많은 문자열을 패턴에 따라 일괄적으로 변경할 때 사용합니다.

패턴

문자열의 패턴은 내용의 앞뒤에 /를 삽입합니다.

/패턴/

x: 문자 x
xyz: 문자열 xyz
[xyz]: x,y,z중 하나의 문자
[a-z]: a~z중 하나의 문자
[^xyz]: x,y,z외 하나의 문자
[^a-z]: a~z외 하나의 문자
abc|xyz: 문자열 abc 혹은 xyz
{숫자}: 반복 횟수
^x: 시작 문자 x
x$: 종료 문자 x
.: 하나의 문자(줄바꿈 코드 제외)
x*: 0개 이상 계속되는 x
\: 다음에 오는 문자를 이스케이프 처리
\d: 숫자 [0-9]
\D: 숫자가 아닌 문자 [^0-9]
\w: 영문, 숫자, 언더바 [A-Za-z0-9_]
s: 공백 문자(스페이스, 탭, 줄바꿈 등)
S: 공백 이외의 문자 [^\s]
\t: 수평 탭
\n: 줄바꿈 코드

예시

if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
  alert('해당 브라우저는 iOS 입니다.')
}

/J/.test('JavaScript'); // true (문자열에 'J'가 포함되어 있는지 여부)
/^iP/.test('iPhone'); // true (시작 문자가 'iP'인지 검사)
/\d/.test('JavaScript'); // false (문자열에 숫자 포함 여부)
/Java.*/.test('JavaScript'); // true ('Jav' 다음 문자 'a'가 0회 이상 존재하는지 여부)
/자.*트/.test('자바스크립트'); // true ('자트' 혹은 '자'와 '트' 사이의 문자 존재 여부)
/\d+-\d+-\d+/.test('010-1234-5678'); // true ('숫자-숫자-숫자' 형태 여부)

JSX 샘플: 전화번호 입력 형식 체크

입력된 문자가 0으로 시작해 10~11자리가 아니면 경고 문자를 표시합니다.

라이브 에디터

function TestPhoneNumber() {
  const inputRef = useRef(null);
  const [isWarning, setIsWarning] = useState(false);

  const onInputHandler = e => {
    // 입력된 전화번호에 하이픈(-) 제거
    const trimmedPhoneNumber = (e.target.value).replace(/-/g, '');

    // 0으로 시작하고 10~11자리 번호가 아닌지 검사
    const regExpTest = !/^[0][0-9]{9,10}$/.test(trimmedPhoneNumber);

    // 경고 문구 노출 업데이트
    setIsWarning(regExpTest);
  }

  return (
    <>
      <label htmlFor="inpTel">전화번호를 입력해주세요</label><br />
      <input
        type="tel"
        id="inpTel"
        ref={inputRef}
        placeholder="010-1111-2222"
        onInput={onInputHandler}
      />
      {isWarning && (
        <p style={{color: 'crimson'}}>
          전화번호 형식에 맞게 입력해주세요.
        </p>
      )}
    </>
  )
}

결과

패턴​

예시​

JSX 샘플: 전화번호 입력 형식 체크​

패턴

예시

JSX 샘플: 전화번호 입력 형식 체크