Maison >interface Web >js tutoriel >Comment trier un tableau avec des éléments contenant à la fois des chaînes et des nombres dans un ordre naturel, comme « img12.png » et « img10.png » ?
Tri naturel des éléments d'un tableau avec des composants de chaîne et numériques
Dans certains cas, nous rencontrons des tableaux contenant des éléments qui suivent un format particulier, comme sous forme de chaînes avec des nombres incorporés. Trier de tels tableaux dans un ordre logique, appelé « tri naturel », présente un défi.
Défi
Considérez un tableau comme :
["IL0 Foo", "PI0 Bar", "IL10 Baz", "IL3 Bob says hello"]
Pour atteindre le résultat souhaité tri :
["IL0 Foo", "IL3 Bob says hello", "IL10 Baz", "PI0 Bar"]
Solution
Le tri naturel nécessite une fonction de comparaison qui prend en compte à la fois les composants numériques et textuels au sein de chaque élément. Voici une implémentation JavaScript :
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; }
Explication
Exemple
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é serait :
["", "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!