안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
[ ]
- 하나의 문자에 대한 값 목록(순서 상관없음), 범위(ascii code(유니코드)상 작은 순-큰 순
-[^abc]처럼 [ ] 안에 사용된 ^는 반전을 의미
HTML 코드
<button id="btn6">[]</button>
<div class="area" id="area6"></div>
Javascript 코드
숫자 범위
const SUBSTITUETE = "<mark>$&</mark>";
btn6.onclick = () => {
const str = "Javascript jQuery Ajax 12345 안녕 ㄱㄴㄷ ㅏㅔㅣㅗㅜ";
area6.innerHTML = `${str.replace(/[0123456789]/g, SUBSTITUETE)}<br/>`;
area6.innerHTML += `${str.replace(/[0-9]/g, SUBSTITUETE)}<br/>`;
};
[0123456789]로 값 목록을 나타내거나 [0-9]로 작은 순-큰 순으로 범위를 나타낼 수도 있습니다.
영문자 범위
const SUBSTITUETE = "<mark>$&</mark>";
btn6.onclick = () => {
const str = "Javascript jQuery Ajax 12345 안녕 ㄱㄴㄷ ㅏㅔㅣㅗㅜ";
area6.innerHTML += `${str.replace(/[A-Za-z]/g, SUBSTITUETE)}<br/>`;
area6.innerHTML += `${str.replace(/[a-z]/gi, SUBSTITUETE)}<br/>`;
};
영문자 또한 작은 순-큰 순으로 범위를 나타내주었으며, 대/소문자를 [A-Za-z]로 표현하거나 /[a-z]/gi로 flag문자를 줄 수도 있습니다.
한글 범위
const SUBSTITUETE = "<mark>$&</mark>";
btn6.onclick = () => {
const str = "Javascript jQuery Ajax 12345 안녕 ㄱㄴㄷ ㅏㅔㅣㅗㅜ";
area6.innerHTML += `${str.replace(/[가-힣]/gi, SUBSTITUETE)}<br/>`;
area6.innerHTML += `${str.replace(/[가-힣ㄱ-ㅎㅏ-ㅣ]/gi, SUBSTITUETE)}<br/>`;
};
한글 또한 작은 순-큰 순으로 범위를 주었으며 자/모음이 다 따로 이므로 모든 한글에 대한 범위를 지정하고 싶다면
[가-힣ㄱ-ㅎㅏ-ㅣ]로 범위를 지정해줘야 합니다.
@실습
1) 알파벳 소문자로 시작하는 문자열 여부 검색
const re1 = /^[a-z]/;
console.log(re1.test("abcde")); // true
console.log(re1.test("123qwerty")); // false
console.log(re1.test("Hello world")); // false
console.log(re1.test("aㅏㅏㅏㅏㅏ")); // true
console.log(re1.test("ㄱaaaㄹaaa")); // false
2) 숫자 4자리 여부 검사
const re2 = /^[0-9][0-9][0-9][0-9]$/;
console.log(re2.test("1234")); // true
console.log(re2.test("123456"))// false
console.log(re2.test("abcd")); // false
console.log(re2.test("12")); // false
console.log(re2.test("가나다라")); // false
단축문자
HTML 코드
<button id="btn7">단축문자</button>
<div class="area" id="area7"></div>
Javascript 코드
/d (digit) - 숫자 한 글자
/D - 숫자가 아닌 한 글자
const SUBSTITUETE = "<mark>$&</mark>";
btn7.onclick = () => {
const str = `A1 B2 c3 d_4 e:5 fG12345 -@!@#$%
안녕 잘가
水`;
area7.innerHTML = `${str.replace(/\d/g, SUBSTITUETE)}<br>`;
area7.innerHTML += `${str.replace(/\D/g, SUBSTITUETE)}<br>`;
};
\d로 숫자 한 글자를 매칭하였으며, \D로 숫자가 아닌 한 글자들을 매칭하였습니다.
\w (word) - 영문자/숫자/_ 한 글자
\W - 영문자/숫자/_가 아닌 한 글자
const SUBSTITUETE = "<mark>$&</mark>";
btn7.onclick = () => {
const str = `A1 B2 c3 d_4 e:5 fG12345 -@!@#$%
안녕 잘가
水`;
area7.innerHTML += `${str.replace(/\w/g, SUBSTITUETE)}<br>`;
area7.innerHTML += `${str.replace(/\W/g, SUBSTITUETE)}<br>`;
};
\w로 영문자, 숫자, _ 한 글자들을 매칭하였으며, \W로 영문자, 숫자, _가 아닌 한 글자들을 매칭하였습니다.
\w에 한글은 포함되지 않는 것을 확인할 수 있습니다.
\s (space) - 공백문자/개행문자/탭문자 한 글자
\S - 공백/개행문자/탭문자가 아닌 한 글자
const SUBSTITUETE = "<mark>$&</mark>";
btn7.onclick = () => {
const str = `A1 B2 c3 d_4 e:5 fG12345 -@!@#$%
안녕 잘가
水`;
area7.innerHTML += `${str.replace(/\s/g, SUBSTITUETE)}<br>`;
area7.innerHTML += `${str.replace(/\S/g, SUBSTITUETE)}<br>`;
};
\s로 공백문자, 개행문자, 탭문자 한 글자들을 매칭하였으며, \S로 공백문자, 개행문자, 탭문자가 아닌 한 글자들을 매칭하였습니다.
[ ] 문법으로 바꿔 사용해보기
const SUBSTITUETE = "<mark>$&</mark>";
area7.innerHTML += `${str.replace(/[0-9]/g, SUBSTITUETE)}<br>`;
area7.innerHTML += `${str.replace(/[^0-9]/g, SUBSTITUETE)}<br>`;
area7.innerHTML += `${str.replace(/[a-z0-9_]/gi, SUBSTITUETE)}<br>`;
area7.innerHTML += `${str.replace(/[^a-z0-9_]/gi, SUBSTITUETE)}<br>`;
area7.innerHTML += `${str.replace(/[ \n\t]/gi, SUBSTITUETE)}<br>`;
area7.innerHTML += `${str.replace(/[^ \n\t]/gi, SUBSTITUETE)}<br>`;
grouping / or
HTML 코드
<button id="btn8">() | </button>
<div class="area" id="area8"></div>
Javascript 코드
() - grouping
| - or
const SUBSTITUETE = "<mark>$&</mark>";
btn8.onclick = () => {
const str = '월요일에는 월요병, 화가 부르르르 화요일 홧병, 수수술한잔 하는 수요일, 목이 컥~ 목요일, 금방 오지 않는 금요일, 그리고 오늘은 월요일';
area8.innerHTML = `${str.replace(/(수요일|목요일|금요일)/g, SUBSTITUETE)}<br>`;
area8.innerHTML += `${str.replace(/(수|목|금)요일/g, SUBSTITUETE)}<br>`;
area8.innerHTML += `${str.replace(/[수목금]요일/g, SUBSTITUETE)}<br>`;
};
()는 grouping, |는 or를 의미합니다.
따라서 (수요일|목요일|금요일), (수|목|금)요일에서 ()와 |를 이용하여 수요일, 목요일, 금요일에 대한 마킹 처리를 하였습니다.
[수목금]요일로도 표현 가능!
String#match
- 매칭된 결과를 배열로 반환
const str = '월요일에는 월요병, 화가 부르르르 화요일 홧병, 수수술한잔 하는 수요일, 목이 컥~ 목요일, 금방 오지 않는 금요일, 그리고 오늘은 월요일';
console.log(str.match(/(월요일|화요일)/g));
escaping
- whildcard 문자를 문자 그대로 사용하고자 하는 경우 \와 함께 escaping 처리 가능
- [ ] 안에서는 escaping 처리 필요 없음 (단, \와 처음 쓰이는 ^는 처리 필요)
HTML 코드
<button id="btn9">escaping</button>
<div class="area" id="area9"></div>
Javascript 코드
btn9.onclick = () => {
const str = '\\3.4^2$';
area9.innerHTML = `${str.replace(/\$/, SUBSTITUETE)}<br>`;
area9.innerHTML += `${str.replace(/[$]/, SUBSTITUETE)}<br>`;
area9.innerHTML += `${str.replace(/\./, SUBSTITUETE)}<br>`;
area9.innerHTML += `${str.replace(/[.]/, SUBSTITUETE)}<br>`;
area9.innerHTML += `${str.replace(/\\/, SUBSTITUETE)}<br>`;
area9.innerHTML += `${str.replace(/[\\]/, SUBSTITUETE)}<br>`;
area9.innerHTML += `${str.replace(/\^/, SUBSTITUETE)}<br>`;
area9.innerHTML += `${str.replace(/[\^]/, SUBSTITUETE)}<br>`;
};
\로 escaping 처리를 하여 와일드카드 문자를 문자 그대로 사용하였습니다.
다만, \(역슬래쉬)는 [ ] 안에서도 escaping 처리가 필요하며 ^ 또한 처음 시작한다면 escaping 처리가 필요합니다.
([ ] 안에 첫번째 등장하는 ^는 반전을 의미 - [^abc] : abc가 아닌 문자 의미)
