[ 자바스크립트 ] 리스트 정렬하기

최종 수정일 : 2017. 12. 21.

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

리스트 목록을 정렬해주는 함수를 만들어 보았다.

아래 내용은, <ul> 태그 & <table> 태그에서만 사용 가능하다. (다른 태그에서는 사용 불가.)

 
<script type="text/javascript">

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


/* 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; 
} 


/* byLocale() */ 

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 }; 
} 


/* replacement() */ 
 

function replacement( parent ){  
        var tagName = parent.tagName.toLowerCase(); 
        if ( tagName == "table" ) parent = parent.tBodies[ 0 ]; 
        tagName = parent.tagName.toLowerCase(); 
        if ( tagName == "tbody" ) var children = parent.rows; 
        else var children = parent.getElementsByTagName( "li" ); 

        var replace = { 
                order : byLocale(), 
                index : false, 
                array : function(){ 
                        var array = [ ]; 
                        for ( var x = 0; x < children.length; x++ ) array[ x ] = children[ x ]; 
                        return array; 
                }(), 
                checkIndex : function( index ){ 
                        if ( index ) this.index = parseInt( index, 10 ); 
                        var tagName = parent.tagName.toLowerCase(); 
                        if ( tagName == "tbody" && ! index ) this.index = 0; 
                }, 
                getText : function( child ){ 
                        if ( this.index ) child = child.cells[ this.index ]; 
                        return getTextByClone( child ); 
                }, 
                setChildren : function(){ 
                        var array = this.array; 
                        while ( parent.hasChildNodes() ) parent.removeChild( parent.firstChild ); 
                        for ( var x = 0; x < array.length; x++ ) parent.appendChild( array[ x ] ); 
                }, 
                ascending : function( index ){ // 오름차순 
                        this.checkIndex( index ); 
                        var _self = this; 
                        var order = this.order; 
                        var ascending = function( a, b ){ 
                                var a = _self.getText( a ); 
                                var b = _self.getText( b ); 
                                return order.ascending( a, b ); 
                        }; 
                        this.array.sort( ascending ); 
                        this.setChildren(); 
                }, 
                descending : function( index ){ // 내림차순
                        this.checkIndex( index ); 
                        var _self = this; 
                        var order = this.order; 
                        var descending = function( a, b ){ 
                                var a = _self.getText( a ); 
                                var b = _self.getText( b ); 
                                return order.descending( a, b ); 
                        }; 
                        this.array.sort( descending ); 
                        this.setChildren(); 
                } 
        }; 
        return replace; 
} 

function getTextByClone( tag ){  
        var clone = tag.cloneNode( true ); // 태그의 복사본 만들기. 
        var br = clone.getElementsByTagName( "br" ); 
        while ( br[0] ){ 
                var blank = document.createTextNode( " " ); 
                clone.insertBefore( blank , br[0] ); 
                clone.removeChild( br[0] ); 
        } 
        var isBlock = function( tag ){ 
                var display = ""; 
                if ( window.getComputedStyle ) display = window.getComputedStyle ( tag, "" )[ "display" ]; 
                else display = tag.currentStyle[ "display" ]; 
                return ( display == "block" ) ? true : false; 
        }; 
        var children = clone.getElementsByTagName( "*" ); 
        for ( var x = 0; x < children.length; x++){ 
                var child = children[ x ]; 
                if ( ! ("value" in child) && isBlock(child) ) child.innerHTML = child.innerHTML + " "; 
        } 
        var textContent = ( "textContent" in clone ) ? clone.textContent : clone.innerText; 
        return textContent; 
} 
</script>

---

오른쪽에 있는 텍스트 입력창 안에, 원하는 내용을 입력한 후,
"리스트 바꾸기" 버튼을 눌러서, 직접 테스트해볼 수 있다.

"리스트 정렬하기" 옆의 버튼을 눌러보면, 가나다순으로 정렬되거나, 역순으로 정렬된다.

리스트 정렬하기

• 네이버
• 다음
• 네이트
• 줌
• 드림위즈
• Google
• Baidu
• Yahoo!
• Bing
• Ask
• DuckDuckGo
• IconFinder

---

 
<p>리스트 정렬하기 <button onclick="sortLI()">▲</button> <button onclick="reverseLI()">▼</button> </p>

<ul id="lists"> 
    <li> 네이버 </li> 
    <li> 다음 </li> 
    <li> 네이트 </li>
    <li> 줌 </li>
    <li> 드림위즈 </li> 
    <li> Google </li> 
    <li> Baidu </li> 
    <li> Yahoo! </li> 
    <li> Bing </li> 
    <li> Ask </li> 
    <li> DuckDuckGo </li> 
    <li> IconFinder </li> 
</ul>
 

<script type="text/javascript">
var myUL = document.getElementById( "lists" ); 
var replace = replacement( myUL ); 
function sortLI(){  replace.ascending();  } 
function reverseLI(){  replace.descending();  } 
</script>

---

이 블로그에 있는, "[ 자바스크립트 ] 배열 정렬용 함수 만들기"를 참고하여,
"ordinary()" 함수를 추가해서, 아래처럼 작성할 수도 있다.

 
<script type="text/javascript">

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 }; 
} 

</script>
 

 
<p>리스트 정렬하기 <button onclick="sortLI()">▲</button> <button onclick="reverseLI()">▼</button> </p>

<ul id="lists">
    <li> 네이버 </li> 
    <li> 다음 </li> 
    <li> 네이트 </li>
    <li> 줌 </li>
    <li> 드림위즈 </li> 
    <li> Google </li> 
    <li> Baidu </li> 
    <li> Yahoo! </li> 
    <li> Bing </li> 
    <li> Ask </li> 
    <li> DuckDuckGo </li> 
    <li> IconFinder </li> 
</ul>
 

 
<script type="text/javascript">

var myUL = document.getElementById( "lists" ); 
var replace = replacement( myUL ); 

replace.order = ordinary(); 

function sortLI(){   replace.ascending();   } 
function reverseLI(){   replace.descending();   } 

</script>
 

리스트 정렬하기

• 네이버
• 다음
• 네이트
• 줌
• 드림위즈
• Google
• Baidu
• Yahoo!
• Bing
• Ask
• DuckDuckGo
• IconFinder

---

이 내용을 <table>태그에서 사용하려면, 아래 글을 참고하시오~*.
☞ [ 자바스크립트 ] 테이블 정렬하기

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