[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기)

039_자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기)

[적용]

• 조건과 일치하는 문자열을 검색하고 싶을 떄

---

[문법]

메소드	의미	반환
/패턴/.test(문자열)	문자열과 패턴의 일치 여부 확인	진리값

---

[내용]

정규 표현의 test() 메소드를 사용해 문자열과 패턴의 일치 여부를 확인한다.

/J/.test('JavaScript');  // 'J'가 'JavaScript'에 포함되어 있는지 여부. true
/^iP/.test(iPhone');  // 'iPhone'의 시작 문자가 'iP'인지 여부. true
/\d/.test('래시피');  // '래시피' 문자열 내 숫자 포함 여부. false
/Java.*/.test('JavaScript');  // 'Jav' 다음의 문자 'a'가 0회 이상 존재하는지 여부. true
/노.*빠/.test('노는 아빠');  // '노빠' 혹은 '노'와 '삐' 사이의 문자 존재 여부. true
/\d+-\d+-\d+/.test('010-1234-5678');  // '숫자-숫자-숫자'의 형식 여부. true

---

[예시]

정규 표현을 사용해 전화번호의 형식을 체크하는 샘플을 확인해 보자.

입력된 문자가 0으로 시작해 10자리 혹은 11자리가 아니라면 알림을 표시한다.

 

HTML                                                                                                                                                              index.html

<h2> 전화번호를 입력해 주세요. </h2>
<input id="phoneNumberText" placeholder="전화번호" type="tel">
<p id="warningMessage"></p>

JavaScript                                                                                                                                                          main.js

/** 전화번호 입력란 */
const phoneNumberText = document.querySelector('#phoneNumberText');

/** 경고 메시지 */
const warningMessage = document.querySelector('#warningMessage');

// 문자가 입력될 때마다 내용 체크
phoneNumberText.addEventListener('keyup', () => {
    // 입력된 전화번호
    const phoneNumber = phoneNumberText.value;
    // 전화번호에 하이픈(-_이 포함되면 공백('')으로 변환
    const trimmedPhoneNumber = phoneNumber.replace(/-/g, '');
    // 01012345678
    
    // 0으로 시작하는 10자리 혹은 11자리의 번호 형식 체크
    if (/^[0][0-9]{9,10}$/.test(trimmedPhoneNumber) === false) {
        warningMessage.innerText = '전화번호의 형식에 맞춰 입력해 주세요.';
    } else {
      warningMessage.innerText = '';
    }
});

 

실행결과

 

정규 표현을 사용해 입력된 전화번호를 체크한다.

0부터 시작하지 않거나 10자리 혹은 11자리의 수가 아니라면 경고를 표시한다.

---

[JavaScript] 자바스크립트에서 문자열 다루기

[JavaScript] 자바스크립트에서 문자열 다루기

---

[JavaScript] 자바스크립트에서 문자열의 길이(문자의 수)를 확인하고 싶을때 length()

[JavaScript] 자바스크립트 문자열의 길이 확인하기

---

[JavaScript] 자바스크립트 문자열의 공백 처리하기 trim()

[JavaScript] 자바스크립트 문자열의 공백 처리하기 trim()

---

[JavaScript] 자바스크립트에서 문자열 검색하기 (인덱스 검색)

[JavaScript] 자바스크립트에서 문자열(인덱스) 검색하기

---

[JavaScript] 자바스크립트에서 문자열 검색하기 (부분 검색)

[JavaScript] 자바스크립트에서 문자열 검색하기 (부분 검색)

---

[JavaScript] 자바스크립트에서 문자열에서 문자 다루기 (문자열에서 문자 추출하기)

[JavaScript] 자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기)

---

[JavaScript] 자바스크립트 문자열에서 문자 다루기 (위치 지정하여 선택하기)

[JavaScript] 자바스크립트 문자열 다루기 (위치 지정하여 선택하기)

---

[JavaScript] 자바스크립트 문자열에서 문자 다루기 (글자수 지정하여 선택하기)

[JavaScript] 자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기)

---

[JavaScript] 자바스크립트 지정 문자열 변환하기

[JavaScript] 자바스크립트 지정 문자열 변환하기

---

[JavaScript] 자바스크립트 문자열 나누기

[JavaScript] 자바스크립트 문자열 나누기

---

[JavaScript] 자바스크립트 문자열 합치기

[JavaScript] 자바스크립트 문자열 합치기

---

[JavaScript] 자바스크립트 문자열의 대소문자 변환하기

[JavaScript] 자바스크립트 문자열의 대소문자 변환하기

---

[JavaScript] 자바스크립트 문자열의 대소문자 변환하기

[JavsScript] 자바스크립트 문자열과 식 함께 다루기

---

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기)

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기)

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김