[ 자바스크립트 ] 배열 정렬용 함수 만들기

최종 수정일 : 2016. 6. 25.

천단위 쉼표가 들어간 숫자일 때, 오류가 나는 부분을 수정함.

배열 안에 들어있는 내용들을 정렬해주는 함수를 만들어보았다.

자바스크립트에서 기본적으로 제공되는, sort()를 이용하는 방법이다.

참고로, sort()는 배열에서만 사용할 수 있다.

 
<script type="text/javascript">

// 출처 : https://tonks.tistory.com/117 
// 에러가 나온다면, 여기에 댓글을 남겨주세요. 


/* sortingNumber() : 숫자인 실수만으로 되어있을 때, 적용될 함수 */ 

function sortingNumber( a , b ){  

        if ( typeof a == "number" && typeof b == "number" ) return a - b; 

        // 천단위 쉼표와 공백문자만 삭제하기.  
        var a = ( a + "" ).replace( /[,\s\xA0]+/g , "" ); 
        var b = ( b + "" ).replace( /[,\s\xA0]+/g , "" ); 

        var numA = parseFloat( a ) + ""; 
        var numB = parseFloat( b ) + ""; 

        if ( numA == "NaN" || numB == "NaN" || a != numA || b != numB ) return false; 

        return parseFloat( a ) - parseFloat( b ); 
} 


/* changeForSorting() : 문자열 바꾸기. */ 

function changeForSorting( first , second ){  

        // 문자열의 복사본 만들기. 
        var a = first.toString().replace( /[\s\xA0]+/g , " " ); 
        var b = second.toString().replace( /[\s\xA0]+/g , " " ); 

        var change = { first : a, second : b }; 

        if ( a.search( /\d/ ) < 0 || b.search( /\d/ ) < 0 || a.length == 0 || b.length == 0 ) return change; 

        var regExp = /(\d),(\d)/g; // 천단위 쉼표를 찾기 위한 정규식. 

        a = a.replace( regExp , "$1" + "$2" ); 
        b = b.replace( regExp , "$1" + "$2" ); 

        var unit = 0; 
        var aNb = a + " " + b; 
        var numbers = aNb.match( /\d+/g ); // 문자열에 들어있는 숫자 찾기 

        for ( var x = 0; x < numbers.length; x++ ){ 

                var length = numbers[ x ].length; 
                if ( unit < length ) unit = length; 
        } 

        var addZero = function( string ){ // 숫자들의 단위 맞추기 

                var match = string.match( /^0+/ ); 

                if ( string.length == unit ) return ( match == null ) ? string : match + string; 

                var zero = "0"; 

                for ( var x = string.length; x < unit; x++ ) string = zero + string; 

                return ( match == null ) ? string : match + string; 
        }; 

        change.first = a.replace( /\d+/g, addZero ); 
        change.second = b.replace( /\d+/g, addZero ); 

        return change; 
} 

/*    ordinary() 
 * 
 * 1. ascending : 오름차순 
 * 2. descending : 내림차순 
*/ 

function ordinary(){ 

        var compare = function( a , b ){ 

                var sorting = sortingNumber( a , b ); 

                if ( typeof sorting == "number" ) return sorting; 

                var change = changeForSorting( a , b ); 

                var a = change.first; 
                var b = change.second; 

                return ( a < b ) ? -1 : ( a == b ) ? 0 : 1; 
        }; 

        var ascendingOrder = function( a , b ){  return compare( a , b );  }; 
        var descendingOrder = function( a , b ){  return compare( b , a );  }; 

        return { ascending : ascendingOrder, descending : descendingOrder }; 
} 


/*    ignoreCase() : 대소문자 무시 ( toLowerCase ) 
 * 
 * 1. ascending : 오름차순 
 * 2. descending : 내림차순 
*/ 

function ignoreCase(){ 

        var compare = function( a , b ){ 

                var sorting = sortingNumber( a , b ); 

                if ( typeof sorting == "number" ) return sorting; 

                var change = changeForSorting( a , b ); 

                var a = change.first.toLowerCase(); 
                var b = change.second.toLowerCase(); 

                return ( a < b ) ? -1 : ( a == b ) ? 0 : 1;   // 또는,  return a.localeCompare ( b );
        }; 

        var ascendingOrder = function( a , b ){  return compare( a , b );  }; 
        var descendingOrder = function( a , b ){  return compare( b , a );  }; 

        return { ascending : ascendingOrder, descending : descendingOrder }; 
} 


