자바스크립트 정규표현식(JavaScript Regular Expression) HTML/JS

정규 표현식(Regular Expression) 이란? 

문자열에서 특정한 캐릭터 조합(character combination)을 찾아내기위한 패턴(pattern)입니다.
특정 문자나 문자열로 문자열을 다루는 것에 문자뿐 만이 아니고 특수 문자로 다룰 수 있고 이들을 조합하여 다룰 수 있는 조건식(pattern)을 제공하여 더 세밀한 방법으로 문자들을 검색할 수 있게 합니다.

정규 표현식(Regular Expression) 생성 방법
1. object initializers를 사용한 방법
정규표현 =/패턴설정/[i/g/gi]var re = /ab+c/i
2. RegExp 객체의 constructor function를 사용한 방법
new RegExp("패턴 설정"[, "i", | ,"g", | "gi"])var re = new RegExp("ab+c", "i")
정규 표현식(Regular Expression) 플래그 구성 요소(생략 가능)
g완전일치(발생할 모든 pattern에 대한 전역 검색)
i대/소문자 무시
gi대/소문자 무시하고 완전 일치

정규 표현식(Regular Expression) 과 함께 사용하는 함수들
MethodType설명
exec()RegExp문장에서 매치를 위해 검색을 수행하는 정규 표현식 메소드
배열을 리턴
지정된 패턴과 같은 패턴을 찾는다.
test()RegExp문장에서 매치를 위해 테스트하는 정규표현식 메소드
True 또는 False 리턴
같은 패턴이 있는지 테스트 한다.
match()String문장에서 매치를 위해 검색을 수행하는 string 메소드
배열 또는 null 문자 리턴
지정된 패턴과 동일한 패턴을 찾는다.
search()String문장에서 매치를 위해 테스트하는 string 메소드
목차나 -1 리턴
첫번째로 일치하는 부분 문자열의 위치를 반환합니다
replace()String문장에서 매치를 위해 검색을 실행 문장을 대체하는 String 메소드
지정된 패턴과 바꾼다.
split()String문장에서 매치하는 부분을 배열에 할당하는 String 메소드
지정된 패턴부분에서 문자열을 나눈다.

정규 표현식에서 사용하는 특수문자
문자설명
다음에 나오는 특수 문자를 문자열로 인식
예 : \' 시퀀스는 ""를 찾고 '/'는 "/"를 찾습니다.
^입력 문자열의 시작 위치를 찾습니다.(라인의 처음과 패턴과 찾습니다.)
가령, ^A 라고 써주면 검색하고자 하는 문장의 시작문자가 A인지를 검사하는 것입니다.
$입력 문자열의 끝 위치를 찾습니다.(라인의 끝과 패턴과 찾습니다.)
가령, $A 라고 써주면 검색하고자 하는 문장의 마지막문자가 A인지를 검사하는 것입니다.
*0개 이상의 문자와 찾습니다.( 모든것이라는 의미 ==> {0,} 같은 의미 )
예 : "cg*"는 "c", "cginjs" 등입니다.
+1개 이상의 문자와 찾습니다.( {1,} 같은 의미임. )
예 : "cg+"는 "cg", "cginjs" 등이지만 "c"는 아닙니다.
?0 또는 1개의 문자 의미.( {0,1} 같은 의미임. )
예 : " C?j" 라면 C라는 문자와 j라는 문자사이에 문자가 0개 또는 1개 가 들어갈 수 있다는 말입니다.
      Cj, Cnj, Cgj등과 같은..
