Question 208556 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I want sort this array with this method

var img = [
          "IMG_COM_20220516_1150_41_1375.webp",
          "IMG_COM_20220516_1150_41_13810.webp",
          "IMG_COM_20220516_1150_41_1386.webp",
          "IMG_COM_20220516_1150_41_1389.webp",
          "IMG_COM_20220516_1150_41_13911.webp",
          "IMG_COM_20220516_1150_41_13912.webp",
        ];

I want to sort this array by bigger number
when I try .sort() didn’t change

I want the result be like this

[
          "IMG_COM_20220516_1150_41_1375.webp",
          "IMG_COM_20220516_1150_41_1386.webp",
          "IMG_COM_20220516_1150_41_1389.webp",
          "IMG_COM_20220516_1150_41_13810.webp",
          "IMG_COM_20220516_1150_41_13911.webp",
          "IMG_COM_20220516_1150_41_13912.webp",
        ]
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    I found this online

    fixing everything for me

    Array.prototype.humanSort = function() {
return this.sort((function(e, t) {
    for (var n = e.split(/(d+)/), r = t.split(/(d+)/), o = 0; o < Math.max(n.length, r.length); o++)
        if (n[o] != r[o]) {
            var i = isNaN(parseInt(n[o], 10)) ? n[o] : parseInt(n[o], 10)
              , a = isNaN(parseInt(r[o], 10)) ? r[o] : parseInt(r[o], 10);
            return null == i || null == a ? n.length - r.length : i < a ? -1 : 1
        }
    return 0
}
)) };

  2. 0

    To sort the array based on the numerical values within the strings, you can use a custom sort function with the sort() method. The custom sort function should extract the numerical part from the strings and compare them numerically. Here’s how you can do it:

    var img = [
  "IMG_COM_20220516_1150_41_1375.webp",
  "IMG_COM_20220516_1150_41_13810.webp",
  "IMG_COM_20220516_1150_41_1386.webp",
  "IMG_COM_20220516_1150_41_1389.webp",
  "IMG_COM_20220516_1150_41_13911.webp",
  "IMG_COM_20220516_1150_41_13912.webp",
];

img.sort(function (a, b) {
  // Extract the numerical part from the strings (last segment before .webp)
  const numA = parseInt(a.split("_").pop().split(".")[0]);
  const numB = parseInt(b.split("_").pop().split(".")[0]);

  // Compare the numerical values
  return numA - numB;
});

console.log(img);

    This will output the sorted array as you desired:

    [  "IMG_COM_20220516_1150_41_1375.webp",  "IMG_COM_20220516_1150_41_1386.webp",  "IMG_COM_20220516_1150_41_1389.webp",  "IMG_COM_20220516_1150_41_13810.webp",  "IMG_COM_20220516_1150_41_13911.webp",  "IMG_COM_20220516_1150_41_13912.webp"]
    Login or Signup to reply.
  3. 0

    This example uses a regex to match value content and sort the numbers accordingly in descending order.

     // Sort array in ascending order.
function sortArrayAscending(arr) {
  arr.sort(function(a, b) {
    var numberA = getLastNumber(a);
    var numberB = getLastNumber(b);
    return numberA - numberB;
  });
  return arr;
}

 // Function retrieves the last number
function getLastNumber(str) {
  const regex = /(d+).webp$/; 
  const match = str.match(regex);
  if (match) {
    return parseInt(match[1]); 
  }
  return null; 
}

const arr = [
  "IMG_COM_20220516_1150_41_1375.webp",
  "IMG_COM_20220516_1150_41_13810.webp",
  "IMG_COM_20220516_1150_41_1386.webp",
  "IMG_COM_20220516_1150_41_1389.webp",
  "IMG_COM_20220516_1150_41_13911.webp",
  "IMG_COM_20220516_1150_41_13912.webp",
];

const sortedArr = sortArrayAscending(arr);
console.log(sortedArr);
    Login or Signup to reply.
  4. 0

    You can try this

    var img = [
  "IMG_COM_20220516_1150_41_1375.webp",
  "IMG_COM_20220516_1150_41_13810.webp",
  "IMG_COM_20220516_1150_41_1386.webp",
  "IMG_COM_20220516_1150_41_1389.webp",
  "IMG_COM_20220516_1150_41_13911.webp",
  "IMG_COM_20220516_1150_41_13912.webp",
];

img.sort((a, b) => {
    return a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'});
});

console.log(img);

// Output
// [
//   'IMG_COM_20220516_1150_41_1375.webp',
//   'IMG_COM_20220516_1150_41_1386.webp',
//   'IMG_COM_20220516_1150_41_1389.webp',
//   'IMG_COM_20220516_1150_41_13810.webp',
//   'IMG_COM_20220516_1150_41_13911.webp',
//   'IMG_COM_20220516_1150_41_13912.webp'
// ]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search