안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
flag 문자
- 정규표현식 옵션
HTML 코드
<button id="btn3">flag</button>
<div class="area" id="area3"></div>
Javascript 코드
flag문자를 주지 않았을 때
const SUBSTITUETE = "<mark>$&</mark>";
btn3.onclick = (e) => {
const str = "Javascript jQuery Ajax Sass";
area3.innerHTML = `${str.replace(/a/, SUBSTITUETE)}<br>`;
};
/a/ 조건에 맞는 첫 매칭만 <mark>처리된 것을 확인할 수 있습니다.
g (global)
- 전역비교수행
- 여러 건 매칭을 처리 (g 생략 시 첫 매칭만 처리)
const SUBSTITUETE = "<mark>$&</mark>";
btn3.onclick = (e) => {
const str = "Javascript jQuery Ajax Sass";
area3.innerHTML += `${str.replace(/a/g, SUBSTITUETE)}<br>`;
};
전역비교를 수행하므로 /a/에 일치하는 여러 건에 대해 매칭을 처리하였으므로 모든 'a'에 <mark>처리 되었습니다.
하지만 'Ajax'에 'A'는 대문자이므로 매칭 처리가 안되었네요.
i (ignoreCase)
- 영문자에 한해 대소문자를 구분하지 않고 처리
const SUBSTITUETE = "<mark>$&</mark>";
btn3.onclick = (e) => {
const str = "Javascript jQuery Ajax Sass";
area3.innerHTML += `${str.replace(/a/gi, SUBSTITUETE)}<br>`;
};
전역비교와 동시에 i flag문자를 주어 대소문자를 구분하지 않고 처리하였으므로 이번에는 'Ajax'의 'A'까지 <mark> 처리된 것을 확인할 수 있습니다.
m (multiline)
- 여러 줄인 경우(\n) 행 단위로 처리
const SUBSTITUETE = "<mark>$&</mark>";
btn3.onclick = (e) => {
const str2 = `Javascript
jQuery
Ajax
Sass`;
area3.innerHTML += `${str2.replace(/a/gm, SUBSTITUETE)}<br>`;
};
여러 줄인 경우에도 행 단위로 처리하는 m flag 문자를 주어 처리해줄 수 있습니다.
Anchor
HTML 코드
<button id="btn4">anchor</button>
<div class="area" id="area4"></div>
Javascript 코드
^
- 시작
const SUBSTITUETE = "<mark>$&</mark>";
btn4.onclick = (e) => {
const str = "Javascript xxx jQuery Ajax";
area4.innerHTML = `${str.replace(/^j/i, SUBSTITUETE)}<br>`;
};
시작하는 j를 검사하여 <mark>처리하였으므로 'Javascript'의 'J'가 마킹 처리 되었습니다.
만일 flag 문자 'i'를 주지 않았더라면 아무런 변화가 일어나지 않았을 것입니다.
$
- 끝
const SUBSTITUETE = "<mark>$&</mark>";
btn4.onclick = (e) => {
const str = "Javascript xxx jQuery Ajax";
area4.innerHTML = `${str.replace(/^j/i, SUBSTITUETE)}<br>`;
area4.innerHTML += `${str.replace(/x$/, SUBSTITUETE)}<br>`;
};
끝나는 x를 검사하여 <mark>처리 하였으므로 'Ajax'의 'x'가 마킹 처리 되었습니다.
각 단어별 j로 시작하는 문자열 찾아내기
const SUBSTITUETE = "<mark>$&</mark>";
btn4.onclick = (e) => {
const str2 = `Javascript
xxx
jQuery
Ajax`;
area4.innerHTML += `${str2.replace(/^j/img, SUBSTITUETE)}<br>`;
};
i 옵션으로 대소문자 구분하지 않고 매칭처리, m 옵션으로 여러 줄에 한하여 행 단위로 매칭 처리, g 옵션으로 전역비교를 수행하여 각각 j로 시작하는 단어를 찾아낼 수 있었습니다.
각 단어별 x로 끝나는 문자열 찾아내기
const SUBSTITUETE = "<mark>$&</mark>";
btn4.onclick = (e) => {
const str2 = `Javascript
xxx
jQuery
Ajax`;
area4.innerHTML += `${str2.replace(/x$/mg, SUBSTITUETE)}<br>`;
};
마찬가지로 x로 끝나는 단어를 찾아내었습니다.
대문자로 끝나는 'x'가 없으므로 i 옵션은 주지 않았습니다.
임의의 한 글자 표현
- 문자, 특수문자, 공백 문자 하나를 가리킴
- 개행문자는 임의의 글자에 포함되지 않음
HTML 코드
<button id="btn5">.</button>
Javascript 코드
btn5.onclick = (e) => {
const regexp = /^a.b/;
console.log("acb", regexp.test("acb")); // true
console.log("acbccc", regexp.test("acbccc")); // true
console.log("ab", regexp.test("ab")); // false
console.log("a b", regexp.test("a b")); // true
console.log("a\nb", regexp.test("a\nb")); // false
};
/^a.b/ → 'a'로 시작하고 . 임의의 문자가 있고 b가 나오는 문자열을 찾아내는 정규표현식을 의미합니다.
* 출력값 풀이
'acb' → a로 시작 / . 임의문자(c) / b가 나오므로 true
'acbccc' → a로 시작 / . 임의문자(c) / b가 나오므로 true (b$를 안 주었기 때문에 b 뒤에 뭐가 나오든 상관없음)
'ab' → a로 시작 / . 임의문자(b) / 뒤에 b가 나오지 않으므로 false
'a b' → a로 시작 / . 임의문자( )-공백 / 뒤에 b가 나오므로 true
'a\nb' → a로 시작 / . 임의문자(\n) / 뒤에 b가 나왔지만, 개행문자인 \n은 임의문자에 해당되지않으므로 false
in 다음에 한 글자가 있고 끝이나는 문자열 검사 시
const regexp2 = /in.$/;
console.log("going", regexp2.test("going")); // true
console.log("inner", regexp2.test("inner")); // false
console.log("holidayin", regexp2.test("holidayin")); // fasle/in.$/ 정규표현식을 이용하여 검사할 수 있습니다.
* 출력값 풀이
'going' → in 존재 / . 임의문자(g) / 끝났으므로 true
'inner' → in 존재 / . 임의문자(n) / 뒤에 문자가 더 있으므로 false
'holidayin' → in 존재 / .임의문자가 없이 문자열이 끝났으므로 false