."n"을 제외한 모든 단일 문자를 찾습니다.
"n"을 포함한 모든 문자를 찾으려면 '[.n]' 패턴을 사용하십시오.
()한번 match를 수행해서 나온 결과를 기억함.
예 : /(cnj)/ 는 cnj라는 단어를 검색한 후, 그 단어를 배열등과 같은 저장장소에 남겨두어 나중에 다시 호출할 수 있도록 합니다.
|OR
{n}정확히 n개의 문자(n은 음이 아닌 정수)
예: a{2} 는 a 문자 두 개, 즉, aa를 의미합니다.
{n,}n정확히 n개 찾습니다.(n,음이 아닌 정수)
예 : "c{2}"는 "cnj"의 "c"는 찾지 않지만 "bcccccccccf"의 모든 c는 찾습니다.
{n,m}최소 n개, 최대 m개 찾습니다.(n은 음이 아닌 정수)
예 : "b{1,4}"은 "bcccccccccf"의 처음 네 개의 c를 찾습니다.
쉼표와 숫자 사이에는 공백을 넣을 수 없습니다.
[xyz]괄호 안의 문자 중 하나를 찾습니다.(문자들의 set를 의미)
가령, [a-z]라면 a부터 z까지의 모든 문자와 찾습니다.하는 것으로 []안의 -는 범위를 나타냅니다.
괄호 안의 문자 중 하나를 찾습니다.
예:, "[abc]"는 "cnj"의 "c"를 찾습니다.
[^xyz]제외 문자 집합입니다.(네가티브(-) 캐릭터 셋)
괄호 밖의 문자 중 하나를 찾습니다.
예 : "[^abc]"는 "acn"의 "n"를 찾습니다.
x|yx 또는 y를 찾습니다.
예 : "c|cginjs"는 "c" 또는 "cginjs"를 찾습니다.
[a-z]문자 범위입니다.(지정한 범위 안의 문자를 찾습니다)
예 : "[a-z]"는 "a"부터 "z" 사이의 모든 소문자를 찾습니다.
[^a-z]제외 문자 범위입니다(지정된 범위 밖의 문자를 찾습니다)
예 : "[^a-z]"는 "a"부터 "z" 사이에 없는 모든 문자를 찾습니다.
[b]백스페이스와 찾습니다.
b단어와 공백 사이의 위치를 찾습니다.(단어의 경계)
예 : "erb"는 "never"의 "er"는 찾지만 "verb"의 "er"는 찾지 않습니다.
B단어의 비경계를 찾습니다.
예 : "erB"는 "verb"의 "er"는 찾지만 "never"의 "er"는 찾지 않습니다.
cXX 가 나타내는 제어 문자를 찾습니다.(control 문자와 찾습니다)
예 : cM은 Control-M 즉, 캐리지 리턴 문자를 찾습니다.
      x 값은 A-Z 또는 a-z의 범위 안에 있어야 합니다.
      그렇지 않으면 c는 리터럴 "c" 문자로 간주됩니다.
d0부터 9까지의 아라비아 숫자와 찾습니다.. [0-9]과 같은 의미
D비숫자 문자를 찾습니다. [^0-9]와 같습니다.
f폼피드 문자(form-feed)를 찾습니다.(x0c와 cL과 같은 의미)
nlinefeed(줄 바꿈 문자)를 찾습니다.(x0a와 cJ과 같은 의미)
r캐리지 리턴 문자를 찾습니다(x0d와 cM과 같은 의미)
s공백, 탭, 폼피드 등의 공백을 찾습니다.( [ tnrfv]과 같은 의미)
Ss가 아닌 문자(공백이 아닌 문자)를 찾습니다. ( [^ tnrfv]과 같은 의미)
t탭 문자를 찾습니다. (x09와 cI와 같은 의미)
v수직 탭 문자를 찾습니다.(x0b와 cK와 같은 의미)
w밑줄을 포함한 모든 단어 문자를 찾습니다.( "[A-Za-z0-9_]"와 같은 의미)
W문자가 아닌 요소,
즉 % 등과 같은 특수 문자를 의미함( "[^A-Za-z0-9_]"와 같은 의미)
nn은 마지막 일치하는 문장
xnn을 찾습니다. 여기서 n은 16진수 이스케이프 값입니다.
16진수 이스케이프 값은 정확히 두 자리여야 합니다.
예 : 'x41'은 "A"를 찾고 'x041'은 'x04'와 "1"과 같습니다.
       정규식에서 ASCII 코드를 사용할 수 있습니다.
numnum을 찾습니다.(num은 양의 정수)
캡처한 문자열에 대한 역참조입니다.
예 : '(.)1'은 연속적으로 나오는 동일한 문자 두 개를 찾습니다.
nm8진수 이스케이프 값이나 역참조를 나타냅니다.
nm 앞에 최소한 nm개의 캡처된 부분식이 나왔다면 nm은 역참조입니다.
nm 앞에 최소한 n개의 캡처가 나왔다면 n은 역참조이고 뒤에는 리터럴 m이 옵니다.
이 두 경우가 아닐 때 n과 m이 0에서 7 사이의 8진수이면 nm은 8진수 이스케이프 값 nm을 찾습니다.
nmln이 0에서 3 사이의 8진수이고 m과 l이 0에서 7 사이의 8진수면 8진수 이스케이프 값 nml을 찾습니다.
unn은 4 자리의 16진수로 표현된 유니코드 문자입니다.
예 : u00A9는 저작권 기호(ⓒ)를 찾습니다.
ooctal
xhex
8(octal)진수, 10(hex)진수 값

