[JS] 정규표현식

Stack/JavaScript

[JS] 정규표현식

7ingout 2022. 5. 19. 09:14

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>