Natürliche Array-Elementsortierung: Zeichenfolgen mit Zahlen

Dieser Artikel befasst sich mit der Aufgabe, Arrays zu sortieren, die Elemente enthalten, die Zeichenfolgen und Zahlen in einem kombinieren natürliche Reihenfolge, wobei numerische Sequenzen innerhalb der Zeichenfolgen beim Sortierprozess berücksichtigt werden sollten.

Die Problem

Betrachten Sie ein Array wie dieses:

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

Wenn wir versuchen, dieses Array mit einer herkömmlichen Sortierfunktion zu sortieren, erhalten wir möglicherweise eine falsche Reihenfolge:

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

Die Lösung: Natürliche Sortierung

Um eine natürliche Sortierung zu erreichen, können wir die folgende JavaScript-Funktion nutzen:

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

Diese Funktion tokenisiert die Eingabezeichenfolgen in Arrays numerischer und nicht numerischer Werte. Anschließend werden die Arrays lexikografisch verglichen, wobei die numerischen Werte als Ganzzahlen und die nicht numerischen Werte als Zeichenfolgen berücksichtigt werden.

Beispiel

Anwenden dieser Funktion auf das angegebene Array ergibt die gewünschte natürliche Sortierreihenfolge:

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

Dies erzeugt das folgende sortierte Array:

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