RegExr: Learn, Build, & Test RegEx
RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).
regexr.com
문자열에서 특정 문자 조합을 찾기 위한 패턴입니다.
/패턴/gm
1. 그룹과 범위
| 또는
() 그룹
[] 문자셋
[^] 부정문자셋 - [] 안에 문자가 아닐 때
2. 수량
? 없거나 있거나
ex> gra?y a가 있거나 없는 것을 선택
* 없거나 있거나 많거나
+ 하나 또는 많이
{n} n번 반복
{min,} 최소수량
{min, max} 최소, 그리고 최대
3. 텍스트
\ 특수문자가 아닌 문자
. 어떤 글자
\d 숫자
\D 숫자가 아닌 것
\w 문자
\W 문자가 아닌 것
\s 공백
\S 공백이 아닌 것
문자열.replace(정규식, 대체문자)
문자열.match(정규식) array반환
문자열.search(정규식) index반환
정규식.test(문자열) boolean반환
4. 범위
^ 문장의 시작에서 찾고 (^Ya)
$ 문장의 끝에서 찾고 (Ya$)
\b 단어 경계
\B 단어 경계가 아닐 때
match.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let str = "abccc";
console.log(str.match(/c*/));
let str2 = "123abc";
console.log(str2.match(/(\d+)(\w)/)); // '123a', '123', 'a'
str = str.replace(/ab/,"hi");
console.log(str);
</script>
</body>
</html>
ex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function solution(new_id) {
let answer = '';
// 1단계 아이디는 소문자로만 되어야 함
new_id = new_id.toLowerCase();
// 2단계 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.)를 제외한 모든 문자를 제거
console.log(`소문자로 변경: ${new_id}`);
new_id = new_id.replace(/[^a-z0-9\-\_\.]/g,"");
console.log(`특수문자 제거: ${new_id}`);
// 3단계 마침표(.)가 2번 이상 연속된 부분을 하나의 마침표로 변경
new_id = new_id.replace(/\.{2,}/g,".");
console.log(`연속마침표를 하나로 변경: ${new_id}`);
// 4단계 마침표가(.)가 처음이나 끝에 위치하면 제거
new_id = new_id.replace(/^\.|\.$/,"");
console.log(`앞, 뒤 마침표를 제거: ${new_id}`);
// 5단계 new_id가 빈문자열이라면 "a"를 대입해라
new_id = new_id.length === 0? "a" : new_id;
// 6단계 new_id의 길이가 16자 이상이면 new_id 첫 15개 문자를 제외한 나머지 문자를 제거
// 제거했을 때 마침표(.) new_id의 끝에 위차한다면 마지막(.)문자를 제거
new_id = new_id.length >= 16? new_id.slice(0, 15) : new_id;
new_id = new_id.replace(/\.$/, "");
console.log(`15개만 남기기: ${new_id}`);
return new_id;
}
solution("...!@BaT#*..y.abcdefghijklm");
</script>
</body>
</html>
ex02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 패턴을 만들어서 특정 문자열이 해당 패턴이 맞는지 체크
const regex = /\d{3}-\d{4}-\d{4}/;
console.log(regex.test('010-1234-1234'));
console.log(regex.test('02-1234-4567'));
// 문자들 중에서 전화번호만 반환
const text = "안녕하세요 제 전화번호는 010-1234-1234 입니다. 연락주세요!";
console.log(text.match(/\d{3}-\d{4}-\d{4}/)[0]);
</script>
</body>
</html>'Stack > JavaScript' 카테고리의 다른 글
| [JS] HTML 커스텀 속성 (0) | 2022.05.20 |
|---|---|
| [JS] 새로운 데이터 타입 (0) | 2022.05.19 |
| [JS] Daum 우편번호 서비스 API 활용 (0) | 2022.05.18 |
| [JS] Form태그 (0) | 2022.05.18 |
| [JS] keyup / keydown (0) | 2022.05.18 |