자연 배열 요소 정렬: 숫자가 포함된 문자열

이 문서에서는 문자열과 숫자를 결합하는 요소가 포함된 배열을 정렬하는 작업에 대해 자세히 설명합니다. 자연 순서, 정렬 과정에서 문자열 내의 숫자 순서를 고려해야 합니다.

문제

다음과 같은 배열을 고려해보세요:

["IL0 Foo", "PI0 Bar", "IL10 Baz", "IL3 Bob says hello"]

기존 정렬 기능을 사용하여 이 배열을 정렬하려고 하면 잘못된 순서가 발생할 수 있습니다.

["IL0 Foo", "IL10 Baz", "IL3 Bob says hello", "PI0 Bar"]

해결책: 자연 정렬

자연 정렬을 달성하기 위해 다음을 활용할 수 있습니다. JavaScript 함수:

function naturalCompare(a, b) {
    var ax = [], bx = [];

    a.replace(/(\d )|(\D )/g, function(_, $1, $2) { ax.push([$1 || Infinity, $2 || ""]) });
    b.replace(/(\d )|(\D )/g, function(_, $1, $2) { bx.push([$1 || Infinity, $2 || ""]) });
    
    while(ax.length && bx.length) {
        var an = ax.shift();
        var bn = bx.shift();
        var nn = (an[0] - bn[0]) || an[1].localeCompare(bn[1]);
        if(nn) return nn;
    }

    return ax.length - bx.length;
}

이 함수는 입력 문자열을 숫자 값과 숫자가 아닌 값의 배열로 토큰화합니다. 그런 다음 숫자 값을 정수로 고려하고 숫자가 아닌 값을 문자열로 고려하여 사전식으로 배열을 비교합니다.

예

주어진 배열에 이 함수 적용 원하는 자연 정렬 순서가 됩니다.

test = [
    "img12.png",
    "img10.png",
    "img2.png",
    "img1.png",
    "img101.png",
    "img101a.png",
    "abc10.jpg",
    "abc10",
    "abc2.jpg",
    "20.jpg",
    "20",
    "abc",
    "abc2",
    ""
];

test.sort(naturalCompare)
document.write("<pre>"   JSON.stringify(test,0,3));

다음과 같이 정렬된 배열이 생성됩니다.

[
  "",
  "abc",
  "abc2",
  "abc10",
  "abc10.jpg",
  "20",
  "20.jpg",
  "img1.png",
  "img2.png",
  "img10.png",
  "img12.png",
  "img101.png",
  "img101a.png"
]