정규식 표현 맛보기 본문
반응형
정규 표현식(Regular Expression)
정규표현식은 특정 패턴의 문자열을 찾기 위한 표현 방식입니다. 정규 표현식을 활용하게 되면 텍스트 안에서 전화번호나 email 형식의 텍스트를 쉽게 찾거나 변형할 수 있습니다.
다음과 같이 사용합니다. 밑의 3가지 방법은 동일한 정규표현식을 만듭니다.
1. let pattern = /pattern/flag
2. let pattern = new RegExp(/pattern/, flag) // 리터럴 표기법 (정규식이 일정하게 유지되는 경우, 반복문에서 사용)
3. let pattern = new RegExp(/'pattern'/, flag) // constructor (정규식을 다른곳에서 가져오거나 바뀔 때 사용)
flag 알아보기
정규 표현식 객체 플래그를 설정해서 다양한 조건으로 검색할 수 있습니다.
플래그설명| i | 대 소문자 구분 없이 정규표현식과 문자열을 비교합니다. |
| var reg1 = /javascript/; var reg2= /javascript/i; var str = Javascript console.log(reg1.test(str)); //false console.log(reg2.test(str)); //true |
|
| g | 문자열 전체를 정규표현식과 비교합니다. |
| var reg1 = /a/; var reg2= /a/g; var str = javascript console.log(str.match(reg1)); //['a'] console.log(str.match(reg2)); //['a', 'a'] |
|
| m | 여러 행의 문자열을 정규표현식과 비교합니다. |
| var reg1 = /^s/; var reg2= /^s/m; var str = javascript\nscript console.log(str.match(reg1)); //null console.log(str.match(reg2)); //['s'] '^s'는 행의 첫번째 문자가 s로 시작하는 것을 의미하고 '\n'은 행바꿈을 의미합니다. |
정규표현식 객체 주요 패턴
패턴설명| abc | abc 문자열을 검색합니다. /abc/는 'abc' |
| [abc] | a,b,c 중 문자 하나를 검색합니다. /[^abc]d/는 'ad', 'bd', 'cd' |
| [^abc] | a,b,c를 제외한 문자 하나를 검색합니다. /[^abc]d/는 'ed', 'fd', 'gd' |
| [A-Z] | 알파벳 대문자 문자를 검색합니다. |
| [a-z] | 알파벳 소문자 문자를 검색합니다. |
| [0-9] | 0~9 까지의 숫자를 검색합니다. |
| . | 하나의 문자를 검색합니다. 만약 '마침표' 문자 그대로의 의미를 사용할 경우 '\.'으로 표현해야 합니다. |
| \w | 알파벳, 숫자, _를 검색합니다. |
| \W | 알파벳, 숫자, _를 제외하고 검색합니다. |
| \d | 숫자를 검색합니다. |
| \D | 숫자를 제외하고 검색합니다. |
| \s | 하나의 공백을 검색합니다. |
| \S | 공백을 제외하고 검색합니다. |
| ^ | 행의 첫 문자가 일치해야 함을 의미합니다 |
| $ | 행의 끝 문자가 일치해야 함을 의미합니다. |
| * | *앞의 문자가 0번 이상 반복을 의미합니다. /a*b/는 'b', 'ab', 'aab', 'aaab', 'aaa...b' |
| + | + 앞의 문자가 1번 이상 반복을 의미합니다. /a+b/는 'ab', 'aab', 'aaab', 'aaa...b' |
| ? | ? 앞의 문자가 0번 또는 1번 의미합니다. /a?b/는 'b', 'ab' |
| {} | /\d{3}/은 숫자 3개를 의미합니다. /\d{3,5}/은 숫자 3~5개를 의미합니다. /\d{3,}은 숫자 3개 이상을 의미합니다./ |
| a|b | a or b를 의미합니다. |
| (abc) | 그룹화를 의미합니다. |
반응형
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>정규표현식 객체</title>
<script>
var hpReg = /^\d{10,11}$/;
var emailReg = /^[A-Za-z0-9!#$%^&*_-]+@[A-Za-z0-9_-]+(\.[A-Za-z0-9_-]+){1,2}$/;
var hp1 = '010123456';
var hp2 = '01012345678';
var email1 = 'abc&1_23&A-BC@icox';
var email2 = 'abc&1_23&A-BC@icox.com';
var email3 = 'abc&1_23&A-BC@icox.co.kr';
var email4 = 'abc&1_23&A-BC@icox.abc.co.kr';
console.log(hpReg.test(hp1));
console.log(hpReg.test(hp2));
console.log(emailReg.test(email1));
console.log(emailReg.test(email2));
console.log(emailReg.test(email3));
console.log(emailReg.test(email4));
</script>
</head>
<body>
</body>
</html>
결과 확인하기
false
true
false
true
true
false
true
false
true
true
false
반응형
'MarkUp' 카테고리의 다른 글
| 이미지 IR 효과와 이미지 스플라이트 기법을 알아보자 (10) | 2022.08.19 |
|---|---|
| CSS - SCSS가 뭘까? (10) | 2022.08.18 |
| CSS 미디어 쿼리 알아보기 (8) | 2022.08.13 |
| HTML - 구조 관련 요소 알아보기 (8) | 2022.08.12 |
| CSS 기본과 사용법을 알아보자! (5) | 2022.08.12 |
'MarkUp' 관련글
더보기
Comments