[ 자바스크립트 ] substr()

최종 수정일 : 2016. 9. 28.

substr()은 자바스크립트에서 기본적으로 제공되는 함수이다.
전체 문장에서 일부분만을 가지고서 작업해야 될 때 사용하는 함수이며,
전체 문장(문자열) 안에서, 가져올 문자열의 위치(문자열의 시작점)과 그 길이를 입력해서 사용할 수 있다.

substr( 문자열의 시작점, 문자열의 길이 )

substr( start, length )

• Polyfill
• 가져올 문자열의 위치를 알고 있을 때
• 가져올 문자열의 위치를 모를 때

---

Polyfill

인터넷 익스플로러(IE) 8 이하에서처럼, 음수값이 적용되지 않을 경우를 대비해서 추가해야될 내용이다.

<script type="text/javascript">
// 출처 : String.prototype.substr() ─ MDN (영문)
if ( "ab".substr(-1) != "b" ){ 
    String.prototype.substr = function substr ( substr ){ 
        return function ( start, length ){ 
            return substr.call( this, start < 0 ? this.length + start : start, length ) 
        } 
    }( String.prototype.substr ); 
} 
</script>

위의 내용대로 해도, 잘 실행된다.
하지만, 나는 아직까지 call() 함수의 정확한 의미를 모르는터라...
아래와 같이 작성해서 사용중이다.

<script type="text/javascript">
// 출처 : https://tonks.tistory.com/158
if ( "abc".substr(-1) != "c" ){ 
    String.prototype.substr = function ( start, length ){ 
        if ( start < 0 ){ 
            start = ( Math.abs(start) > this.length ) ? 0 : this.length + start; 
        } 
        length = parseInt( length, 10 ); 
        if ( isNaN (length) || length == 0 ){  return "";  } 
        else {  length = ( length > 0 ) ? start + length : start;  } 
        return this.substring( start, length ); 
    } 
} 
</script> 

---

가져올 문자열의 위치를 알고 있을 때

아래는, substr() 함수의 기본적인 사용법에 대한 내용이다.

1. 시작점으로 설정할 위치값만 넣어주면, 가져오는 문자열은 시작점(위치값)부터 그 문장의 끝까지이다.

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

<p id="text">Fri, 09 Sep 2016 14:24:09</p>

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


<script type="text/javascript"> 
var string = document.getElementById( "text" ).innerHTML; 

var first = string.substr( 0 ); 
var second = string.substr( 1 ); 

function testing (){ 
    demo1.innerHTML = first; 
    demo2.innerHTML = second; 
} 
</script>
 

<p id="text">Fri, 09 Sep 2016 14:24:09</p>

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

---

2. 위치값으로 양수(+)를 넣어주면, 시작점은 그 숫자만큼 앞에서부터 뒤쪽으로 이동한 지점이다.

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

<p id="text">Fri, 09 Sep 2016 14:24:09</p>

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


<script type="text/javascript"> 
var string = document.getElementById( "text" ).innerHTML; 

var positive1 = string.substr( 12 ); 
var positive2 = string.substr( 12, 4 ); 

function testing (){ 
    demo1.innerHTML = positive1; 
    demo2.innerHTML = positive2; 
} 
</script>
 

<p id="text">Fri, 09 Sep 2016 14:24:09</p>

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

---

3. 위치값으로 음수(-)를 넣어주면, 시작점은 그 숫자만큼 뒤에서부터 앞쪽으로 이동한 지점이다.

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

<p id="text">Fri, 09 Sep 2016 14:24:09</p>

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


<script type="text/javascript"> 
var string = document.getElementById( "text" ).innerHTML; 

var negative1 = string.substr( -8 ); 
var negative2 = string.substr( -8, 5 ); 

function testing (){ 
    demo1.innerHTML = negative1; 
    demo2.innerHTML = negative2; 
} 
</script>
 

<p id="text">Fri, 09 Sep 2016 14:24:09</p>

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

---

