JavaScript

정규표현식

정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다.
이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다.
정규표현식은 하나의 언어라고 할 수 있다.

*정규식 공부하기 좋은 예제 : https://regexr.com/5ml92


  • 숫자만 가능 : [ 0 ~ 9 ] 주의 : 띄어쓰기 불가능
    /^[0-9]+$/

  • 이메일 형식만 가능
    /^([\w-]+(?:.[\w-]+))@((?:[\w-]+.)\w[\w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$/

  • 한글만 가능 : [ 가나다라 ... ] 주의 : ㄱㄴㄷ... 형식으로는 입력 불가능 , 띄어쓰기 불가능
    /^[가-힣]+$/

  • 한글,띄어쓰기만 가능 : [ 가나다라 ... ] 주의 : ㄱㄴㄷ... 형식으로는 입력 불가능 , 띄어쓰기 가능
    /^[가-힣\s]+$/

  • 영문만 가능 :
    /^[a-zA-Z]+$/

  • 영문,띄어쓰기만 가능
    /^[a-zA-Z\s]+$/

  • 전화번호 형태 : 전화번호 형태 000-0000-0000 만 받는다. ]
    /^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}$/

정규표현식의 기본 문법

정규표현식은 소프트웨어에 따라서 방식이나 지원 범위가 다를 수 있습니다.

  • ^The The로 시작하는 문자열

  • of despair$ of despair로 끝나는 문자열

  • ^abc$ abc로 시작하고 abc로 끝나는 문자열 (abc 라는 문자열도 해당됨)

  • notice notice가 들어 있는 문자열

  • ab* a 다음에 b가 0개 이상 (a, ab, abbb 등등)

  • ab+ a 다음에 b가 1개 이상 (ab, abbb 등등)

  • ab? a 다음에 b가 있거나 없거나 (ab 또는 a)

  • ab{2} a 다음에 b가 2개 있는 문자열 (abb)

  • ab{2,} a 다음에 b가 2개 이상 (abb, abbbb 등등)

  • ab{3,5} a 다음에 b가 3개에서 5개 사이 (abbb, abbbb, 또는 abbbbb)

  • *, +, ?는 각각 {0,}, {1,}, {0,1}과 같습니다.

( )는 문자열을 묶음 처리할 때 사용

  • a(bc)* a 다음에 bc가 0개 이상 (묶음 처리)
  • a(bc){1,5} a 다음에 bc가 1개에서 5개 사이
  • hi|hello hi나 hello가 들어 있는 문자열
  • (b|cd)ef bef 또는 cdef
  • (a|b)*c a와 b가 섞여서 여러번 나타나고 그뒤에 c가 붙어있는 패턴
  • . (점) 임의의 한 문자
  • ^.{3}$ 3문자로만 되어 있는 문자열

[ ] 괄호 안에 있는 내용 중 임의의 한 문자

  • [^ ] 첫문자로 ^를 쓰면 괄호 내용의 부정. 즉 괄호 안에 포함되지 않는 한 문자
  • [ab] a 또는 b (a|b 와 동일한 표현)
  • [a-d] 소문자 a에서 d까지 (a|b|c|d 또는 [abcd] 와 동일)
  • ^[a-zA-Z] 영문자로 시작하는 문자열
  • [0-9]% % 문자 앞에 하나의 숫자가 붙어 있는 패턴
  • %[^a-zA-Z]% 두 % 문자 사이에 영문자가 없는 패턴

