JavaScript - Natural Sorting a FileList Object - Stack Overflow

admin管理员组

文章数量:1318998

I have a filelist object that contains over 1000 image files. I want the object to be sorted by file name, which is alphanumeric. In other words, I want to do a natural sort. The file names are like this:

d_1_ct.png
d_2_ct.png
d_3_ct.png
d_4_ct.png

Turning the filelist object into an array by doing [].slice.call(filelist_object) or Array.from(filelist_object) and then calling sort() results in alphabetical sort only. How can I make the filelist object naturally sorted on file name?

I am okay with turning it into an array, as long as I'm able to display the image files using URL.createObjectURL() on the array elements.

Natural-sorting alphanumeric strings is not what I'm looking for, though the names of my files in the filelist object are alphanumeric strings. The filelist object contains the following properties:

0: File
lastModified: 1493435514308
lastModifiedDate: Sat Apr 29 2017 08:41:54 GMT+0530 (India Standard Time)
name: "d_1_ct.png"
size: 5307
type: "image/png"
webkitRelativePath: "img/d_1_ct.png"
__proto__:File

I want to sort on either name or webkitRelativePath, while retaining all the properties of the filelist object, as I am using the index numbers of the object to display the images.

I have a filelist object that contains over 1000 image files. I want the object to be sorted by file name, which is alphanumeric. In other words, I want to do a natural sort. The file names are like this:

d_1_ct.png
d_2_ct.png
d_3_ct.png
d_4_ct.png

Turning the filelist object into an array by doing [].slice.call(filelist_object) or Array.from(filelist_object) and then calling sort() results in alphabetical sort only. How can I make the filelist object naturally sorted on file name?

I am okay with turning it into an array, as long as I'm able to display the image files using URL.createObjectURL() on the array elements.

Natural-sorting alphanumeric strings is not what I'm looking for, though the names of my files in the filelist object are alphanumeric strings. The filelist object contains the following properties:

0: File
lastModified: 1493435514308
lastModifiedDate: Sat Apr 29 2017 08:41:54 GMT+0530 (India Standard Time)
name: "d_1_ct.png"
size: 5307
type: "image/png"
webkitRelativePath: "img/d_1_ct.png"
__proto__:File

I want to sort on either name or webkitRelativePath, while retaining all the properties of the filelist object, as I am using the index numbers of the object to display the images.

• javascript
• natural-sort
• filelist

Share Improve this question Follow edited Apr 29, 2017 at 11:15 mixedbag99 asked Apr 29, 2017 at 10:35 mixedbag99mixedbag99 52911 gold badge44 silver badges1717 bronze badges 3

• Think this might help you out stackoverflow./questions/2802341/… – webbm Commented Apr 29, 2017 at 10:45
• Possible duplicate of Javascript : natural sort of alphanumerical strings – idmean Commented Apr 29, 2017 at 11:10
• Updated to explain why it isn't a duplicate of natural sort of alphanumeric strings. – mixedbag99 Commented Apr 29, 2017 at 11:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I first converted my filelist object into an array using Array.from().

myArray = Array.from(myFileListObject);

Then, I used the naturalCompare() function written by Lauri Rooden. Here is the GitHub link.

I then called the naturalCompare() function on my array as follows:

myArray.sort(function(a,b) {
    return String.naturalCompare(a.name, b.name)
});

My array is now "naturally" sorted correctly. It still retains all the properties of the filelist object, so I am still able to use the URL.createObjectURL() method on its contents to display the images.

There's now a much easier way using localeCompare: http://fuzzytolerance.info/blog/2019/07/19/The-better-way-to-do-natural-sort-in-JavaScript/

const items =  ['3rd', 'Apple', '24th', '99 in the shade', 'Dec', '10000', '101', '$1.23']
items.sort((a, b) => a.localeCompare(b, navigator.languages[0] || navigator.language, {numeric: true, ignorePunctuation: true}))
console.log(items)

// [ "$1.23", "3rd", "24th", "99 in the shade", "101", "10000", "Apple", "Dec" ]

Additionally, you can speed this up by declaring the collator object beforehand.

for a long time, i solved this for german "Umlaute" you can adapt this...

    function fhwSort(a, b){
       function fhwSplit(fstring){
          var mapObj = {
                ä:"ae",
                ö:"oe",
            ü:"ue",
            Ä:"ÄE",
            Ö:"ÖE",
            Ü:"UE",
            ß:"ss"
            };
          fstring = fstring.replace(/ä|ö|ü|Ä|ö|ü|ß/gi, function(matched){
                       return mapObj[matched];
                  });
          return fstring.toUpperCase().replace(/\d*/g, function (x) {
            return !x=="" ? '0'.repeat(20).substr(0,20-x.length)+x:'';});
       }
       a=fhwSplit(a["name"]);    
       b=fhwSplit(b["name"]);    
       return (a>b)+(a<b)*-1;
    }
    var data = [
       {name : "5.1. Test 3"},
       {name : "5.1. Test 1"},
       {name : "5.2. Test 2"},
       {name : "5.10. Test 10"},
       {name : "5.12. Test 12"},
       {name : "Karl"},
       {name : "Kader"},
       {name : "Käse"},
       {name : "Kuchen"}

       ];
    console.log("fhwSort");
    data.sort(fhwSort);
    for (var i = 0; i < data.length; i++){
      console.log(data[i]["name"]);
    }

本文标签： JavaScriptNatural Sorting a FileList ObjectStack Overflow