정규 표현식에서 사용하는 property
속성설명
global완전 일치
ignoreCase대문자 소문자 무시
lastIndex다음 패턴조회를 시작하는 위치
source조회시킬 패턴
input검색 문자열의 설정, 변경($_로도 가능)
multiline줄바구기 코드를 무시할지 여부($_로도 가능)
참(무시하지 않는다), 거짓(무시한다.)로 설정
lastMatch패턴 조회한 최후의 문자($&로도 가능)
lastParen패턴 조회한 최후의 substring($+로도 가능)
leftContext패턴 조회한 값의 앞의 문자($¥Q로도 가능)
rightContext패턴 조회한 값의 다음 문자($'로도 가능)
$1~$9패턴 조회한 것의 일부를 저장한다.(9개까지

정규 표현식(Regular Expression) 사용예제 1

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. function cnj_regexp() {
  4. // 'c' 가 있는 문자열이 있으면 TRUE (대/소문자 구분)
  5. var cnj_re = /c/
  6. var cnj_ment = "'c' 가 있는 문자열이 있으면 TRUE (대/소문자 구분)nn변수 : " + cnj_re;
  7. if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
  8. alert(cnj_ment + "nn문자열이 있군요(true)");
  9. } else {
  10. alert(cnj_ment + "nn문자열이 없군요(fail)");
  11. }
  12. }
  13. //-->
  14. </SCRIPT>
  15. <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 2

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. function cnj_regexp() {
  4. // 'CGINJS' 가 있는 문자열이 있으면 TRUE (대/소문자 구분)
  5. var cnj_re = /CGINJS/
  6. var cnj_ment = "'CGINJS' 가 있는 문자열이 있으면 TRUE (대/소문자 구분)nn변수 : " + cnj_re;
  7. if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
  8. alert(cnj_ment + "nn문자열이 있군요(true)");
  9. } else {
  10. alert(cnj_ment + "nn문자열이 없군요(fail)");
  11. }
  12. }
  13. //-->
  14. </SCRIPT>
  15. <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()"> 


정규 표현식(Regular Expression) 사용예제 3

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. function cnj_regexp() {
  4. // 대소문자 구분없이 해당 문자 또는 문자열을 검색할 경우 끝에 i 를 붙인다.
  5. // 'cginjs' 또는'CGINJS' 가 있는 문자열 모두가 있으면 TRUE (대/소문자 구분)
  6. var cnj_re = /CGINJS/i
  7. var cnj_ment = "'cginjs' 또는 'CGINJS' 가 있는 문자열 모두가 있으면 TRUE (대/소문자 구분)nn변수 : " + cnj_re;
  8. if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
  9. alert(cnj_ment + "nn문자열이 있군요(true)");
  10. } else {
  11. alert(cnj_ment + "nn문자열이 없군요(fail)");
  12. }
  13. }
  14. //-->
  15. </SCRIPT>
  16. <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()"> 

정규 표현식(Regular Expression) 사용예제 4

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. function cnj_regexp() {
  4. // 여러개의 이어지는 내용들을 검색할 경우는 '-' 를 넣어 표현한다.
  5. // 'a' 에서 'z' 까지중 하나만 있으면 모두가 TRUE (대소문자 구분)
  6. var cnj_re = /[a-z]/
  7. var cnj_ment = "'a' 에서 'z' 까지중 하나만 있으면 모두가 TRUE (대소문자 구분)nn변수 : " + cnj_re;
  8. if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
  9. alert(cnj_ment + "nn문자열이 있군요(true)");
  10. } else {
  11. alert(cnj_ment + "nn문자열이 없군요(fail)");
  12. }
  13. }
  14. //-->
  15. </SCRIPT>
  16. <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 5

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. function cnj_regexp() {
  4. // | 는 OR 같은 의미
  5. // 여러가지의 문자 또는 문자열을 검색할 경우 '|' 이용
  6. // 'x' 또는 'y' 또는 'z' 가 있는 문자열 모두가 TRUE (대소문자 구분)
  7. var cnj_re = /x|y|z/
  8. var cnj_ment = "'x' 또는 'y' 또는 'z' 가 있는 문자열 모두가 TRUE (대소문자 구분)nn변수 : " + cnj_re;
  9. if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
  10. alert(cnj_ment + "nn문자열이 있군요(true)");
  11. } else {
  12. alert(cnj_ment + "nn문자열이 없군요(fail)");
  13. }
  14. }
  15. //-->
  16. </SCRIPT>
  17. <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()"> 

