JavaScript(정규표현식)

Front/Js

JavaScript(정규표현식)

devel0per 2022. 9. 28. 12:44

정규표현식

정규표현식

정규표현식(REGEX / REGEXP : Regular Expression)이란 특정 패턴을 가진 문자열을 찾거나 또는 찾아서 변경할때 사용하는 형식 언어 정규표현식을 이용하면 문자열에 대해 특정 패턴 조건검사 시 또는 치환(변경)시 복잡한 조건을 제시할 필요 없이 간단하게 처리가 가능하다. 자바스크립트 뿐만 아니라 자바나 오라클 등등 다른 언어에서도 사용이 가능하다.

정규표현식 객체 생성 방법

생성자 구문으로 작성

var regExp = new RegExp("script"); //방법 1

정규식 변수를 선언

var regExp2 = /script/; //방법 2

문자열과 비교하기

RegExp 객체에서 제공하는 메소드 (정규식,메소드(문자열))

정규식.test(문자열) : 문자열에서 정규식값과 일치하는 값이 있으면 true 없으면 false를 반환
정규식.exec(문자열) : 문자열에서 정규식값과 일치하는 값이 있으면 처음 매칭된 문자열을 반환 없으면 null 반환.

String 객체에서 제공하는 메소드 (문자열,메소드(정규식))

문자열.match(정규식) : 문자열에서 정규식 값과 일치하는 값을 찾아서 반환
문자열.search(정규식) : 문자열에서 정규식 값과 일치하는 값의 시작인덱스 값을 반환 없으면 -1을 반환
문자열.replace(정규식,바꿀값) : 문자열에서 정규식 값과 일치하는 첫번째 부분을 바꿀값으로 변경해서 반환
문자열.split(정규식) : 정규식에 지정된 값을 구분자로 해서 쪼개진 값들이 담겨있는 배열 반환

비교할 문자열 생성

var str1 = "javascript jquery ajax";
var str2 = "java oracle html css";

정규식 메소드

area1.innerHTML+="regExp.test(str1) : "+regExp.test(str1)+"<br>";
area1.innerHTML+="regExp.test(str2) : "+regExp.test(str2)+"<br>";

area1.innerHTML+="regExp.exec(str1) : "+regExp.exec(str1)+"<br>";
area1.innerHTML+="regExp.exec(str2) : "+regExp.exec(str2)+"<br>";

문자열 메소드

area1.innerHTML+="str1.math(regExp) : "+str1.match(regExp) +"<br>";
area1.innerHTML+="str1.search(regExp) : "+str1.search(regExp) +"<br>";
area1.innerHTML+="str1.replace(regExp,'스크립트') : "+str1.replace(regExp,'스크립트') +"<br>";
area1.innerHTML+="str1.split(regExp) : "+str1.split(regExp)+"<br>";

메타문자

메타 문자를 이용해서 정규식으로 검색 조건으로 삼을 특정패턴을 제시, 문자열이 해당 정규식으로 제시한 패턴에 만족하는지 test()를 통해 검사하거나 replace()를 이용해서 치환한다.

비교할 문자열

var str = "javascript jquery ajax"; //비교할 문자열

메타문자가 없는 경우

//메타문자 없는 경우
var regExp = /a/;

문자열과 비교

area2.innerHTML+="/a/ : "+regExp.test(str)+"<br>";
area2.innerHTML+="/a/ : "+str.replace(regExp,"(***)")+"<br>";
//기본적으로 replace는 일치하는 첫번째 값만 치환한다.

★ 결과(regExp과 일치하는 값과 true, replace는 일치하는 첫번째 값만 치환(***))

/a/ : true
/a/ : j(***)vascript jquery ajax

메타문자가 있는 경우(^ : 시작을 의미한다.)

//메타문자 있는 경우
//1. ^ : 시작을 의미한다.
regExp = /^j/; //소문자 j로 시작하는
area2.innerHTML+="/^j : "+regExp.test(str)+"<br>";
area2.innerHTML+="/^j : "+str.replace(regExp,"(***)")+"<br>";

★ 결과

/^j : true
/^j : (***)avascript jquery ajax

메타문자가 있는 경우([] : [] 내의 문자 중 하나라도 존재할 경우를 의미한다.)

//2. [] : []내의 문자 중 하나라도 존재할 경우를 의미한다.
regExp=/[abc]/; //특정 문자열중에 a또는 b또는 c가 하나라도 존재할경우
area2.innerHTML+="/[abc]/ : "+regExp.test(str)+"<br>";
area2.innerHTML+="/[abc]/ : "+str.replace(regExp,"(***)")+"<br>";

★ 결과

/[abc]/ : true
/[abc]/ : j(***)vascript jquery ajax

메타문자가 있는 경우([]와 ^의 동시 사용)

//1번과 2번을 세트로 묶어서
regExp=/^[jsa]/; //시작값이 j또는 s또는 a이냐
area2.innerHTML+="/^[jsa]/ : "+regExp.test(str)+"<br>";
area2.innerHTML+="/^[jsa]/ : "+str.replace(regExp,"(***)")+"<br>";

★ 결과

/^[jsa]/ : true
/^[jsa]/ : (***)avascript jquery ajax

메타문자가 있는 경우($ : 끝을 의미)

 //3. $ : 끝을 의미
regExp=/x$/; //x로 끝나는지
area2.innerHTML+="/x$/ : "+regExp.test(str)+"<br>";
area2.innerHTML+="/x$/ : "+str.replace(regExp,"(***)")+"<br>";

★ 결과

/x$/ : true
/x$/ : javascript jquery aja(***)

메타문자가 있는 경우(^와 $의 동시 사용)

