정규표현식(Regular Expression)
특정 패턴을 가진 문자열을 찾거나 또는 찾아서 변경(치환)할 때 사용하는 형식 언어이다.
정규표현식을 이용하면 문자열에 대해 특정 패턴 조건 검사 또는 치환 시 복잡한 조건을 제시할 필요없이 간단하게 처리 가능하다.
자바스크립트뿐만 아니라 자바나 오라클 등 다른 언어에서도 사용 가능하다.
# 정규표현식 객체 생성 및 정규표현식과 관련된 메소드
test1실행 버튼 클릭 시 regExp 결과와 regEpx2 두 방법을 통해 만들어진 문자열을 콘솔로 확인하고
str1과 str2에 담긴 문자열을 RegExp객체를 통해 비교한다.
<h3>정규표현식 객체 생성 및 정규표현식과 관련된 메소드</h3>
<button onclick="test1();">test1실행</button>
<div class="area" id="area1"></div><script>
function test1(){
// 정규표현식 객체 생성 == 정규변수를 선언
// == 검색 조건으로 삼고자 하는 문자열 또는 특정 패턴 제시
var regExp = new RegExp("script"); // 방법1
var regExp2 = /script/; // 방법2
console.log(regExp); // script
console.log(regExp2); // script
// 비교할 문자열
var str1 = "javascript jquery html";
var str2 = "ajax oracle css java";
/*
RegExp 객체에서 제공하는 메소드(정규식.xxx(문자열))
- 정규식.test(문자열) : 문자열에서 정규식값과 일치하는 값이 있으면 true/ 없으면 false
- 정규식.exec(문자열) : 문자열에서 정규식값과 일치하는 값이 있으면 처음 매칭된 문자열 반환/ 없으면 null반환
String 객체에서 제공하는 메소드(문자열.xx(정규식))
- 문자열.match(정규식) : 문자열에서 정규식값과 일치하는 값을 찾아서 반환
- 문자열.search(정규식) : 문자열에서 정규식값과 일치하는 값의 시작인덱스를 반환"(0부터 시작) 일치하는 값이 없으면 -1 반환
- 문자열.replace(정규식, 바꿀값) : 문자열에서 정규식값과 일치하는 첫번째 부분을 바꿀값으로 변경해서 반환
- 문자열.split(정규식) : 정규식에 지정된 값을 구분자로 해서 쪼개진 값들이 담겨있는 배열 반환
*/
var area1 = document.getElementById("area1");
// 정규식 메소드
area1.innerHTML += "regExp.test(str1) : " + regExp.test(str1) + "<br>"; // true
area1.innerHTML += "regExp.test(str2) : " + regExp.test(str2) + "<br><br>"; // false
area1.innerHTML += "regExp.exec(str1) : " + regExp.test(str1) + "<br>"; // true
area1.innerHTML += "regExp.exec(str2) : " + regExp.test(str2) + "<br><br><hr>"; // false
// 문자열 메소드
area1.innerHTML += "str1.match(regExp) : " + str1.match(regExp) + "<br>"; // script
area1.innerHTML += "str1.search(regExp) : " + str1.search(regExp) + "<br><br>"; // 4
area1.innerHTML += "str1.replace(regExp, '스크립트') : " + str1.replace(regExp, '스크립트') + "<br>"; // java스크립트 jquery html
area1.innerHTML += "str1.split(regExp) : " + str1.split(regExp) + "<br><br>"; // java, jquery html
}
</script>- html 결과 :
- 콘솔 결과 :
방법1과 방법2의 콘솔결과가 동일하다.
test() 메소드 실행 시 script가 포함되어있어 true가 출력되었다.
exec() 메소드 실행 시 script가 포함된 인덱스인 4가 출력되었다.
match() 메소드 실행 시 정규식과 일치하는 문자열인 script가 출력되었다.
search() 메소드 실행 시 정규식값과 일치하는 값의 시작인덱스인 4가 출력되었다.
replace() 메소드 실행 시 정규식과 일치하는 값을 변경할 문자열로 바꾸어 출력되었다.
split() 메소드 실행 시 정규식에 지정된 값을 구분자로 하여 쪼개진 값이 출력되었다.
# 메타 문자
메타 문자를 이용하여 정규식으로 검색 조건으로 삼을 특정 패턴을 제시할 수 있다.
문자열이 해당 정규식으로 제시한 특정 패턴을 만족하는지 test()를 통해 검사하거나, replace()를 통해 치환 가능하다.
test2실행 버튼을 클릭하면 regExp 객체에 담긴 특정 패턴을 만족하는지 검사하고, 해당 문자열로 치환하여 html로 출력한다.
<button onclick="test2();">test2실행</button>
<div class="area" id="area2"></div><script>
function test2(){
var area2 = document.getElementById("area2");
var str = "javascript jquery ajax"; // 비교할 문자열
// var regExp = /'a'/; // 메타문자 없는 경우
var regExp = /a/; //이렇게 해야 replace에서 문자 찾을 수 있음.
area2.innerHTML = "/a/ : " + regExp.test(str) + "<br><br>"; // true
area2.innerHTML +="/a/ : " + str.replace(regExp,'b')+"<br><br>"; // jbvascript jquery ajax
// 기본적으로 replace는 치환시 일치하는 값들 중 첫값만 변경해준다.
// - 메타문자 -
// 1. ^ : 시작을 의미
regExp = /^j/; // 소문자 j로 시작하는 경우
area2.innerHTML += "/^j/ : " + regExp.test(str) + "<br>"; // true
area2.innerHTML += "/^j/ : " + str.replace(regExp, "***") + "<br><br>"; // ***avascript jquery ajax
//2. [] : []있는 문자 중 하나라도 존재할 경우
regExp = /[abc]/; // 특정 문자열 중 a또는 b또는 c가 하나라도 존재할 경우
area2.innerHTML += "[abc] : " + regExp.test(str) + "<br>"; // true
area2.innerHTML += "[abc] : " + str.replace(regExp,"(**)") + "<br><br>"; // j(**)vascript jquery ajax
regExp = /[kh]/;
area2.innerHTML += "[kh] : " + regExp.test(str) + "<br>"; // false
// ---------------------------
// 1, 2 묶어서 판별
regExp = /^[jsa]/; // 시작하는 문자가 'j' 또는 's'또는 'a' 로 시작하는 것
area2.innerHTML += "/^[jsa]/ : " + str.replace(regExp,"(***)") + "<br><br>"; // (***)avascript jquery ajax
regExp = /^jsa/; // 시작하는 문자가 'jsa'로 시작하는 것
area2.innerHTML += "/^jsa/ : " + str.replace(regExp,"(***)") + "<br><br>"; // javascript jquery ajax
// 3. $: 끝을 의미
regExp = /x$/; // 'x'로 끝나는 것
area2.innerHTML += "/x$/ : " + str.replace(regExp,"(***)") + "<br><br>"; // javascript jquery aja(***)
// 시작값은 j 끝값은 x
regExp = /^jx$/; // j와 x가 붙어있어서 문자열 jx로 시작하고 끝나는 'jx'일 경우만 만족한다.
area2.innerHTML += "/^jx$/ : " + str.replace(regExp,"(***)") + "<br><br>"; // 만족하는 게 없음.
// 4. . : 개행 문자를 제외한 모든 문자(영문자, 숫자, 한글, 특수문자)
// 5. + : 한글자 이상(0글자는 안됨)
// .+ : 어떤 문자든지 한 글자 이상일 경우
regExp = /^j.+x$/; // j로 시작하고 어떤 문자든 한 글자 이상이고 x로 끝나는 경우
area2.innerHTML += "/^j.+x$/ : " + str.replace(regExp,"(***)") + "<br><br>"; // (***)
</script>- html 출력결과 :
# 연습문제
- 시작부터 끝까지 오로지 숫자로만 이루어진 경우
- 숫자의 개수는 상관없이 적어도 한 글자 이상 있어야 되는 경우
- 숫자로 시작하고 숫자로 끝나고 적어도 한 글자 이상인 경우
//regExp = /^[0123456789]+$/;
regExp = /^[0-9]+$/; // 이렇게 표기 가능 [0123456789] ==[0-9]
area2.innerHTML += "/^[0-9]+$/ : " + str.replace(regExp,"(***)") + "<br><br>"; // (***)- html 출력 결과 :
/^[0-9]+$/ : javascript jquery ajax- 처음부터 끝까지 오직 숫자, 영문자로만 이루어진 경우
regExp = /^[0-9].+[0-9]$/;
area2.innerHTML += "/^[0-9].+[0-9]$/ : " + "1231231231234".replace(regExp,"(***)") + "<br><br>"; // (***)
area2.innerHTML += "문자열+숫자/ : " + (str+"1231523").replace(regExp,"(***)") + "<br><br>"; // 변화없음
area2.innerHTML += "문자열만 : " + str.replace(regExp,"(***)") + "<br><br>"; // 변화없음- html 출력 결과 :
/^[0-9].+[0-9]$/ : (***)
문자열+숫자/ : javascript jquery ajax1231523
문자열만 : javascript jquery ajax- 시작부터 끝까지 오직 한글로 이루어진 경우(자음,모음,결함) - 힣
regExp = /^[ㄱ-ㅎㅏ-ㅣ가-힣]+$/;
area2.innerHTML += "/^[ㄱ-ㅎ|가-힣]+$/ : " + "ㄴㅇㄴ".replace(regExp,"(***)") + "<br><br>"; // (***)
area2.innerHTML += "/^[ㄱ-ㅎ|가-힣]+$/ str대입 : " + str.replace(regExp,"(***)") + "<br><br>"; // 변화없음- html 출력 결과 :
/^[ㄱ-ㅎ|가-힣]+$/ : (***)
/^[ㄱ-ㅎ|가-힣]+$/ str대입 : javascript jquery ajax# 플래그 문자
i : 대소문자를 가리지 않고 비교를 수행한다.
g : 문자열 내의 모든 패턴을 찾는다.
m : 여러줄 비교를 한다.
플래그 실행 버튼 클릭 시 RegExp 객체에 담긴 패턴을 i,g,m 조건에 따라 찾는다.
<button onclick="test2();">test2실행</button>
<div class="area" id="area2"></div><script>
function test3(){
var str = "JavaScript jQuery Ajax";
var regExp = /a/;
console.log("/a/ : " + str.replace(regExp,"(***)"));
// 결과 : /a/ : J(***)vaScript jQuery Ajax
// 첫 a 하나만 바뀜.
regExp = /a/g;
console.log("/a/ : " + str.replace(regExp,"(***)"));
// 결과 : /a/ : J(***)v(***)Script jQuery Aj(***)x
// 소문자 전부 다 변경됨
regExp = /a/ig;
console.log("/a/ : " + str.replace(regExp,"(***)"));
// 결과 : /a/ : J(***)v(***)Script jQuery (***)j(***)x
str = "JavaScript\nJquery\nAjax";
regExp = /^J/;
console.log("/^J/ : " + str.replace(regExp,"(***)"));
// 결과 : 첫 J로 시작하는것만 변경
// /^J/ : (***)avaScript
// Jquery
// Ajax
regExp = /^J/g;
console.log("/^J/ : " + str.replace(regExp,"(***)"));
// 결과 : 첫 J로 시작하는 것만 대소문자 상관없이 변경
// /^J/ : (***)avaScript
// Jquery
// Ajax
regExp = /^J/gm;
console.log("/^J/ : " + str.replace(regExp,"(***)"));
// 결과 : J로 시작하는 것 모두 대소문자 상관없이 변경
// /^J/ : (***)avaScript
// (***)query
// Ajax
}
</script>- 콘솔 출력 결과 :
# 정규표현식을 활용한 주민번호 확인
앞서 배운 정규표현식을 활용하여 주민번호를 확인한다.
<h3>정규표현식을 활용한 주민번호 확인</h3>
주민번호 : <input type="text" name="" id="pno" placeholder="-포함해서 입력">
<button onclick="test4();">주민번호 버튼</button><script>
function test4(){
var pno = document.querySelector("#pno").value;
console.log("입력된 값 : "+pno);
// 000101-3322333
// 1단계 : 6글자-7글자
// . : 개행문자를 제외한 모든문자 (영문,숫자,한글,특수문자) 중 한글자
var regExp = /^......-.......$/;
// 2단계 : 숫자여야한다.
// [0-9]6번 - [0-9]7번 이렇게 쓰면 비효율적
// /^[0-9][0-9][0-9][0-9][0-9][0-9]-[0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/
console.log(regExp.test(pno));
/*
메타문자 사용
\d : 숫자([0-9]) 와 동일
\D : 숫자를 제외한 모든 문자
\w : 영문자, 숫자, _
\W : 영문자, 숫자, _ 를 제외한 모든 문자
\s : 공백문자(띄어쓰기, 탭, 줄바꿈)
\S : 공백문자를 제외한 모든 숫자
*수량문자
+ : 1글자 이상(최소 1글자는 있어야 한다.)
* : 0글자 이상(0글자도 가능)
? : 0글자 또는 1글자만 가능
{5} : 5글자
{2,5} : 2글자 이상 5글자 이하
{2,} : 2글자 이상
{,5} : 5글자 이하
*/
// 3단계 : 성별자리에 해당하는 부분에 1,2,3,4만 들어가야 한다.
regExp = /^\d{6}-[1-4]\d{6}$/;
console.log(regExp.test(pno));
}
</script>- html 출력 결과 :
keep going on~