[Javascript] 7강 정규 표현식

 

 

1. 정규 표현식 만들기

정규 표현식은 두 가지 방법으로 만들 수 있습니다.

 

• 정규 표현식 리터럴

const re = /ab +c/;

 

정규 표현식 리터럴은 스크립트를 불러올 때 컴파일되며, 바뀔 일 없는 패턴의 경우 리터럴을 사용하면 성능이 향상될 수 있습니다.

• RegExp 객체의 생성자 호출

const re1 =new RegExp("ab+c");

 

생성자 함수를 사용하면 정규 표현식이 런타임에 컴파일되고, 바뀔 수 있는 패턴이나, 사용자 입력 등 외부 출저에서 가져오는 패턴에 경우 이렇게 사용하면됩니다.

 

2. 정규 표현식 패턴 작성하기

정규 표현식 패턴은 /abc/ 처럼 단순한 문자로 구성하거나, /ab+c/ 와 /Chapter (\d+)\. \d*/ 처럼 단순한 문자와 특수 문자 조합으로 구성할 수 있습니다. 특히 (\d+)에 나타난 괄호는 정규 표현식에서 기억장치처럼 쓰여, 괄호 안쪽 패턴과 일치한 부분을 나중에 사용할 수 있도록 기억합니다.

 

단순 패턴 사용하기

 

단순 패턴은 문자열을 있는 그대로 탐색할 때 사용합니다. 예를 들어, /abc/ 패턴은 문자열에서 정확한 순서로 "abc" 라는 문자의 조합이 나타나는 부분과 일치합니다.

 

특수 문자 사용하기

 

하나 이상 "b"를 찾는다거나 공백 문자를 찾는 등 직접적인 일치 이상의 탐색이 필요할 때 특수 문자를 사용합니다. 

 

3. 이스케이핑 

 

특수 문자을 있는 그대로 탐색("*"을 직접 찾기)해야하는 경우, 특수 문자 앞에 역슬래시(\)를 배치해서 이스케이프 해야 합니다. 예를 들어 "a"뒤의 별표( "*" ) 뒤에 "b"와 일치해야 한다면 /a\*b/를 사용하면 됩니다. 역슬래시가 "*"를 "이스케이프"해서, 특수 문자가 아닌 문자 리터럴로 취급합니다. 

 

마찬가지로, 슬래시(/)와 일치해야 하는 경우에도 이스케이프 해야 합니다. 그냥 빗금을 사용하면 패턴이 끝나버립니다. 예를 들어 문자열 "/example/"과 그 뒤 하나 이상의 알파벳을 찾으려면 /\/example\/[a-z]/를 사용할 수 있습니다. 각각의 슬래시 앞에 놓인 역슬래시가 슬래시를 이스케이프합니다.

 

리터럴 역슬레시에 일치하려면 역슬래시를 이스케이프합니다. "A:\", "B:\", "C:\", ..., "Z:\"와 일치하는 패턴은 /[A-Z]:\\/ 입니다. 앞의 역슬래시가 뒤의 역슬래시를 이스케이프해서, 결과적으로 하나의 리터럴 역슬래시와 일치하게 됩니다. RegExp 생성자의 문자열 리터럴을 사용할 경우, 역슬래시가 문자열 리터럴의 이스케이프로도 작동한다는 것을 기억해야 합니다.

function escapeRegExp(string) {
    return string.replace(/[.*+?^${}() | [\]\\]/g, "\\$&"); // $&은 일치한 문자열 전체
}

 

정규 표현식 뒤의 "g"는 전체 문자열을 탐색해 모든 일치를 반환하도록 지정하는 전역 탐색 플래그입니다.

 

4.괄호 사용하기

 

정규 표현식의 아무 부분이나 괄호로 감싸면, 그 부분이 일치하는 부분 문자열을 기억합니다. 기억한 부분 문자열은 불러와 다시 사용할 수 있습니다. 정규 표현식은 RegExp의 메서드 test()와 exec(), String의 매서드 match(), replace(), search(), split() 에서 사용할 수 있습니다.

 

 

3. JavaScript에서 정규 표현식 사용하기

문자열 내부에 패턴과 일치하는 부분이 존재하는지만 알아내려면 test()나 search() 메서드를 사용합니다. 더 느리더라도 일치에 관한 추가 정보가 필요하다면 exec()와 match() 메서드, 일치하는 부분이 존재하면, exec()와 match()는 일치에 관한 데이터를 포함한 배열을 반환하고, 일치에 사용한 정규 표현식 객체의 속성을 업데이트합니다. 일치하지 못하는 경우 null을 반환합니다.( null은 조건 평가시 false와 같음)

const myRe = /d(b+)d/g;
const myArray = myRe.exec("cdbbdsbz");

console.log(myRe);
console.log(myArray);

 

