[ 자바스크립트 ] trim()

trim() :
문장(문자열, string)에서, 양끝에 있는 공백문자를 모두 삭제한다.

익스플로러(ie) 9 이상 & 그외 브라우저에서는 기본적으로 제공되는 함수이다.

---

<script type="text/javascript">
// trim() 함수가 적용되지 않을 때 추가할 내용 ( ie 8 이하 ) 
if ( ! String.prototype.trim ){ 
        var regExp_for_trim = /[ \f\n\r\t\v\u00A0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]+/; 

        String.prototype.trim = function trim (){ 
            var source = regExp_for_trim.source; 
            return this.replace( new RegExp( "^" + source + "|" + source + "$", "g" ) , "" ); 
        }; 
} 
</script>

"trim()"으로, "&nbsp"를 삭제하려면, "textContent"나 "innerText"를 이용한다.

---

아래와 같이, 왼쪽과 오른쪽 즉, 양끝을 분리해서 추가할 수도 있다.

<script type="text/javascript">
var regExp_for_trim = /[ \f\n\r\t\v\u00A0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]+/;

if ( ! String.prototype.trimLeft ){ 
        String.prototype.trimLeft = function trimLeft (){ 
            return this.replace( new RegExp( "^" + regExp_for_trim.source, "g" ) , "" ); 
        }; 
} 

if ( ! String.prototype.trimRight ){ 
        String.prototype.trimRight = function trimRight (){ 
            return this.replace( new RegExp( regExp_for_trim.source + "$", "g" ) , "" ); 
        }; 
} 

if ( ! String.prototype.trim ){ 
        String.prototype.trim = function trim (){    return this.trimLeft().trimRight();    }; 
} 
</script>

참고 사이트 ( 영문 ) :
1. MDN ─ String.prototype.trimLeft()
2. MDN ─ String.prototype.trimRight()

---

<!-- 키보드의 "스페이스 키"와 "탭 키"가 사용된 문장임. -->

Hi, everyone!

 
<button onclick="testing()"> 클릭하세요 </button>

<textarea id="demo1"> 	 Hi, everyone! 	 </textarea> <textarea id="demo2"></textarea>


<script type="text/javascript">

function testing () { 

    var demo1 = document.getElementById( "demo1" ); 
    var demo2 = document.getElementById( "demo2" ); 

    var string = demo1.value; 
    var change = string.trim(); 

    demo1.value = "───" +  change  + "───"; 
    demo2.value = "───" +    string   + "───"; // 원본 문자열은 바뀌지 않음. 
} 
</script>
 

---

 
<button onclick="testing()"> 클릭하세요 </button>

<textarea id="demo1"></textarea>         <textarea id="demo2"></textarea>


<script type="text/javascript">

function testing () { 

    var string = "Hi, everyone!!! \n"; 
    var change = string.trim(); 

    document.getElementById( "demo1" ).value =    string   + "────"; 
    document.getElementById( "demo2" ).value =  change  + "────"; 
} 
</script>
 

\n (개행. 줄바꿈) : html에서의 <br> 태그와 같은 역할을 함.

---

 
<button onclick="testing()"> 클릭하세요 </button>

<p id="demo1"></p>
<p id="demo2"></p>

<script type="text/javascript">

function testing () { 

    var string = "Hi, everyone. \f"; 
    var change = string.trim(); 

    var before = string.indexOf( "\f" ); 
    var after = change.indexOf( "\f" ); // "trim()"으로, "\f"이 삭제되어, 찾을 수 없음. 

    document.getElementById( "demo1" ).innerHTML = before; 
    document.getElementById( "demo2" ).innerHTML = after; 
} 
</script>
 

\f ( form feed. 용지 바꿈. 페이지 넘기기 ) : css에서의 "page-break-after"와 같은 역할을 함.

---

First line 2nd line 3rd line Last line

<button onclick="testing()"> 클릭하세요 </button>

<textarea id="demo1">
First line
2nd line
3rd line
Last line
</textarea><textarea id="demo2"></textarea>

 
<script type="text/javascript">

function testing () { 

    var demo1 = document.getElementById( "demo1" ); 
    var demo2 = document.getElementById( "demo2" ); 

    var string = demo1.value; 
    var change = string.trim(); 

    demo1.value = "────" +  string + "────"; 
    demo2.value = "────" + change + "────"; 
} 
</script>
 

---

 
<button onclick="testing()"> 클릭하세요 </button>
  Hi, everyone!  
<p id="original">&nbsp; Hi, everyone! &nbsp;</p>

<p id="demo_1"></p>
<p id="demo_2"></p>

<script type="text/javascript">

function testing () { 

    var original = document.getElementById( "original" ); 
    var demo_1 = document.getElementById( "demo_1" ); 
    var demo_2 = document.getElementById( "demo_2" ); 


    var str_1 = original.innerHTML; 

     demo_1.innerHTML = str_1.trim(); 


    var str_2 = ( "textContent" in original ) ? original.textContent : original.innerText; 

     demo_2.innerHTML = str_2.trim(); 
} 
</script>
 

ie 8 이하에서는 "innerText" , 그외 브라우저에서는 "textContent" 이다.

"innerHTML"만을 이용하고 싶다면, 아래와 같이 "trim() & replace()"를 사용하면 된다.

 
function testing(){ 

    var original = document.getElementById( "original" ); 
    var demo_1 = document.getElementById( "demo_1" ); 

    var str_1 = original.innerHTML; 
          str_1 = str_1.trim(); 
          str_1 = str_1.replace( /^(\ )+|(\ )+$/g , "" );

    demo_1.innerHTML = str_1; 
} 
 

---

종합해보면,,,,,
trim() 함수는,
해당하는 문장의 단락과 앞뒤 단락 사이에서,
두 단락을 구분짓은 것들을 모두 삭제한다고 생각하면 될 듯 하다...

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*