Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

자바스크립트의 trim 함수는 문자열 끝에 공백을 제거해 주는 기능을 합니다. 그런데 문자열의 앞에 있는 공백만 제거하거나 뒤쪽에 있는 공백만 제거할 수 있는 기능은 직접 구현을 해야 합니다. 정규표현식을 사용해서 ltrim() rtrim() 함수를 만들어 보겠습니다.

 

 

String trim 함수

 

일반적인 String 클래스의 양쪽 공백제거 함수 입니다. 왼쪽 오른쪽 모두 공백을 제거하고 싶다면 이 함수를 사용하시면 됩니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>Javascript</title>
<style type="text/css">
body {background-color: #e7e7e7;}
div {margin : 10px;}
</style>
<script type="text/javascript">
<!--
	var a = "   javascript   ";   
	document.write(a.trim()); 
//-->
</script>
</head>
<body>
</body>
</html>

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
자바스크립트 정규표현식으로 ltrim, rtrim 공백 제거 함수 구현하는 방법
자바스크립트 parseFloat 함수 이용해서 문자열을 실수로 변환하는 방법
자바스크립트 내장 객체 Array 의 concat 함수 알아보기 – 2
자바스크립트 display 속성 이용해서 접거나 펴는 방법
자바스크립트 내장함수 eval() 문자열을 수식으로 바꾸는 방법

 

 

정규식을 이용해 ltrim, rtrim 함수 구현

 

아래에 쓰인 정규식 특수문자에 대해 간략하게 설명하겠습니다. 샘플에서 나와 있는 왼쪽 공백 제거 식은 ^\s+ 입니다. “처음시작에 공백이 하나이상있는 것을 말합니다. 오른쪽 공백 제거 식은 \s+$끝라인에 공백이 하나이상있는 것을 말합니다.

 

l  ^ - 처음시작(beginning of line)

l  \s - 공백(whitespace character)

l  $ - 끝라인(end of line)

l  | -  or 표현

l  \ - 특수문자를 원래의 문자 의미대로 해석

l  + - 자기앞에 나오는 하나 이상의 정규표현식과 일치

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>Javascript</title>
<style type="text/css">
body {background-color: #e7e7e7;}
div {margin : 10px;}
</style>
<script type="text/javascript">
<!--
	var a = "   javascript   ";   
	
	alert(ltrim(a));
	alert(rtrim(a));
	
	// 왼쪽에 있는 공백을 제거한다. 
	function ltrim(value) {
		 return value.replace(/^\s+/,"");
	}
	// 오른쪽에 있는 공백을 제거한다. 
	function rtrim(value) {
		 return value.replace(/\s+$/,"");
	} 
//-->
</script>
</head>
<body>
</body>
</html>

 

 

substring 을 이용해서 ltrim, rtrim 구현하기

 

이번에는 정규식이 아닌 charAt substring 함수로 공백을 제거하는 소스입니다. 이 로직은 문자열을 한자씩 분리해서 charAt() 함수로 공백인지 아닌지 판단합니다. 공백이면 다음 문자도 연속해서 공백인지 for 문을 돌로 아니라면 길이를 j 변수에 저장합니다. j 변수에 저장된 길이 값으로 substring() 함수를 이용해 공백을 제외한 나머지를 자르는 것이죠.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>Javascript</title>
<style type="text/css">
body {background-color: #e7e7e7;}
div {margin: 10px;}
</style>
<script type="text/javascript">
<!--
	var a = "   javascript   ";

	alert(ltrim(a));
	alert(rtrim(a));

	// 왼쪽에 있는 공백을 제거한다. 
	function ltrim(value) {
		var i, j = 0;
		var objstr;
		for (i = 0; i < value.length; i++) {
			if (value.charAt(i) == ' ')
				j = j + 1;
			else
				break;
		}
		return value.substring(j, value.length - j + 1);
	}
	// 오른쪽에 있는 공백을 제거한다. 
	function rtrim(value) {
		var i, j = 0;
		for (i = value.length - 1; i >= 0; i--) {
			if (value.charAt(i) == ' ')
				j = j + 1;
			else
				break;
		}
		return value.substring(0, value.length - j);
	}
//-->
</script>
</head>
<body>
</body>
</html>
※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
자바스크립트 정규표현식으로 ltrim, rtrim 공백 제거 함수 구현하는 방법
자바스크립트 parseFloat 함수 이용해서 문자열을 실수로 변환하는 방법
자바스크립트 내장 객체 Array 의 concat 함수 알아보기 – 2
자바스크립트 display 속성 이용해서 접거나 펴는 방법
자바스크립트 내장함수 eval() 문자열을 수식으로 바꾸는 방법
반응형
Posted by 녹두장군1
,