1. 정규표현식(Regular Expresstions)이란?
- 정규표현식이란 문자열 검색 패턴을 형성하는 일련의 문자를 의미합니다.
- 검색 패턴은 텍스트 검색 및 텍스트 바꾸는 작업에 사용할 수 있습니다.
- 간단한 문자 검색부터 이메일, 아이디, 패스워드 검사 등의 복잡한 문자 일치 기능 등을 검색 패턴으로 빠르게 수행할 수 있습니다.
1) 정규표현식의 역할 수행
- 문자 검색(search)
- 문자 변경(replace)
- 문자 추출(extract)
2) 정규표현식 테스트 사이트
regex101: build, test, and debug regex
Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java. Features a regex quiz & library.
regex101.com
RegExr: Learn, Build, & Test RegEx
RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).
regexr.com
Regexper
regexper.com
Regex Tester - Javascript, PCRE, PHP
RegexPal requires a modern browser. Please update your browser to the latest version and try again.
www.regexpal.com
- 네개 정도 추천해보았는데 사용하기 편리한 사이트를 사용하면 될 것 같습니다.
2. 자바스크립트 정규 표현식 생성
1) 변수식 선언방식
## 문법
var 변수명 = 표현식/플래그;- 플래그는 생략될 수 있습니다.
- 플래그란 표현식의 옵션으로 표현식으로 검색하려는 문자 패턴에 추가적인 옵션을 넣어 원하는 문자 검색 결과를 반환하도록 설정합니다.
## 코드 예시
var regExp = /^abc/gi;
2) 객체 선언방식(생성자 함수 사용)
## 문법
var 변수명 = new RegExp(표현식,플래그);- 플래그는 생략될 수 있습니다.
## 코드 예시
var regExp = new RegExp("^abc","gi");
3. 자바스크립트 정규표현식 속성과 메서드
1) 자바스크립트에서 제공하는 다양한 속성(properties) 종류
| 속성종류 | 설명 |
| flags | 플래그를 문자열로 반환 ex) /^abc/gi.flags |
| source | 표현식을 문자열로 반환 ex) /^abc/gi.source |
| global | 플래그 g 여부를 불표현식으로 반환 ex) /^abc/gi.global |
| ignoreCase | 플래그 i 여부를 불표현식으로 반환 ex) /^abc/gi.ignoreCase |
| multiline | 플래그 m 여부를 불표현식으로 반환 ex) /^abc/gi.multiline |
| sticky | 플래그 y 여부를 불표현식으로 반환 ex) /^abc/gi.sticky |
| unicode | 플래그 u 여부를 불표현식으로 반환 ex) /^abc/gi.unicode |
2) 자바스크립트에서 제공하는 다양한 메서드(method) 종류
- 정규표현식을 결과적으로 문자열이기 때문에 String메서드를 사용합니다.
| 메서드 종류 | 문법 | 설명 |
| exec( ) | 정규식.exec(문자열) | 일치하는 하나의 정보 반환 |
| test( ) | 정규식.test(문자열) | 일치 여부 반환 |
| match( ) | 문자열.match(정규식) | 일치하는 문자열을 배열 반환 |
| search( ) | 문자열.search(정규식) | 일치하는 문자열의 인덱스번호를 반환 |
| replace( ) | 문자열.replace(정규식,대체문자) | 일치하는 문자열을 대체하고 문자열 반환 |
| split( ) | 문자열.split(정규식) | 일치하는 문자열을 분할하여 배열로 반환 |
| toString( ) | 생성자정규식.toString() | 생성자 함수 방식의 정규식을 변수 방식의 문자열로 반환 |
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - 정규표현식</title>
<script>
var test = '꼭꼭 숨어라 모두모두 숨어라 꼭꼭 숨어라 빨리빨리 숨어라';
var execTest = /숨어라/.exec(test);
console.log(execTest);
var testTest = /숨어라/.test(test);
console.log(testTest);
var searchTest = test.search(/숨어라/);
console.log(searchTest);
</script>
</head>
<body>
</body>
</html>
## 코드 결과
- exec() 메서드는 일치하는 정보가 있어서 정보 전체를 반환합니다.
- test() 메서드는 일치하는 정보가 있어서 true를 반환합니다.
- search() 메서드는 일치하는 첫번째 글자의 인덱스번호인 3을 반환합니다.
4. 플래그
- 플래그는 표현식의 옵션으로 표현식으로 검색하려는 문자 패턴에 추가적인 옵션을 넣어 문자 검색 결과를 반환하도록 합니다.
1) 플래그(flags) 종류
| 플래그종류 | 설명 |
| g | 모든 문자와 여러 줄 일치(global) |
| i | 영어 대소문자를 구분하지 않고 일치(ignore case) |
| m | 여러 줄 일치(multi line) |
| u | 유니코드 |
| y | lastIndex 속성으로 지정된 인덱스에서만 1회 일치(sticky) |
2) g(global)
- g는 모든 문자와 여러 줄 일치하는 경우입니다. 플래그 g는 [모든 문자를 검색]하겠다는 의미로 사용됩니다.
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - 정규표현식</title>
<script>
var test = '꼭꼭 숨어라 모두모두 숨어라 꼭꼭 숨어라 빨리빨리 숨어라';
var noGlobal = test.match(/숨어라/);
var yesGlobal = test.match(/숨어라/g);
console.log(noGlobal);
console.log(yesGlobal);
</script>
</head>
<body>
</body>
</html>- match()메서드는 일치하는 문자열의 배열을 반환합니다.
## 코드 결과
- g 플래그를 사용하지 않은 첫번째 콘솔은 일치하는 문자열 전체를 반환하여 보여줍니다.
- g 플래그를 사용한 두번째 콘솔은 일치하는 문자열만 배열에 담아 반환하여 [숨어라]만 반환합니다.
3) i(ignore Case)
- i 는 영어 대소문자를 구분하지 않고 일치하는 것은 반환합니다.
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - 정규표현식</title>
<script>
var test = 'Twinkle, twinkle little star. How I wonder what you are. Up above the world so high. Like a diamond in the sky. Twinkle, twinkle little star. How I wonder what you are';
var noCase = test.match(/twinkle/g);
var yesCase = test.match(/twinkle/ig);
console.log(noCase);
console.log(yesCase);
</script>
</head>
<body>
</body>
</html>- 한글로는 불가능한 예제이므로 [반짝반짝 작은별]이라는 동요의 가사를 test변수에 담아봤습니다.
- 첫번째는 [twinkle]로 소문자로 적혀 있어야 찾습니다.
- 두번째는 대소문자를 무시하고 철자만 맞으면 찾습니다.
## 코드 결과
- 첫번째 콘솔은 소문자로 시작하는 것만 찾으므로 2개만 찾았습니다.
- 두번째 콘솔은 대소문자 구분하지 않고 찾으므로 4개를 찾았습니다.
4) m(multi line)
- m 는 여러줄 일치하는지 확인하는 플래그 속성입니다.
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - 정규표현식</title>
<script>
var test = `Twinkle, twinkle little star.
How I wonder what you are. Up above the world so high.
Like a diamond in the sky.
Twinkle, twinkle little star.
How I wonder what you are.`;
var noMulti = test.match(/$/g);
var yesMulti = test.match(/$/gm);
console.log(noMulti);
console.log(yesMulti);
</script>
</head>
<body>
</body>
</html>- 기본적으로 따옴표에 적은 문자열은 엔터를 치면 오류가 납니다.
- 그래서 키보드의 숫자 1 옆의 키인 [ ` ]를 작성하면 문자열에 엔터를 칠수 있으므로 그렇게 작성했습니다.
- 표현식에 작성한 [ $ ]는 줄(Line)의 끝에서 일치하는 것을 의미합니다. 그 뒤에 아무말도 쓰지 않았기 때문에 공백을 뜻합니다.
## 코드 결과
- 첫번째 콘솔에서는 일치하는 것만 찾기 때문에 공백을 한개 찾았습니다.
- 두번째 콘솔에서는 여러줄 마지막을 찾기 때문에 다섯줄로 처리된만큼 5개를 반환합니다.
5. 정규식 패턴(표현식)
- 플래그는 표현식의 옵션으로 표현식으로 검색하려는 문자 패턴에 추가적인 옵션을 넣어 문자 검색 결과를 반환하도록 합니다.
1) 정규식 패턴 종류
- 정규식 패턴의 종류는 많기 때문에 다 외울수는 없습니다. 표를 참조하여 테스트페이지(https://regex101.com/)에서 테스트해보면서 맞춰나가보세요!
| 패턴종류 | 설명 |
| ^ | 줄(line)의 시작에서 일치 |
| $ | 줄(line)의 끝에서 일치 |
| . | 임의의 한 문자와 일치 |
| a|b | a 또는 b와 일치, 인덱스가 작은 것을 우선 반환 |
| * | 0회 이상 연속으로 반복되는 문자와 가능한 많이 일치. {0,}와 동일 |
| *? | 0회 이상 연속으로 반복되는 문자와 가능한 적게 일치, {0}와 동일 |
| + | 1회 이상 연속으로 반복되는 문자에 가능한 많이 일치, {1,}와 동일 |
| +? | 1회 이상 연속으로 반복되는 문자에 가능한 적게 일치, {1}와 동일 |
| ? | 없거나 1회 가능한 많이 일치 |
| ?? | 없거나 1회 가능한 적게 일치 |
| {n} | n개 연속 일치 |
| {n,} | n개 이상 연속일치 |
| {n,m} | n개 이상 m개 이하(n~m개) 연속 일치 |
| {n,m}? | n개 이상 m개 이하(n~m개) 연속 중 가능한 적은 n개 연속 일치, {n}와 동일 |
| ( ) | 캡쳐할 그룹 |
| (?<>) | 캡쳐 그룹 이름 지정 ex) /(?<name>pattern)/ - ES2018이상 가능 |
| \1~9 | 정규식 내 캡처된 값 참조 |
| (?:) | 캡쳐하지 않은 그룹 |
| (?=) | 앞쪽일치 ex) /ab(?=c)/ |
| (?!) | 부정앞쪽일치 ex) /ab(?!c)/ |
| (?<=) | 뒤쪽일치 ex) /(?<=ab)c/ - ES2018이상 가능 |
| (?<!) | 부정 뒤쪽 일치 ex) /(?<!ab)c/ - ES2018이상 가능 |
| [abc] | a 또는 b 또는 c와 일치, [ ]안에서 특스문자는 특수문자가 아니라 문자로 받아들여짐 |
| [a-z] | a부터 z사이의 글자 구간에 일치(영어 소문자) |
| [A-Z] | A부터 Z사이의 글자 구간에 일차(영어 대문자) |
| [0-9] | 0부터 9사이의 문자 구간에 일치(숫자) |
| [가-힣] | 가부터 힣 사이의 문자 구간에 일치(한글과 일치) |
| [^abc] | a 또는 b 또는 c가 아닌 나머지 문자에 일치(부정) |
| \ | 이스케이프 문자, /\.\?\/\$\^/ |
| \b | 63개 문자(영어 대소문자 52개 + 숫자 10개 + [ _ ])가 아닌 나머지 문자에 일치하는 경계 |
| \B | 63개 문자에 일차히는 경계 |
| \d | 숫자에 일치 |
| \D | 숫자가 아닌 문자에 일치 |
| \p{ } | 유니코드 속성 집합에 맞는 문자에 일치 /\p{Emoji}/u - ES2018이상에 적용 |
| \P{ } | 유니코드 속성 집합에 맞지 않는 문자에 일치, /\p{Uppercase}/u - ES2018이상에 적용 |
| \s | 공백(space, tab 등)에 일치 |
| \S | 공백이 아닌 문자에 일치 |
| \w | 63개 문자에 일치 |
| \W | 63개 문자가 아닌 나머지 문자에 일치 |
| \x | 16진수 문자에 일치, /\x61/는 a에 일치 |
| \0 | 8진수 문자에 일치, /\141/은 a에 일치 |
| \u | 유니코드(Unicode) 문자에 일치, /\u0061/는 a에 일치 |
| \c | 제어(Control) 문자에 일치 |
| \f | 폼 피드(FF, U+000C) 문자에 일치 |
| \n | 줄 바꿈(LF, U+000A) 문자에 일치 |
| \r | 캐리지 리턴(CR, U+000D) 문자에 일치 |
| \t | 탭 (U+0009) 문자에 일치 |
| $` | 문자 대체(replace) 시 일치한 문자 이전 값 참조 |
| $' | 문자 대체(replace) 시 일치한 문자 이후 값 참조 |
| $+ | 문자 대체(replace) 시 마지막으로 캡처된 값 참조 |
| $& | 문자 대체(replace) 시 일치한 문자 결과 전체 참조 |
| $_ | 문자 대체(replace) 시 입력(input)된 문자 전체 참조 |
| $1~9 | 문자 대체(replace) 시 캡처(Capture)된 값 참조 |
2) [ ] 관련 정규식 패턴
- 대괄호는 문자 범위를 찾는데 사용됩니다.
## 코드 예시
- 영어대소문자와 숫자를 입력해서 아이디를 작성하는 예제를 만들어보겠습니다.
- [중복확인]버튼을 클릭했을때 영어대소문자와 숫자가 아닌 값이 입력되어 있으면, [영어대소문자와 숫자로만 작성하시오]라는 경고창이 뜨도록 해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - 정규표현식</title>
</head>
<body>
<input type="text" id="joinId">
<button id="btn">중복확인</button>
<script>
//1. 문서객체 담기
var joinId = document.getElementById('joinId');
var btn = document.getElementById('btn');
//2. 버튼 클릭 이벤트
btn.onclick = function(){
var v = joinId.value;
var idReg = /^[a-zA-Z0-9]+$/g;
if(!idReg.test(v)){
alert('영어대소문자와 숫자로만 작성하시오');
}
}
</script>
</body>
</html>
## 코드 결과
- 영어대소문자와 숫자를 제외한 값을 쓰면 경고창이 뜨는 것을 확인할 수 있습니다.
3) { } 관련 정규식 패턴
- { }는 글자수를 제한하는데 사용합니다.
- 영어대소문자와 숫자만 입력하고 8~12글자인 아이디를 작성하는 예제를 만들어보겠습니다.
- [중복확인]버튼을 클릭했을때 영어대소문자와 숫자가 아닌 값이 입력되어 있고, 글자수가 맞지 않으면 [영어대소문자와 숫자로만 8~12글자로 작성하시오]라는 경고창이 뜨도록 해보겠습니다.
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - 정규표현식</title>
</head>
<body>
<input type="text" id="joinId">
<button id="btn">중복확인</button>
<script>
//1. 문서객체 담기
var joinId = document.getElementById('joinId');
var btn = document.getElementById('btn');
//2. 버튼 클릭 이벤트
btn.onclick = function(){
var v = joinId.value;
var idReg = /^[a-zA-Z0-9]{8,12}$/g;
if(!idReg.test(v)){
alert('영어대소문자와 숫자로만 작성하시오');
}
}
</script>
</body>
</html>
## 코드 결과
- 규칙에 맞아도 글자수가 맞지 않으면 경고창이 뜨는 것을 확인할 수 있습니다.
6. 자주 사용되는 정규식 문법
## 암호
- 6~20사이글자, 영문대소문자, 최소 1개의 숫자 혹은 특수문자 포함
var ex = /^(?=.*[a-zA-Z])((?=.*\d)|(?=.*\W)).{6,20}$/;
## 암호
- 8~15글자, 적어도 소문자하나, 대문자하나, 숫자하나가 포함되어야 함.
var ex = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}/;
## 이메일주소 양식
var ex = /^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/;
## 전화번호 양식 ex) 031-1234-1234
var ex = /(\d{3}).*(\d{3}).*(\d{4})/;
** 모든 것을 외울수는 없으니 아래 사이트에서 적합한 것을 찾아보세요.
Regex Tester - Javascript, PCRE, PHP
RegexPal requires a modern browser. Please update your browser to the latest version and try again.
www.regexpal.com
'웹언어 > JAVASCRIPT' 카테고리의 다른 글
| [JS강좌] 28강 문서객체 class관련 속성 - 오쌤의 니가스터디 (0) | 2021.06.30 |
|---|---|
| [JS강좌] 27강 자바스크립트 에러(Error) - 오쌤의 니가스터디 (0) | 2021.06.18 |
| [JS강좌] 25강 자바스크립트 Forms - 오쌤의 니가스터디 (0) | 2021.06.17 |
| [JS강좌] 24강 HTML DOM Node - 오쌤의 니가스터디 (0) | 2021.06.16 |
| [JS강좌] 23강 이벤트객체의 속성과 메서드 - 오쌤의 니가스터디 (0) | 2021.06.15 |
