메뉴 건너뛰기

조회 수 881 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

아직도 자바스크립트에 관해서는 많이 서툰 필자가 그동안 품어왔던 자바 스크립트에 대한 의문중 하나를 풀게 되었다.(기초부터 차근차근 배웠다면 풀고 말고도 없었을꺼 같지만.ㅡ.ㅡ)
"왜 자바에는 replace가 한번만 치환을 할까?" 하는 의문점이 바로 그것인데..(왜 자바스크립트에는 trim함수가 없을까는.. \s 때문일려나?)
그 이유는 자바스크립트가 다른 언어에서 처럼 정규식 치환함수와, 일반적인 치환함수가 따로 있는 것이 아니라 replace 함수가 정규식도 취급하고 있기 때문에 였던것이다.
그리고 그와 관련해서 필자가 한번에 모두 바꾸어주는 기능으로 하려고 했던것까지 같이 소개를 해보겠다. 아래 소스를 보자.

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$( function(){
	$( 'input' ).on("blur keyup", function() {
		$(this).val( $(this).val().replace( /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g, '' ) );
	});
})
</script>

<input type="text">
 

해당 input box에 한글이 입력되면 onBlur나 onKeyup시에 해당 한글을 공백으로 치환하여 한글을 입력 못하게 해주는 소스이다.

뭐, 문제점도 꾀 있는 소스라서, 사용자가 쓰기 편하게 해주려면, onBlur시에 한글이 있으면, 메세지창을 띄워주고 한글을 치환해주는 방식을 사용해야 하겠지만, 좀더 많은 기능을 보여주기 위해서 위처럼 소스를 구성해놓았다.

위에서 언급했던 모두 치환을 당담하는것은, 정규식의 g 부분이다. 해당위치에 오는 문자에 따라서
g : 문자열 내의 모든 패턴 체크
i : 대소문자를 구별하지 않음
m : 여러줄에 걸쳐서 체크
와 같이 된다.

참고로 한글 이외의 키보드에 있는 영문, 숫자, 특수문자, space는 쓰고 싶다면,

 
/[^A-Za-z0-9_\`\~\!\@\#\$\%\^\&\*\(\)\-\=\+\\\{\}\[\]\'\"\;\:\<\,\>\.\?\/\s]/gm;

와 같은 정규식을 쓰면 된다.

응용이라던가 하는것은 알아서 해보기 바란다.


  1. No Image 31Mar
    by
    2021/03/31 Views 256 

    행에 징검다리 스타일 입히기 (:odd, :even)

  2. No Image 31Mar
    by
    2021/03/31 Views 288 

    제이쿼리에서 클래스(class) 이름 추가/삭제

  3. No Image 31Mar
    by
    2021/03/31 Views 864 

    click event scroll

  4. No Image 31Mar
    by
    2021/03/31 Views 341 

    click에 따른 마우스 휠 on off

  5. No Image 31Mar
    by
    2021/03/31 Views 352 

    다중 select

  6. No Image 31Mar
    by
    2021/03/31 Views 316 

    draggable - div 드래그

  7. No Image 31Mar
    by
    2021/03/31 Views 394 

    parent of the iframe element selector

  8. No Image 31Mar
    by
    2021/03/31 Views 274 

    prepend / append - element 추가 (부모/자식 관계)

  9. No Image 31Mar
    by
    2021/03/31 Views 216 

    before / after / insertBefore / insertAfter - element 추가 (동등 관계)

  10. No Image 31Mar
    by
    2021/03/31 Views 302 

    마우스 좌표 얻기

  11. No Image 26Mar
    by
    2021/03/26 Views 637 

    간단한 마우스 포인터 따라 다니기

  12. No Image 26Mar
    by
    2021/03/26 Views 300 

    change 전의 값을 가져오기

  13. No Image 26Mar
    by
    2021/03/26 Views 218 

    focus() 로 오브젝트 옮기기

  14. No Image 26Mar
    by
    2021/03/26 Views 878 

    새창(자식창) 제어하기, 새창 POST방식으로 값 넘기기

  15. No Image 26Mar
    by
    2021/03/26 Views 603 

    SELECTBOX MULTIPLE 검색하기

  16. easing - 효과의 진행 속도

  17. No Image 26Mar
    by
    2021/03/26 Views 323 

    fadeIn() , fadeOut() 을 이용한 간단한 자동 그림 전환

  18. No Image 26Mar
    by 조쉬
    2021/03/26 Views 881 

    정규식, 한글 못쓰게 하기, replace all

  19. No Image 26Mar
    by
    2021/03/26 Views 216 

    input checkbox 모두 체크하기

  20. No Image 26Mar
    by
    2021/03/26 Views 1180 

    attr() - style의 특정 속성만 바꾸기

Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved