Javascript) 정규표현식(1) - 객체 생성 방법, 정규식 메소드(test,exec), 문자열 메소드(search, replace, split, match), 대체문자 ($&, $`,$')

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

정규표현식이란? (Regular Expression)

- 특정 규칙을 가진 문자열 집합에 대한 표현식

- 유효성 검사, 검색, 문자열 대체에 유용

- 언어 독립적

- 간결하게 복잡한 조건을 검사

 

1a21ecbbf788137e.txt

0.03MB

 

---

HTML 코드

<button id="btn1">정규표현식 객체</button>

 

Javascript 코드

 

정규표현식 객체 생성 방법

숫자 포함 여부 검사용 정규표현식

btn1.addEventListener('click', (e) => {
    const regexp1 = /[0-9]/gi;
    const regexp2 = new RegExp(/[0-9]/gi);
    const regexp3 = new RegExp("/[0-9]/", "gi");

    console.dir(regexp1);
    console.dir(regexp2);
    console.dir(regexp3);
});

객체 생성 방법에는 위처럼 3가지가 있습니다.

gi → 특정 옵션을 의미

g는 global 속성(true)를 의미하며, i는 ignoreCase 속성(true)를 의미합니다.

 

 

정규식의 메소드

test()

- 정규식과 특정 문자열 사이의 일치에 대한 검사 수행

console.log(regexp1.test("abcde")); // false
console.log(regexp1.test("hello123")); // true

정규식 [0-9]와 특정 문자열 "abcde" 사이의 일치에 대한 검사를 수행하는 메소드이며, 일치하지 않으므로 false가 리턴됩니다.

정규식 [0-9]와 특정 문자열 "hello123" 사이의 일치에 대한 검사를 수행하였으므로 true가 리턴됩니다. (하나라도 일치하므로 true를 반환!)

 

exec()

- 정규식 패턴에 맞는 문자열 탐색을 수행

- 더 이상 맞는 것이 없다면 null을 반환

- 끝인데 또 실행하면 처음부터 검사 실시

console.log(regexp1.exec("hello123"));
console.log(regexp1.exec("hello123"));
console.log(regexp1.exec("hello123"));
console.log(regexp1.exec("hello123"));
console.log(regexp1.exec("hello123"));

차례대로 탐색하여 반환한 것을 확인할 수 있으며 더 이상 맞는 것이 없을 때는 null을 반환, 끝인데 또 실행하니 처음부터 검사를 실시하여 5번지의 정보를 리턴하였습니다.

 

 

문자열 메소드

search()

- 처음 일치한 인덱스를 반환

console.log('hello123'.search(regexp1));

'hello123'에서 정규표현식 조건([0-9])에 일치한 인덱스를 반환하므로 '1'의 index인 5가 리턴되었습니다.

 

replace()

- 특정 문자열 치환

console.log('hello123'.replace(regexp1, '*'));

'hello123'에서 정규표현식 ([0-9])에 일치한 문자열을 "*"로 변경하였으므로 'hello***'이 리턴되었습니다.

 

split()

- 문자열 자르기

console.log('a,p/p l,e'.split(/[,/ ]/));

정규식을 이용하여 여러 조건을 지정해주어 문자열을 잘라줄 수 있습니다.

 

match()

- 일치하는 요소를 배열로 반환

console.log('hello123'.match(regexp1));

'hello123'에서 정규표현식([0-9])에 일치하는 요소들을 배열로 반환하였으므로 ['1', '2', '3']이 반환되었습니다.

 

---

대체 문자

- String#replace시 주로 사용

 

HTML 코드

<button id="btn2">대체문자</button>
<div class="area" id="area2"></div>

CSS 코드

<style>
.area {
    background-color: lightgray;
    border: 2px solid #000;
    padding: 5px;
    margin: 10px 0;
    min-height: 50px;
}
</style>

 

Javascript 코드

 

$&

- 매칭된 문자열

btn2.addEventListener('click', (e) => {
    const str = "javascript jquery ajax css sass";
    const regexp = /as/;

    area2.innerHTML = `${str.replace(regexp, '<mark>$&</mark>')}<br/>`;
});

정규표현식 /as/에 매칭된 문자열을 <mark> 태그로 감싸주었으며, 첫번째 매칭된 문자열에 <mark>처리가 된 것을 확인할 수 있습니다.

(정규표현식에 /as/g로 global 옵션을 준다면 모든 요소를 검사하게됨)

 

$& 대신 함수로 표현

area2.innerHTML += `${str.replace(regexp, (matched) => `<mark>${matched}</mark>`)}<br/>`;

매칭 되는 문자열이 함수의 매개인자가 되어 매개변수로 넘어오게 됩니다.

이를 이용하여 표현할 수도 있습니다.

 

$`

- 매칭 이전 문자열

btn2.addEventListener('click', (e) => {
    const str = "javascript jquery ajax css sass";
    const regexp = /as/;

    area2.innerHTML += `${str.replace(regexp, '<mark>$`</mark>')}<br/>`;
});

/as/에 매칭된 문자열 이전의 문자열들을 가져오므로 'jav'를 가져와 대체한 것을 확인할 수 있습니다.

 

$'

- 매칭 이후 문자열

btn2.addEventListener('click', (e) => {
    const str = "javascript jquery ajax css sass";
    const regexp = /as/;

    area2.innerHTML += `${str.replace(regexp, "<mark>$'</mark>")}<br/>`;
});

/as/에 매칭된 문자열 이후의 문자열들을 가져오므로 'cript jquery ajax css sass'를 가져와 대체한 것을 확인할 수 있습니다.

 

 

global 옵션을 줄 경우

btn2.addEventListener('click', (e) => {
    const str = "javascript jquery ajax css sass";
    const regexp = /as/g;

    area2.innerHTML = `${str.replace(regexp, '<mark>$&</mark>')}<br/>`;
    area2.innerHTML += `${str.replace(regexp, '<mark>$`</mark>')}<br/>`;
    area2.innerHTML += `${str.replace(regexp, "<mark>$'</mark>")}<br/>`;
});

g 옵션을 주니, 전역 비교를 수행하여 여러 건 매칭을 처리하는 것을 확인할 수 있습니다.