/*    byLocale() : 로컬에 따라 ( localeCompare ) - 언어에 따라, 결과가 다를 수 있음. 
 * 
 * 1. ascending : 오름차순 
 * 2. descending : 내림차순 
*/ 

function byLocale(){ 

        var compare = function( a , b ){ 

                var sorting = sortingNumber( a , b ); 

                if ( typeof sorting == "number" ) return sorting; 

                var change = changeForSorting( a , b ); 

                var a = change.first; 
                var b = change.second; 

                return a.localeCompare( b ); 
        }; 

        var ascendingOrder = function( a , b ){  return compare( a , b );  }; 
        var descendingOrder = function( a , b ){  return compare( b , a );  }; 

        return { ascending : ascendingOrder, descending : descendingOrder }; 
} 

</script>
 

---

<button onclick="testing()"> 결과 보기 </button>
<p id="asc"> </p>
<p id="des"> </p>

<script type="text/javascript">
var myArray = [ 100, 25, 5, 40, "tistory", "google", "네이버", "다음" ]; 
var order = ordinary(); 
function testing(){ 
        document.getElementById( "asc" ).innerHTML = myArray.sort( order.ascending ); 
        document.getElementById( "des" ).innerHTML = myArray.sort( order.descending ); 
} 
</script>

---

<button onclick="testing()"> 결과 보기 </button>
<p id="asc"> </p>
<p id="des"> </p>

<script type="text/javascript">
var myArray = [ "tistory 100", "tistory 25", "tistory 5", "tistory 40" ]; 
var order = ordinary(); 
function testing(){ 
        document.getElementById( "asc" ).innerHTML = myArray.sort( order.ascending ); 
        document.getElementById( "des" ).innerHTML = myArray.sort( order.descending ); 
} 
</script>

---

<button onclick="testing()"> 결과 보기 </button>
<p id="asc"> </p>
<p id="des"> </p>

<script type="text/javascript">
var myArray = [ "Google", "Yahoo", "google", "yahoo", "Google", "Yahoo" ]; 
var order = ordinary(); 
function testing(){ 
        document.getElementById( "asc" ).innerHTML = myArray.sort( order.ascending ); 
        document.getElementById( "des" ).innerHTML = myArray.sort( order.descending ); 
} 
</script>

<button onclick="testing()"> 결과 보기 </button>
<p id="asc"> </p>
<p id="des"> </p>

<script type="text/javascript">
var myArray = [ "Google", "Yahoo", "google", "yahoo", "Google", "Yahoo" ]; 
var order = ignoreCase(); 
function testing(){ 
        document.getElementById( "asc" ).innerHTML = myArray.sort( order.ascending ); 
        document.getElementById( "des" ).innerHTML = myArray.sort( order.descending ); 
} 
</script>

---

<button onclick="testing()"> 결과 보기 </button>
<p id="asc"> </p>
<p id="des"> </p>

<script type="text/javascript">
var myArray = [ "티스토리", "네이버", "Google", "Stackoverflow" ]; 
var order = ordinary(); 
function testing(){ 
        document.getElementById( "asc" ).innerHTML = myArray.sort( order.ascending ); 
        document.getElementById( "des" ).innerHTML = myArray.sort( order.descending ); 
} 
</script>

<button onclick="testing()"> 결과 보기 </button>
<p id="asc"> </p>
<p id="des"> </p>

<script type="text/javascript">
var myArray = [ "티스토리", "네이버", "Google", "Stackoverflow" ]; 
var order = byLocale(); 
function testing(){ 
        document.getElementById( "asc" ).innerHTML = myArray.sort( order.ascending ); 
        document.getElementById( "des" ).innerHTML = myArray.sort( order.descending ); 
} 
</script>

---

이 블로그에서 함께 볼만한 글
1. [ 자바스크립트 ] sort()
2. [ 자바스크립트 ] 테이블 정렬하기
3. [ 자바스크립트 ] 리스트 정렬하기

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