정규 표현식(Regular Expression) 사용예제 6

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. function cnj_regexp() {
  4. // | 는 OR 같은 의미
  5. // 여러가지의 문자 또는 문자열을 검색할 경우 '|' 이용
  6. // 'a' 에서 'z' 까지 또는 '0' 에서 '9' 까지중 하나만 있으면 모두가 TRUE (대소문자 구분)
  7. var cnj_re = /[a-z]|[0-9]/
  8. var cnj_ment = "'a' 에서 'z' 까지 또는 '0' 에서 '9' 까지중 하나만 있으면 모두가 TRUE (대소문자 구분)nn변수 : " + cnj_re;
  9. if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
  10. alert(cnj_ment + "nn문자열이 있군요(true)");
  11. } else {
  12. alert(cnj_ment + "nn문자열이 없군요(fail)");
  13. }
  14. }
  15. //-->
  16. </SCRIPT>
  17. <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 7

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. function cnj_regexp() {
  4. // 해당 문자또는 문자열이 없는 경우를 검색할 경우 브래킷('[', ']') 안에 '^' 를 넣는다.
  5. // 'a' 에서 'z' 까지의 문자가 아닌 문자가 있을 경우 TRUE (대소문자 구분)
  6. var cnj_re = /[^a-z]/
  7. var cnj_ment = "'a' 에서 'z' 까지의 문자가 아닌 문자가 있을 경우 TRUE (대소문자 구분)nn변수 : " + cnj_re;
  8. if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
  9. alert(cnj_ment + "nn문자열이 있군요(true)");
  10. } else {
  11. alert(cnj_ment + "nn문자열이 없군요(fail)");
  12. }
  13. }
  14. //-->
  15. </SCRIPT>
  16. <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()"> 

정규 표현식(Regular Expression) 사용예제 8

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. function cnj_regexp() {
  4. // 문자열의 첫번째 글자가 일치해야할 경우는 '^' 를 브래킷('[', ']') 밖에 넣는다
  5. // 'a' 에서 'z' 까지의 문자로 시작하는 문자열일 겨우 TRUE (대소문자 구분)
  6. var cnj_re = /^[a-z]/
  7. var cnj_ment = "'a' 에서 'z' 까지의 문자로 시작하는 문자열일 겨우 TRUE (대소문자 구분)nn변수 : " + cnj_re;
  8. if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
  9. alert(cnj_ment + "nn문자열이 있군요(true)");
  10. } else {
  11. alert(cnj_ment + "nn문자열이 없군요(fail)");
  12. }
  13. }
  14. //-->
  15. </SCRIPT>
  16. <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

정규 표현식(Regular Expression) 사용예제 9

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. function cnj_regexp() {
  4. // 문자열의 끝쪽 글자가 해당 문자 또는 문자열과 일치해야할 경우는 '$' 를 넣는다.
  5. // 'a' 에서 'z' 까지의 문자로 끝나는 문자열일 겨우 TRUE (대소문자 구분)
  6. var cnj_re = /[a-z]$/
  7. var cnj_ment = "'a' 에서 'z' 까지의 문자로 끝나는 문자열일 겨우 TRUE (대소문자 구분)nn변수 : " + cnj_re;
  8. if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
  9. alert(cnj_ment + "nn문자열이 있군요(true)");
  10. } else {
  11. alert(cnj_ment + "nn문자열이 없군요(fail)");
  12. }
  13. }
  14. //-->
  15. </SCRIPT>
  16. <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()">

 정규 표현식(Regular Expression) 사용예제 10

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. function cnj_regexp() {
  4. // 특수문자('', '^', '$', '*', '+', '?', '.', '(', ')', '|', '{', '}', '[', ']')를 검색할 경우는 '' 를 넣는다.
  5. // '' 가 있는 문자열일 겨우 TRUE (대소문자 구분)
  6. var cnj_re = /\/
  7. var cnj_ment = "'' 가 있는 문자열일 겨우 TRUE (대소문자 구분)nn변수 : " + cnj_re;
  8. if (cnj_re.test("When Cgi Met Javascript = CginJs.Com") == true) {
  9. alert(cnj_ment + "nn문자열이 있군요(true)");
  10. } else {
  11. alert(cnj_ment + "nn문자열이 없군요(fail)");
  12. }
  13. }
  14. //-->
  15. </SCRIPT>
  16. <input type="button" name="cnj_text" value="확인" omClick="cnj_regexp()"> 



메모장