문자열 좌우에서 공백을 제거하는 함수가 trim() 함수 입니다. 대부분의 언어에서 기본 제공하고 있고, 좌/우 측만 trim 하는 함수를 제공하기도 합니다.
자바스크립트에서도 사용할 일이 자주 있는 편인데, IE8 이하에서는 제공되지 않습니다. 사이트가 IE 8 도 지원해야 한다면 보통 많이 사용하는 방법이 IE 조건부 주석을 사용해서 IE 8이하일때 String 객체의 prototype 에 trim() 함수를 추가하여 IE 8이하에서도 IE 9이상과 동일하게 사용할 수 있도록 지원하는 것입니다.
다른 방법은 jQuery를 사용한다면 jQuery의 $.trim(); 메소드를 사용하여 처리하는 방법입니다.
다음은 각각의 방법을 적용해본 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>자바스크립트 TRIM</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!--[if lte IE 8]>
<script type="text/javascript">
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
}
</script>
<![endif]-->
<script type="text/javascript">
String.prototype.ltrim = function() {
return this.replace(/^\s+/,"");
}
String.prototype.rtrim = function() {
return this.replace(/\s+$/,"");
}
var str = " test ";
console.log(":" + str.trim() + ":");
console.log(":" + $.trim(str) + ":");
console.log(":" + str.ltrim() + ":");
console.log(":" + str.rtrim() + ":");
</script>
</head>
<body>
<h1>TRIM</h1>
</body>
</html>
결과)
:test:
:test:
:test :
: test:
IE 8 이하는 아래 IE 조건부 주석에 포함된 내용이 동작하게 됩니다. 정규식을 사용한 replace 를 사용해서 문자열의 시작과 끝에 공백을 제거합니다.
<!--[if lte IE 8]>
<script type="text/javascript">
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
}
</script>
<![endif]-->
trim() 함수의 사용법은 다음과 같습니다.
자바스크립트 기능을 사용할 때 코드 입니다.
var str = " test ";
var trimStr = str.trim();
jQuery 를 사용할때 코드 입니다.
var str = " test ";
var trimStr = $.trim(str);
자바스크립트에서 문자열 trim 기능을 사용하는 방법을 알아보았습니다.
반응형
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 정규식 객체와 자주 쓰이는 함수 (0) | 2018.04.17 |
|---|---|
| 자바스크립트 쿠키 - jQuery Cookie Plugin (0) | 2018.04.17 |
| jQuery 플러그인 4 - 년도 select 박스 만들기 (0) | 2018.04.12 |
| 이미지 슬라이더 - bxSlider 사용법 (26) | 2018.04.12 |
| 자바스크립트 함수(Function)와 함수의 call(), apply(), bind() 함수 (4) | 2018.04.10 |