만약 정규 표현식 객체의 속성에 접근할 필요가 없다면 아래와 같이 사용합니다.

const ThisArray = /d(b+)d/g.exec("cdbbdsbz");

 

정규 표현식을 문자열에서 만들고 싶다면 아래처럼 사용합니다.

const mySt = new RegExp("d(b+)d", "g");
const myAr = mySt.exec("cdbbdbsbz");

 

위 예제의 두 번째 형태처럼, 정규 표현식 객체를 변수에 대입하지 않고 사용할 수 있습니다. 하지만, 이러면 매 사용때마다 정규 표현식 객체가 새로 생성되며, 업데이트되는 속성에 접근할 수 없습니다. 

const myRe = /d(b+)d/g;
const myArray = myRe.exec("cdbbdsbz");
console.log(`lastIndex의 값은 ${myRe.lastIndex}`);

 

위 코드를 아래 코드로 사용하게되면 

const myAr = mySt.exec("cdbbdbsbz");
console.log(`lastIndex의 값은 ${/d(b+)d/g.lastIndex}`);

 

두 개의 /d(b+)d/는 서로 다른 정규 표현식 객체로 별개의 lastIndex 속성을 가지고, 정규 표현식 객체의 속성에 접근해야 하면 우선 변수에 할당해야 합니다.

 

플래그를 활용한 고급 탐색

 

정규 표현식은 전역 탐색이나 대소문자 무시 같은 특성을 지정하는 플래그를 가질 수 있고, 단독 사용이 가능하며, 순서에 상관 없이 한꺼번에 여럿이 지정할 수 있습니다.

 

플래그는 다으모가 같은 구문으로 정규 표현식에 지정할 수 있습니다.

const re = /pattern/flags;

 

생성자를 사용할 경우 이렇게 지정합니다.

const re = new RegExp("pattern", "flags");

 

플래그는 정규식과 완전히 합쳐지므로 나중에 추가하거나 제거할 수 있습니다.

const re = /\w+\s/g;
const str = "hi my name";
const myArray = str.match(re);
console.log(myArray);

// ["hi ", "my"]

 

아래 코드를 생성자를 사용하도록 바꿀 수 있습니다.

const re = new RegExp("\\w+\\s", "g");

 

m 플래그는 여러 줄에 걸친 입력 문자열을 여러 줄로 취급하게 합니다. m 플래그를 지정할 경우, ^와 $는 각각 전체 입력 문자열의 시작과 끝이 아닌, 각 줄의 시작과 끝에 대응합니다.

 

exec()와 전역 탐색 플래그 사용

 

RegExp.prototype.exec() 메서드와 g플래그를 사용하면, 일치한 부분 문자열들과 각각의 인덱스를 하나씩 순차적 반환합니다.

const str = "fee fi fo fum";
const re = /\w+\s/g;

console.log(re.exec(str)); // [ 'fee ', index: 0, input: 'fee fi fo fum', groups: undefined ]
console.log(re.exec(str)); // [ 'fi ', index: 4, input: 'fee fi fo fum', groups: undefined ]
console.log(re.exec(str)); // [ 'fo ', index: 7, input: 'fee fi fo fum', groups: undefined ]
console.log(re.exec(str)); // null

 

반면, String.prototype.match() 메서드는 모든 일치를 한 번에 반환하지만, 각각의 인덱스는 포함하지 않습니다.

console.log(str.match(re)); [ 'fee ', 'fi ', 'fo ' ]

 

4. 정규 표현식 특수 문장를 사용한 입력 값 검증

사용자가 전화번호를 입력하고 "확인" 버튼을 누르면 입력한 값을 스크립트로 검증하고, 값이 유효하면, 스크립트 감사 메시지를 출력합니다. 값이 유효하지 않으면, 사용자에게 올바르지 않은 값을 알려줍니다.

    <p>
        전화번호를 입력해주세요
    </p>
    <form id="form">
        <input type="text" id="phone"/>
        <button type="submit">확인</button>
    </form>
    <p id="output"></p>

    const form = document.querySelector('#form');
    const input = document.querySelector("#phone");
    const output = document.querySelector("#output");

    const re = /^(?:\d{3} | \(\d{3}\))([-\/\.])\d{4}\1\d{4}$/;

    function testInfo(phoneInput) {
        const submit = re.exec(phoneInput.value);

        if (!submit) {
            output.textContent = `형식에 맞지 않는 전화번호입니다. (${phoneInput.value})`;
        } else {
            output.textContent = `감사합니다. 전화번호는 ${ok[0]} 입니다`;
        }
    }

    form.addEventListener("submit", (event) => {
        event.preventDefault();
        testInfo(input);
    });

 

 

정규 표현식 - JavaScript | MDN

 

GitHub - javascript-only/javascript-bloging