4. 가져올 문자열의 길이를 0(zero)으로 설정해주면, 그 길이가 0인 문자를 가져오라는 뜻이 되므로
말 그대로 길이가 0인, 빈 문자열( "" )을 가져다준다.
따라서, 아래 버튼을 누르게 되면, 마치 함수가 실행되지 않은 것처럼 여겨질 것이다.

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

<p id="text">Fri, 09 Sep 2016 14:24:09</p>

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


<script type="text/javascript"> 
var string = document.getElementById( "text" ).innerHTML; 

var zero1 = string.substr( 12, 0 ); 
var zero2 = string.substr( -8, 0 ); 

function testing (){ 
    demo1.innerHTML = zero1; 
    demo2.innerHTML = zero2; 
} 
</script>
 

<p id="text">Fri, 09 Sep 2016 14:24:09</p>

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

---

5. 길이값으로 전체 문자열의 길이보다 더 큰 숫자를 넣어주면, 가져오는 문자열은 위치값부터 그 문장의 끝까지이다.
전체 길이에서 위치값을 빼준 숫자보다 더 클 경우에도, 결과는 같다.

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

<p id="text">Fri, 09 Sep 2016 14:24:09</p>

<p id="demo"></p>


<script type="text/javascript"> 
var string = document.getElementById( "text" ).innerHTML; 

var over = string.substr( 12, 30 ); 

function testing (){ 
    demo.innerHTML = over; 
} 
</script>
 

<p id="text">Fri, 09 Sep 2016 14:24:09</p>

<p id="demo"> </p>

---

가져올 문자열의 위치를 모를 때

1. indexOf() 함수를 사용하여 위치값 알아내기

 
<script type="text/javascript"> 
var str = "안녕하세요. 즐거운 시간을 보내고 계신가요?"; 
var index = str.indexOf( " 즐거운 " ); 

var sub1 = str.substr( 0, index ); 
var sub2 = str.substr( index, 7 ); 

function testing (){    demo.innerHTML = sub1 + "♪" + sub2;    } 
</script>
 

 

내가 substr()을 주로 사용하는 경우는,
소수점이 있는 숫자들에서, 소수점의 특정 자릿수에서, 그 이후의 숫자를 잘라버려야 할 때이다.

아래는, indexOf() 함수를 사용하여 소수점의 위치를 찾아낸 후, substr()으로 원하는 자릿수까지만 가져오는 방법이다.

 
function roundingDown ( number, place ){
        var str = "" + number; // 숫자를 문자로 바꿔주기 
        var index = str.indexOf( "." ); // 소수점의 위치 찾기 
        if ( index < 0 ){  return number;  } // 소수점이 없으면, 숫자를 그대로 돌려주고 끝내기 
        str = str.substr( 0, index + place ); // 소수점 이하, 원하는 부분까지만 가져오기 
        return parseFloat( str ); // 숫자로 다시 변환해서 돌려주고 끝내기 
} 

var array = [ 369 , 123.456 , 78.9123 , 4.56 ]; // 여러 숫자들을 담아놓은 배열. 
var place = 3; // 삭제를 시작할 위치( 소수점 이하 셋째자리부터 버리기로 함 ) 
var x = 0; 
for ( x = 0; x < array.length; x++ ){ // 배열 안의 소수들을 버림하기  
        array[ x ] = roundingDown( array[ x ], place ); 
} 

function testing (){    demo.innerHTML = array.join( " , " );    } 
 

 

---

2. search()와 정규식(정규표현식)을 사용하여 위치값 알아내기

<script type="text/javascript"> 
var str = "지금부터 500원 할인된 가격으로 팝니다."; 
var search = str.search( /\d+/ ); 
var sub = str.substr( search, 7 ); 
function testing (){    demo.innerHTML = sub;    } 
</script>

 

가져올 문자열이, 대문자인지 소문자인지가 아리송할 때 써먹는 방법이다.

<script type="text/javascript"> 
var str = "Welcome Seoul, Korea!!"; 
var search = str.search( /seoul/i ); 
var sub = str.substr( search, 12 ); 
function testing (){    demo.innerHTML = sub;    } 
</script>

 

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