정규 표현식은 문자의 패턴을 검색하기 위한 일련의 문자이ㅏㄷ. 텍스트 검색 및 텍서트 바꾸기 작업에 검색 패턴을 사용할 수 있다. 예를 들어 회원가입의 경우 E-mail 주소를 입력할 때 id@주소와 같은 형식으로 입력하기 위한 문자 패턴을 정의하는데 유용하다.
var 변수 = / 패턴 / 플래그 ; // 리터럴 방식
var 변수 = new RegExp ("패턴","플래그"); // 객체생성방식
** 일반적으로 객체의 생성보다는 리터럴 방식의 정규식을 많이 사용한다.
RegExp 메서드
| 메서드 | 설명 |
| search() | String 객체의 메서드 항목을 검색하고, 위치를 반환 |
| replace() | String 객체의 메서드 항목을 검색하고, 해당 문자 변환 |
| test() | 정규 표현식과 일치한 문자열이 있으면 true 반환 |
| exec() | 정규 표현식과 일치하는 문자열 반환 |
| match() | 정규 표현식과 일치하는 문자열 반환 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let str = "Hello JavaScript";
let regexp_search = str.search(/javascript/i);
document.write(regexp_search + "<br>"); // 대소문자 구분 x
</script>
</body>
</html>
test(), exec(), match()
test()와 exec() 메서드는 정규식의 패턴에 대해 문자열을 검색한다.
검색 결과에 따라 test()는 true/false 반환, exec()는 발견된 텍스트 / null 반환
match() 메서드는 exec()와 유사하나 String 객체의 메서드인게 다르고, 인수로 정규 표현식의 패턴이 온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let str = "Hello JavaScript";
let pattern = /JavaScript/;
document.write(pattern.test(str) + "<br>");
document.write(pattern.exec(str) + "<br>");
document.write(str.match(pattern) + "<br>");
</script>
</body>
</html>
| 플래그 | 설명 |
| i | 대/소문자를 구분하지 않는다. |
| g | 문자열 내에서 모든 일치 항목을 검색 (배열로 반환) |
| m | 여러 줄의 문자열을 비교한다 (각 줄의 시작(^)과 끝($)을 찾을때) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let str = "Hello \n JavaScript javaScript JavaScript \n javaScript";
let ptn01 = /javascript/i; // 대소문자 구분x
let ptn02 = /javaScript/g; // 모두 찾기
console.log(str);
console.log(ptn01 + " : " + str.match(ptn01));
console.log(ptn02 + " : " + str.match(ptn02));
</script>
</body>
</html>
정규식 패턴
| 패턴 | 설명 |
| abc | abc 문자열을 검색한다 |
| [abc] | a, b, c 중 하나의 문자를 검색한다 |
| [^abc] | a, b, c를 제외한 문자 하나를 검색한다 |
| [A-Z] | 알파벳 대문자를 검색한다 |
| a.b | a와 b사이에 임의의 한 문자가 있을 경우를 찾는다 |
| [0-9] | 0~9까지의 숫자를 검색한다 |
| n+ | 1회 이상 반복 bo+ : "bo", "boo" 등과 일치, "b"는 불일치 |
| n* | 0회 이상 반복 bo*는 "b", "bo", "boo" 등과 일치 |
| n? | ? : 0회 또는 1회 반복 bo?는 "b" 또는 "bo" 와 일치 |
| \w | 단어 문자와 일치 ( 알파벳, 숫자, 밑줄 포함 ) |
| \W | 단어 문자가 아닌 문자와 일치 ( 공백이나 구두점 ) |
| \d | 숫자를 검색 |
| \D | 숫자 제외하고 검색 |
| \s | 하나의 공백 검색 |
| \S | 공백 제외하고 검색 |
| ^ | 행의 첫 문자가 일치해야함 ^Hello는 "Hello"로 시작하는 문자열과 일치 |
| $ | 행의 끝 문자가 일치해야함 world$는 "world"로 끝나는 문자열과 일치 |
| { } | 숫자의 개수 지정 가능 /\d{3}/은 숫자 3개(3자리수)를 의미 |
| a|b | a 혹은 b를 검색한다 |
| (abc) | 그룹화를 의미 (abc)+는 "abc", "abcabc" 등과 일치 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let str01 = "ab";
let str02 = "abc";
let str03 = "abccc";
let ptn01 = /abc+/ig;
let ptn02 = /abc*/ig;
let ptn03 = /abc?/ig;
// +
document.write(`1.ab : ${str01.match(ptn01)} <br>`);
document.write(`2.abc : ${str02.match(ptn01)} <br>`);
document.write(`3.abccc : ${str03.match(ptn01)} <br>`);
// *
document.write(`1.ab : ${str01.match(ptn02)} <br>`);
document.write(`2.abc : ${str02.match(ptn02)} <br>`);
document.write(`3.abccc : ${str03.match(ptn02)} <br>`);
// ?
document.write(`1.ab : ${str01.match(ptn03)} <br>`);
document.write(`2.abc : ${str02.match(ptn03)} <br>`);
document.write(`3.abccc : ${str03.match(ptn03)} <br>`);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#" name="calculator">
주민등록번호 : <input type="text" name="number1" size="14">
</form>
<button onclick="ju_search()">검색</button>
<p id="demo"></p>
<script>
function ju_search() {
let x = calculator.number1.value;
let ptn01 = /\d{6}-[12]\d{6}/;
if(ptn01.test(x)) {
document.querySelector("#demo").innerHTML = ptn01.exec(x);
}
}
</script>
</body>
</html>
'웹 프로그래밍 기초 > 객체' 카테고리의 다른 글
| 내장 객체 (Number) (0) | 2025.04.09 |
|---|---|
| 내장 객체 (Math) (0) | 2025.04.09 |
| get메서드 / set메서드 (0) | 2025.04.09 |
| 내장 객체 (Date) (0) | 2025.04.09 |
| repeat() (0) | 2025.04.09 |