특수 문자 자체를 검색하기 및 사용하기

  • \^ ^ . .
  • [ [ $ $
  • ( ( ) )
  • | | * *
  • + + \? ?
  • { { \ \
  • \n 줄넘김 문자 \r 리턴 문자
  • \w 알파벳과 (언더바) \W 알파벳과 가 아닌 것
  • \s 빈 공간(space) \S 빈 공간이 아닌 것
  • \d 숫자 \D 숫자가 아닌 것
  • \b 단어와 단어 사이의 경계 \B 단어 사이의 경계가 아닌 것
  • \t Tab 문자 \xnn 16진수 nn에 해당하는 문자
  • [] 안에서는 특수 문자가 모두 효력을 잃게 됩니다.

검색 + 치환을 위한 하부식(부분식)

  • ( )로 둘러싼 부분은 각각 하나의 덩어리로 취급해서,
  • 검색시 ( ) 안에 해당되는 내용들을 변경할 내용에서 그대로 가져다 이용할 수 있습니다.
  • 검색된 각각의 ( )안에 해당되는 내용은 변경할 내용에서 $1, $2, .. 등으로 지정해서 쓸 수 있습니다.

예제) mp3파일 이름 바꾸기

  • 검색 : (.) - (.).mp3 .*은 길이에 상관없이 임의의 문자열, .은 점
  • 치환 : $2 - $1.mp3 앞에서 검색한 ( )안에 해당되는 내용끼리 순서 바꾸기

ex) "제목 - 연주자.mp3" Þ "연주자 - 제목.mp3"

  • 앞에서 정의한 하부식을 다시 활용하기 (제가 잘못 이해한 것일 수도 있는데)
  • \n은 ( ) 하부식 중에서 n번째 하부식을 가리킵니다.

예제) (.+)\1+

  • \1로 되어 있으니까 첫번째 부분식 (.+)를 가리킵니다. 위 내용을 해석하자면, 일단 (.+)가 있으니까 이에 해당되는 내용을 찾고, \1+이 있으니까 첫번째 부분식 (.+)와 똑같은 내용이 그 뒤에 1번 이상 있는 문자열을 찾습니다.

예제) abab같은 문자열이 위에 해당되는데, 일단 (.+) 즉 임의의 문자열 ab를 찾고 그 뒤에 \1+로 첫번째 부분식을 다시 1번 이상 있는 것을 찾으니까 뒤의 ab가 이에 해당합니다.

변경자 ? 검색 방식 변경
(?i) 대소문자 무시 (기본값)
(?-i) 대소문자 구분
(?g) "greedy" 모드로 전환 (기본값)
(?-g) "greedy" 모드 해제, 따라서 "+"는 "+?"과 동일한 것으로 인식

[출처]https://gocoding.tistory.com/93

ex) 휴대폰 번호 정규식

방법.1 (010/011/017/018/019 등 포괄적인)

let regexphone=/(^01[016789]{1})[- .]([0-9]{3,4})[- .][0-9]{4}$/g;
console.log(regexphone.test("017-8765-0881"));

방법.2

var regExp = /^\d{3}-\d{3,4}-\d{4}$/;
console.log(regExp.test("017-9326-0881"));

방법.3

let regexphone=/^01(0|1|6|7|8|9)/g

ex) 전화번호 정규식

let regexTel=/\d{2,3}-\d{3,4}-\d{4}$/g;
console.log(regexTel.test("031-323-1323"))

ex) 이메일 정규식

방법.1

let regexEmail=/^[a-zA-Z0-9]([-_.]?[0-9a-zA-Z])*@[a-zA-Z0-9]([-_.]?)[a-zA-Z0-9]*.[a-zA-Z]{2,3}$/g;

방법.2

let regexEmail=/^[a-zA-Z0-9]([-_.]?\w+)*@[a-zA-Z0-9]([-_.]?)[a-zA-Z0-9]*.[a-zA-Z]{2,3}$/g;

방법.3

let regexEmail=/^\w+([\.-]?\w+)*@\w+([\.-_]?\w+)*(\.\w{2,3})+$/g;

ex) 비밀번호 정규식

조건 ) 수문자, 문자, 숫자 포함하고 8~16자리 이내의 값

let regexPwd1=/^.*(?=^.{8,16}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/g;
console.log(regexPwd1.test("432!@#fdsas")) // 검사해본다.

조건 ) 특수문자가 있어도 되고 없어도 되는 경우

