[구디아카데미]
✅ 정규표현식
- 문자열의 일정한 패턴을 표현하는 일종의 형식 언어
사용 방법 2가지
- new RegExp() 생성해서 활용
- RegExp.test("대상문자열") : 정규표현식에 맞는 문자열이면 true, 아니면 false 반환하는 함수
- RegExp.exec("대상문자열") : 정규표현식에 맞는 문자열을 반환해주는 함수 - /정규표현식/flag(g,m,..)
✅ 문자열을 대체해주는 연산자
- $& : 패턴에서 찾은 문자를 지칭하는 연산
- $` : 패턴에서 찾은 문자의 앞에있는 문자열을 지칭
- $' : 패턴에서 찾은 문자의 뒤에있는 문자열을 지칭
<button onclick="test();">대체문자 활용하기</button>
<div id="container"></div>
<script>
const test =()=>{
let reg = /as/;
const target="javascript jquery ajax sass";
document.getElementById("container").innerHTML=`target.relace(reg,'($&)'):${target.replace(reg,'($&)')}<br>`; // as 부분에 괄호침
document.getElementById("container").innerHTML+=`target.relace(reg,'($\`)'):${target.replace(reg,'($`)')}<br>`; // as부분의 앞 문자열 -> jav이며 -> as부분을 jav로 치환
document.getElementById("container").innerHTML+=`target.relace(reg,'($')'):${target.replace(reg,"($')")}<br>`;
// as부분의 뒤 문자열 -> cript jquery ajax sass이며 -> as부분을 cript jquery ajax sass로 치환
}
</script>✅ 플래그 문자
- g : 대상문자열을 전체검색
- m : 개행을 새로운시작으로 처리하는 옵션
- i : 대소문자 구분없이 확인 옵션
- 중복해서 사용가능 ex) /a/gi
<button onclick="test1();">플래그 적용하기</button>
<div id="container1"></div>
<script>
const getContainer = id=>{ // id값 받아서 해당 id의 태그 객체 반환
return document.getElementById(id);
}
const test1=()=>{
const area = getContainer("container1");
let str = "javascript jquery ajax sass";
let reg = /a/;
area.innerHTML=`<h3>/a/ : ${str.replace(reg,"($&)")}</h3>`; // 맨앞의 소문자 a 하나만 해당
reg=/a/g;
area.innerHTML+=`<h3>/a/g : ${str.replace(reg,"($&)")}</h3>`; // 소문자 a들 다 해당
str='jAscript jquery Ajax sAss';
reg=/a/g;
area.innerHTML+=`<h3>/a/g : ${str.replace(reg,"($&)")}</h3>`; // 마지막부분 소문자 a부분만 해당
str='jAscript jquery Ajax sAss';
reg=/a/gi; // 전체검색 + 대소문자 구분 x (중복해서 가능)
area.innerHTML+=`<h3>/a/g : ${str.replace(reg,"($&)")}</h3>`; // 소문자와 대문자 a A 다 해당
str="jAscript\njquery\nAjax\nsAss";
reg=/^j/gm; // j로 시작하는것 m 속성 -> 개행을 새로운 시작으로 처리함
area.innerHTML+=`<h3>/a/gm : ${str.replace(reg,"($&)")}</h3>`; // 개행 기준으로 다음에 j부분 다 해당
}
</script>✅ 시작하는 문자와 끝나는 문자
- ^abc : a로 시작하는 문자
- abc$ : c로 끝나는 문자
</p>
<button onclick="test2();">^,%확인하기</button>
<div id="area"></div>
<script>
const test2 = ()=>{
const area = getContainer("area");
let reg = /^유../g;
let str="유병승은 자바강사다.";
area.innerHTML=`/^유../g : ${str.replace(reg,"($&)")}<br>`; // 유로 시작하는 세글자 해당
reg=/..승$/g;
str="자바강사 유병승";
area.innerHTML+=`/..승$/g : ${str.replace(reg,"($&)")}<br>`; // 승으로 끝나는 세글자 해당
}
</script>✅ 이스케이프 처리
- ^, $를 문자로 표현하고싶을 때 \를 이용
<button onclick="test3();">이스케이</button>
<div id="area1"></div>
<script>
const test3=()=>{
const area=getContainer("area1");
let str="$2$ \\-\\ $33$ ^";
let reg=/\$|\^|\\/g; // $, ^, 원화표시를 찾을때에는 앞에 \를 붙여줘야함
area.innerHTML=`/$|^/g : ${str.replace(reg,"($&)")}<br>`; // $와 \(돈모양)과 ^ 부분 모두 해당
}
</script>✅ . 표현
- 임의의 한글자를 의미하는 패턴
- ex) /../ -> 두글자
<button onclick="test4();">.패턴이용하기</button>
<div id="area2"></div>
<script>
const test4 = ()=>{
const area = getContainer("area2");
let reg=/a.b/g; // a로시작하고 b로 끝나는 세글자
// area.innerHTML=`/a.b/g : ${reg.test("a유b")}<br>`;
// area.innerHTML+=`/a.b/g : ${reg.test("a유b")}<br>`;
area.innerHTML+=`/a.b/g : ${reg.test("a b")}<br>`; // 띄어쓰기도 하나의문자임 -> a로 시작 b로 끝나는 세글자이므로 해당됨
reg=/ab*/;
area.innerHTML+=`<h3>ababbbb : /ab*/ -> : ${reg.test('ababbbb')} ${reg.exec('ababbbb')}
${'ababbbb'.replace(reg,"($&)")}</h3>`; // 띄어쓰기도 하나의문자임
}
</script>✅ 대괄호 표현식
- [] -> 대괄호안에 여러문자를 작성할 수 있고 그 문자는 OR로 연결되어 표시
- [0-9] : 숫자 전체
- [a-z] : 알파벳 소문자
- [A-Z] : 알파벳 대문자
- [가-힣] : 한글전체
ex) [abc] -> a와 b나 c인 것
✅ ^ : 부정의 의미
- [^0-9] : 숫자빼고 모든 문자
<button onclick="test5();">대괄호이용하기</button>
<div id="area3"></div>
<script>
const test5=()=>{
const area=getContainer("area3");
let reg=/[aj]/g; // g는 global을 의미함 (전체)
let str="javascript jquery ajax";
area.innerHTML=`/[aj]/g : ${str.replace(reg,"($&)")}<br>`; // a또는 j 모두 해당
reg=/[^aj]/g;
area.innerHTML+=`/[^aj]/g : ${str.replace(reg,"($&)")}<br>`; // a또는 j빼고 모든문자 전체(공백도 포함)
str="javascript jquery ajax 1234567 자바 오라클";
area.innerHTML+=`/[^aj]/g : ${str.replace(reg,"($&)")}<br>`; // a또는 j빼고 모든문자 전체(공백도 포함)
reg=/[0-9]/g;
area.innerHTML+=`/[0-9]/g : ${str.replace(reg,"($&)")}<br>`; // 0부터 9까지 숫자만
reg=/[a-z]/g;
area.innerHTML+=`/[a-z]/g : ${str.replace(reg,"($&)")}<br>`; // 영어소문자만
reg=/[가-힣]/g;
area.innerHTML+=`/[가-힣]/g : ${str.replace(reg,"($&)")}<br>`; // 한글전체다
reg=/[a-z가-힣]/g;
area.innerHTML+=`/[a-z가-힣]/g : ${str.replace(reg,"($&)")}<br>`; // 영어소문자와 한글전체 둘다 적용
reg=/^01[01689]-/g // 앞자리 3글자 (3번째글자는 0,1,6,8,9 중 하나)
console.log(reg.test("016-"));
reg=/^01[01689]-..../; // 앞자리 3글자 (3번째글자는 0,1,6,8,9 중 하나) + -다음에 네글자
console.log(reg.test("019-8304"));
}
</script>
<h3>(), |</h3>
<button onclick="test6()">(),|</button>
<script>
const test6=()=>{
let reg=/(금|토|일)요일/; // 밑에와 같은표현임
reg = /[금토일]요일/;
const week=["월요일","화요일","수요일","목요일","금요일","토요일","일요일"];
week.forEach(e=>{
if(reg.test(e)){
console.log(e); // 금요일, 토요일, 일요일만 출력
}
});
}
</script>✅ 메타 문자
- 대문자는 소문자의 부정으로 이해하면된다!
\d : 모든 숫자 == [0-9]; \D : 숫자 빼고 다 == [^0-9]; \w : 영문자,숫자,_ == [0-9a-zA-Z_] \W : 영문자,숫자,_ 빼고 다 == [^0-9a-zA-Z_] \s : 공백문자(띄어쓰기, tab, 개행) == [\t\n ] \S : 공백문자빼고 다 == [^\t\n ]
<script>
reg=/\d/g;
str="0a 가01 dbcaFDFRG 유병승 \n 호호호 ~!@#$%__123456";
console.log(str.replace(reg,"($&)")); // 모든 숫자에 해당
reg=/\D/g;
console.log(str.replace(reg,"($&)")); // 숫자 빼고 다 해당
reg=/\w/g;
console.log(str.replace(reg,"($&)")); // 영문자, 숫자, _ 만 해당
reg=/\W/g;
console.log(str.replace(reg,"($&)")); // 영문자, 숫자, _ 만빼고 다 해당
reg=/\s/g;
console.log(str.replace(reg,"($&)")); // 공백문자(띄어쓰기, tab, 개행) 해당
reg=/\S/g;
console.log(str.replace(reg,"($&)")); // 공백문자(띄어쓰기, tab, 개행) 빼고 해당
</script>✅ 수량을 표시하는 기호
ab* : *왼쪽에 있는 문자가 0개 이상 반복 -> a (참), ab (참), abb (참) , abbb (참), abab(거짓) ab+ : +왼쪽에 있는 문자가 1개 이상 반복 -> a(거짓), ab(참), abb(참), abbb(참) ab? : ?왼쪽에 있는 문자가 있어도 되고 없어도 된다. -> 1글자 또는 2글자임 a(참) ab(참) abb(거짓) ab{n} : {}왼쪽에 있는 문자가 n개 반복 -> ab{3} -> abbb (이것만 참임) ab{n,} : {}왼쪽에 있는 문자가 n개 이상 반복 an{n,m} : {}왼쪽에 있는 문자가 n개이상 m개 이하로 반복
<button onclick="test7();">수량패턴</button>
<div id="area4"></div>
<script>
const test7 =()=>{
const area = getContainer("area4");
let reg=/.*b$/g; // .* -> 앞에 아무문자중 0개이상있을때 + b$ -> b로 끝나는 것 (b가최소하나있어야함)
area.innerHTML+=`<h3>aab : /.*b$/ -> ${reg.test('aab')} ${'aab'.replace(reg,"($&)")}</h3>`; // 해당됨
area.innerHTML+=`<h3>aab : /.*b$/ -> ${reg.test('aab')} ${'b'.replace(reg,"($&)")}</h3>`; // 해당됨
area.innerHTML+=`<h3>1234b : /.*b$/ -> ${reg.test('1234b')} ${'1234b'.replace(reg,"($&)")}</h3>`; // 해당됨
reg = /.+b$/g;
area.innerHTML+=`<h3>aab : /.*b$/ -> ${reg.test('aab')} ${'aab'.replace(reg,"($&)")}</h3>`; // 해당됨
area.innerHTML+=`<h3>b : /.*b$/ -> ${reg.test('b')} ${'b'.replace(reg,"($&)")}</h3>`; // 해당안됨
area.innerHTML+=`<h3>1234b : /.*b$/ -> ${reg.test('1234b')} ${'1234b'.replace(reg,"($&)")}</h3>`; // 해당됨
reg=/[\d]-?[a-z]/; // 아무 숫자나 한자리+하이픈 있거나 말거나+소문자 한자리 -> 최소 두글자 최대 총 세글자여야함
area.innerHTML+=`<h3>0-a : /[\\d]-?[a-z]/ -> ${reg.test('0-a')} ${'0-a'.replace(reg,"($&)")}</h3>`; // 해당됨
area.innerHTML+=`<h3>0a : /[\\d]-?[a-z]/ -> ${reg.test('0a')} ${'0a'.replace(reg,"($&)")}</h3>`; // 해당됨
reg=/^AB{3}A$/; // 대문자 A로시작하고 B가 3번반복되며 A로 끝나는것 -> 총5글자로 나와야함
area.innerHTML+=`<h3>ABBBA : /^AB{3}A$/ -> ${reg.test('ABBBA')} ${'ABBBA'.replace(reg,"($&)")}</h3>`; // 해당됨
area.innerHTML+=`<h3>ABBB : /^AB{3}A$/ -> ${reg.test('ABBB')} ${'ABBB'.replace(reg,"($&)")}</h3>`; // 해당안됨
area.innerHTML+=`<h3>ABA : /^AB{3}A$/ -> ${reg.test('ABA')} ${'ABA'.replace(reg,"($&)")}</h3>`; // 해당안됨
reg=/A.{3,}강/; // A로 시작하며 강의로 끝나고 가운데가 3글자이상이며 총 5글자 이상인 것 .이 임의의문자
area.innerHTML+=`<h3>A 강 : /A.{3,}강/ -> ${reg.test('A 강')} ${'A 강'.replace(reg,"($&)")}</h3>`; // 해당
area.innerHTML+=`<h3>A 강 : /A.{3,}강/ -> ${reg.test('A 강')} ${'A 강'.replace(reg,"($&)")}</h3>`; // 해당안됨
area.innerHTML+=`<h3>A 123214124강: /A.{3,}강/ -> ${reg.test('A 123214124강')} ${'A 123214124강'.replace(reg,"($&)")}</h3>`; // 해당
reg=/A.{3,4}강/; // A로 시작 강으로 끝나는데 가운데에 꼭 3~4 개의 문자가 있어야함
area.innerHTML+=`<h3>A 1강: /A.{3,4}강/ -> ${reg.test('A 1강')} ${'A 1강'.replace(reg,"($&)")}</h3>`; // 해당됨
area.innerHTML+=`<h3>A 12강: /A.{3,4}강/ -> ${reg.test('A 12강')} ${'A 12강'.replace(reg,"($&)")}</h3>`; // 공백과 12포함해서 총4개라서 true
area.innerHTML+=`<h3>A 12강: /A.{3,4}강/ -> ${reg.test('A 12강')} ${'A 12강'.replace(reg,"($&)")}</h3>`; // 공백과 12포함해서 총5개라서 해당안됨
}
</script>✅ 휴대폰 정규 표현식 + 주민번호 정규 표현식
<button onclick="test8();">핸드폰번호 정규표현식</button>
<div id="area5"></div>
<button onclick="test9();">주민번호에 정규표현식</button>
<div id="area6"></div>
<script>
test8 =()=>{
const area = getContainer("area5");
// 010-8304-3868
let reg = /^010-?[0-9]{3,4}-?[\d]{4}/;
area.innerHTML+= `${reg.test('010-8503-3868')} ${'010-8303-3868'.replace(reg,"($&)")}`;
}
test9 =()=>{
const area = getContainer("area6");
//980803-1158717
// let reg = /^[0-9]{2}[01][0-9][0-3][0-9]-[1-4][0-9]{6}/
let reg = /^[0-9]{2}[01][\d][0-3][\d]-?[1-4][\d]{6}/;
area.innerHTML+= `${reg.test('980803-1154818')} ${'980803-1154818'.replace(reg,"($&)")}`;
}
</script>
우측 상단 햇님모양 클릭하셔서 무조건 야간모드로 봐주세요!!