프로그래밍 TIP/JAVASCRIPT

[JAVASCRIPT] trim 구현하기

여름나라겨울이야기 2008. 7. 3. 14:42
728x90
자바스크립트에서 Trim, 즉 입력값의 좌우공백을 제거하는 함수를 정규식을 이용해서 구현해 보자.

출처가 데브피아였다는 것을 빼고는 별로 기억이 없다.

백문이 불여일견 앞뒤로 공백이 있는 문자를 입력하고 각각의 결과를 아래 화면에서 확인해 보면

확실한 느낌이 올 것이다.

테스트:


자동 Tirm (포커스를 벗어나면)
수동 Trim (뒤에 버튼을 누르면)

소스: (아래 부분을 클릭하고 Ctrl + A 를 누르면 깔끔하게 선택 완료)

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
	String.prototype.trim = function() 
	{
		return this.replace(/(^\s*)|(\s*$)/g, "");
	}
//-->
</SCRIPT>
</HEAD>

<BODY>
<TABLE cellpadding="3" cellspacing="1" border="1">
<TR>
	<TD>자동 Tirm (포커스를 벗어나면)</TD>
	<TD><INPUT TYPE="text" NAME="txtAuto" 
	onFocus="this.select();" onBlur="this.value = this.value.trim();"></TD>
</TR>
<TR>
	<TD>수동 Trim (뒤에 버튼을 누르면)</TD>
	<TD><INPUT TYPE="text" NAME="txtManual" onFocus="this.select();">
	<INPUT TYPE="button" VALUE="Trim" 
	ONCLICK="txtManual.value = txtManual.value.trim();"></TD>
</TR>
</TABLE>
</BODY>
</HTML>

핵심은 아래부분이다. 정규식과 자바의 prototype 속성을 몰라도 사용하는데는 지장이 없겠지만 

정규식 같은 경우는 반드시 학습해 둘 필요가 있다고 하겠다.

	String.prototype.trim = function() 
	{
		return this.replace(/(^\s*)|(\s*$)/g, "");
	}
반응형

'프로그래밍 TIP > JAVASCRIPT' 카테고리의 다른 글

[JAVASCRIPT] 이미지 크기에 맞게 팝업 사이즈 자동 조정  (0) 2008.07.23
[JAVASCRIPT] Form 의 Action 속성과 onSubmit 이벤트 제어하기  (0) 2008.07.04
[JAVASCRIPT] URL 을 Encoding 해보자.(encodeURIComponent 함수 사용)  (0) 2008.07.04
[JAVASCRIPT] 숫자 판별하기(isNaN 함수 사용)  (0) 2008.07.04
[JAVASCRIPT] replace 쓰기  (0) 2008.07.04

'프로그래밍 TIP/JAVASCRIPT'의 다른글

  • 현재글[JAVASCRIPT] trim 구현하기

관련글

티스토리툴바