let regexPwd2=/^.*(?=^.{8,16}$)(?=.*\d)(?=.*[a-zA-Z])|(?=.*[!@#$%^&+=]).*$/g;
console.log(regexPwd2.test("fdsa2$#@134"))

조건 ) 숫자문자 포함 형태의 6~12

let regexPwd3=/^[a-zA-Z0-9]{6,12}$/g;
console.log(regexPwd3.test("432!@#fdsas"))

JQuery

toggle 이미지 만들기

결과```
코드를 입력하세요

HTML

<div id="wrap">
        <p class="imgs">
            <img src="./img/cat2.jpeg" alt="img">
        </p>
        <button class="click">click</button>
    </div>

CSS

#wrap{width: 600px; height: 400px; margin: 50px auto; border: 5px solid #ddd; text-align: center;}
        .imgs{width: 600px; height: 400px;}
        img{width: 50%;}
        .hidden{display: none; transition: 1s; background: #eee;}

Script

$('.click').click(function(){
    $('.imgs').find('img').toggleClass('hidden');
});

value(val) select , option , input 버튼

결과

HTML

<body>
    <form action="#" method="post" name="form1">
        <input type="text" id="input1" maxlength="40" value="텍스트필드입니다.">
        <textarea name="textarea" id="textarea1" cols="30" rows="10">텍스트영역입니다.</textarea>
        <select name="select1" id="select1">
            <option value="city1">서울</option>
            <option value="city2">대전</option>
            <option value="city3">부산</option>
        </select>
        <select name="select2" id="select2" ><!-- multiple을 넣으면 옵션이 펼쳐져서 보인다. -->
            <option value="town1">동구</option>
            <option value="town2">서구</option>
            <option value="town3">중구</option>
        </select>
    </form>
</body>

CSS

        form{width: 500px; margin: 50px auto;}
        #textarea1{display: block; margin: 10px 0;}

Script

let inp=$('#input1').val("여기는 아이디를 쓰는 곳입니다.");
//jquery에서는 value가 val로 표현

$('#select1').val('city3'); // 밸류값 조정 (옵션선택란이 처음부터 부산으로 보이게끔 가능).
$('#select2').val(['town2','town3']);

empty 와 remove

결과

empty 와 remove 비교

HTML

<body>
    <div id="div1">넣고 싶은 텍스트</div>
    <div id="div2">넣고 싶은 텍스트</div>
</body>

CSS

        #div1{border: 3px solid #000; margin: 10px 0;}
        #div1{border: 3px solid #000;}

Script

$('#div1').empty();
$('#div2').remove();

empty 는 안에가 공백이 되어 비워지는 개념이고,
remove는 지워진다.

JQuery 에서 width , height 값 조절 및 hover효과

결과

HTML

<body>
    <div id="wrap">
        <p id="p1"><img src="./img/cat2.jpeg" alt="이미지"></p>
        <p id="p2"><img src="./img/bonobono.jpg" alt="이미지"></p>
    </div>
</body>

CSS

<style>
        *{margin: 0; padding: 0;}
        #wrap{width: 500px; margin: 100px auto; background: #ddd; padding: 20px 0;}
        
        #p1, #p2{width: 400px; height: 350px; padding: 20px; border: 5px solid orange; margin: 10px auto; transition: .5s;}
        p img{width: 100%; height: 100%;}
    </style>

Script

let wid1=$('#p1').width();//width
let wid2=$('#p1').innerWidth();//width+padding
let wid3=$('#p1').outerWidth();//width+padding+border

console.log(wid1);
console.log(wid2);
console.log(wid3);

//$('#p2').outerWidth(500).outerHeight(500);
$('#p2').hover(function(){
    $(this).outerWidth(500).outerHeight(500);
},function(){
    $(this).outerWidth(450).outerHeight(450);
});

변수로 지정하여 width , innerWidth(패딩값 포함) , outerWidth(패딩값+보더값) 포함하여 넓이를 확인할 수 있으며 지정도 가능하다.
hover 함수를 넣어서 사이즈도 조절가능하다.

Position

결과

HTML

<div id="wrap">
        <div id="boxWrap">
            <p class="box">박스</p>
        </div>
        <br>
        <p class="txt_1">절대 top위치값: <span></span></p>
        <p class="txt_2">상대 top위치값: <span></span></p>
        <p class="txt_3">상대 left위치값: <span></span></p>
    </div>

CSS

 *{margin: 0; padding: 0;}
        #wrap{width: 500px; height: 500px; background: #ddd; margin: 0 auto;}
        #boxWrap{width: 300px; height: 200px; margin: 50px auto; position: relative; background: #ccc;}
        .box{width: 50px; height: 50px; position: absolute; top: 50px; left: 100px; background: #fff; text-align: center; line-height: 50px; font-weight: bold;}
        p{margin-left: 20px;}

Script

let $txt1=$('.txt_1 span');
let $txt2=$('.txt_2 span');
let $txt3=$('.txt_3 span');
let $box=$('.box');

let off_t=$box.offset().top;//위에 마진 50px 에 .box는 wrap안에서 relative top:50px 떨어져있으므로 offset 값은 100 이 나온다.
$txt1.text(off_t);

let pos_t1=$box.position().top;

$txt2.text(pos_t1);

let pos_t2=$box.position().left;

$txt3.text(pos_t2);

scrollTop (위치 메서드)

결과

스크롤의 현 위치를 콘솔로 나타나게 한다.

HTML

    <div id="wrap">
        <h1>위치 메서드</h1>
    </div>

CSS

*{margin: 0; padding: 0;}
        body{line-height: 1;}
        #wrap{height: 5000px; padding-top: 2000px;}

Script

let topNum=$('h1').offset().top;
$(window).scrollTop(topNum);
let sct=$(window).scrollTop();
console.log(sct);
$(window).scroll(function(){
    let sct=$(window).scrollTop();
    console.log(sct);
});

0개의 댓글