Comment implémenter un algorithme de tri naturel en JavaScript pour les tableaux contenant des éléments alphanumériques mixtes ?

Tri naturel des éléments du tableau avec des nombres et des alphabets

Déterminer l'ordre des éléments du tableau contenant des valeurs numériques et des caractères alphabétiques peut être difficile. Un tri naturel est nécessaire pour gérer ce scénario, qui organise les éléments en fonction de leurs vraies valeurs.

Échantillon de tableau et résultat souhaité

Considérez le tableau d'entrée suivant :

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

L'ordre de tri souhaité est :

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

Tri naïf Approche

Une fonction de comparaison simple, comme celle fournie, trie les éléments uniquement selon la partie initiale (2 lettres) et ignore la partie numérique :

function compare(a, b) {
  if (a < b) return -1;
  if (a > b) return 1;
  return 0;
}

Implémentation du tri naturel en JavaScript

Pour réaliser un tri naturel, la fonction suivante peut être utilisé :

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

    a.replace(/(\d+)|(\D+)/g, function(_, , ) { ax.push([ || Infinity,  || ""]) });
    b.replace(/(\d+)|(\D+)/g, function(_, , ) { bx.push([ || Infinity,  || ""]) });
    
    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;
}

Cette fonction divise chaque élément en un tableau de paires, où le premier élément est un nombre (ou l'infini s'il n'y a pas de nombre) et le deuxième élément est une chaîne :

["IL0 Foo"] -> [["0", "IL"], ["Foo", ""]]
["PI0 Bar"] -> [["0", "PI"], ["Bar", ""]]

La logique de comparaison compare ensuite les paires une à une en privilégiant les valeurs numériques. Si les valeurs numériques sont égales, les chaînes sont comparées à l'aide de localeCompare.

Exemple d'utilisation et résultat

Tri de l'échantillon de tableau à l'aide de la fonction naturalCompare :

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)

Le tableau trié sera :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!