//시작이 j고 끝이 x인지를 확인
regExp=/^jx$/;
area2.innerHTML+="/^jx$/ : "+regExp.test(str)+"<br>"; //나머지부분에 대한 처리가 없기때문에 만족하는 문자열은 jx뿐
area2.innerHTML+="/^jx$/ : "+str.replace(regExp,"(***)")+"<br>";

★ 결과

/^jx$/ : false
/^jx$/ : javascript jquery ajax

메타문자가 있는 경우(. ☞개행문자를 제외한 모든 문자 + ☞ 한글자 이상 .+ ☞ 어떤 문자가 되었던 한글자 이상인 경우)

 //4. . : 개행문자를 제외한 모든 문자 (영문자,숫자,한글,특수문자)
 //5. + : 한글자 이상 (0글자는 안된다)
// .+ : 어떤 문자가 되었던 한글자 이상인 경우
regExp=/^j.+x$/;
area2.innerHTML+="/^j.+x$/ : "+regExp.test(str)+"<br>";
area2.innerHTML+="/^j.+x$/ : "+str.replace(regExp,"(***)")+"<br>";

★ 결과

/^j.+x$/ : true
/^j.+x$/ : (***)

메타문자가 있는 경우(^ [] + $ 의 사용)

//시작부터 끝까지 오로지 숫자만으로 이루어진 경우
//숫자의 개수는 상관없고 적어도 한글자는 있어야한다.
regExp=/^[0-9]+$/; //해당목록에 있는것들 중 하나라도 존재할 경우 + 한글자라도 있어야하는 경우
area2.innerHTML+="/^[0-9]+$/ 숫자만: "+regExp.test("22323232")+"<br>";
area2.innerHTML+="/^[0-9]+$/ 숫자+문자+특문: "+regExp.test("23424as@asd21")+"<br>";

★ 결과

/^[0-9]+$/ 숫자만: true
/^[0-9]+$/ 숫자+문자+특문: false

메타문자가 있는 경우(시작부터 끝까지 오로지 영문 대소문자로만 이루어진경우)

//시작부터 끝까지 오로지 영문 대소문자로만 이루어진 경우
//개수 상관X 한글자는 적어도 있어야함
regExp=/^[a-zA-Z]+$/;
area2.innerHTML+="/^[a-zA-Z]+$/ :"+regExp.test("apple")+"<br>";
area2.innerHTML+="/^[a-zA-Z]+$/ :"+regExp.test("iphone12")+"<br>";

★ 결과

/^[a-zA-Z]+$/ :true
/^[a-zA-Z]+$/ :false

메타문자가 있는 경우(시작부터 끝까지 영문대소문자 + 숫자로만 이루어진 경우)

//시작부터 끝까지 영문대소문자+숫자로만 이루어진 경우
regExp=/^[a-zA-Z0-9]+$/;
area2.innerHTML+="/^[a-zA-Z0-9]+$/ :"+regExp.test("appLe")+"<br>";
area2.innerHTML+="/^[a-zA-Z0-9]+$/ :"+regExp.test("iphOne12")+"<br>";

★ 결과

/^[a-zA-Z0-9]+$/ :true
/^[a-zA-Z0-9]+$/ :true

메타문자가 있는 경우(시작부터 끝까지 오로지 한글로만 이루어진 경우)

//시작부터 끝까지 오로지 한글로만 이루어진 경우 가-힣 ㄱ-ㅎ ㅏ-ㅣ자음 모음까지
regExp=/^[가-힣ㄱ-하-ㅣ]+$/;
area2.innerHTML+="/^[가-힣ㄱ-하-ㅣ]+$/ :"+regExp.test("오늘은저녁을뭐먹짛ㅎㅎ")+"<br>";
area2.innerHTML+="/^[가-힣ㄱ-하-ㅣ]+$/ :"+regExp.test("야ㅑㅑㅑㅑㅑ호")+"<br>";

★ 결과

/^[가-힣ㄱ-하-ㅣ]+$/ :true
/^[가-힣ㄱ-하-ㅣ]+$/ :true

추가적인 메타문자

\d : 숫자(즉, [0-9]와 동일)
\D : 숫자를 제외한 모든 문자
\w : 영문자, 숫자, _
\W : 영문자, 숫자, _을 제외한 모든 문자
\s : 공백문자 (띄어쓰기, 탭, 줄바꿈)
\S : 공백문자를 제외한 모든 숫자

수량문자

+ : 1글자 이상(적어도 한글자는 있어야함)
* : 0글자 이상(0글자여도됨)
? : 0글자 또는 1글자(2글자 이상은 불가능)
{5} : 5글자
{2,5} : 2글자 이상 5글자 이하
{2,} : 2글자 이상
{,5} : 5글자 이하

플래그 문자

i : 대소문자를 가리지 않고 비교를 수행하겠다.
g : 문자열 내의 모든 패턴을 찾는다
m : 여러줄 비교를 수행하겠다.

<button onclick="test3();">확인</button>
        <script>
            function test3(){
                var str = "javaScript jQuery Ajax";

                var regExp = /a/;
                console.log("/a/ : "+str.replace(regExp,"(***)"));

                //g추가
                var regExp=/a/g;
                console.log("/a/g : "+str.replace(regExp,"(***)"));

                //ig추가
                var regExp = /a/ig;
                console.log("/a/ig : "+str.replace(regExp,"(***)"));

                str = "JavaScript\nJQuery\nAjax";

                regExp=/^J/g; //여러줄일경우에는 개행된 줄에 g가 적용되지 않는다
                console.log("/^J/ : "+str.replace(regExp,"(***)"));

                regExp=/^J/gm; //g에 m도 추가
                console.log("/^J/ : "+str.replace(regExp,"(***)"));
            }
        </script>

★ 결과