Sort array by first character then number in JavaScript

Question

There is list of object contains data like below:

[
    {name: 'Foo 1'},
    {name: 'Foo 14'},
    ..
    {name: 'Foo 2'},
    {name: 'Bar 1'},
    {name: 'Bar 15'},
    ...
    {name: 'Bar 2'},
]

I need to sort this as

[
    {name: 'Bar 1'},
    {name: 'Bar 2'},
    ...
    {name: 'Bar 15'},
    {name: 'Foo 1'},
    {name: 'Foo 1'},
    ...
    {name: 'Foo 12'},
]

With classic character sorting 'Foo 14' gets ahead of 'Foo 2' so I need to sort by letter and numbers.

value pattern: There might be multiple words but always ends with number like "word word .. number"

Yes but word can be more than one, but it always ends with number — TyForHelpDude
– TyForHelpDude, Commented Dec 3, 2021 at 17:03

Zsolt Meszaros · Accepted Answer · 2021-12-03 17:09:19Z

8

You could use Collator#compare for this. The compare() method compares two strings according to the sort order of the Intl.Collator object. Just make sure you pass an options object where you set numeric to true:

const collator = new Intl.Collator("en", {
  numeric: true,
  sensitivity: "base",
});

const arr = [
  { name: "Foo 1" },
  { name: "Baz 21" },
  { name: "Foo 14" },
  { name: "Foo 2" },
  { name: "Bar 1" },
  { name: "Baz 10" },
  { name: "Bar 15" },
  { name: "Bar 2" },
  { name: "Baz 1" },
  { name: "Baz 2" },
];

const sorted = arr.sort((a, b) => collator.compare(a.name, b.name));

console.log(sorted);

answered Dec 3, 2021 at 17:09

Zsolt Meszaros

23.3k19 gold badges60 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

TyForHelpDude Over a year ago

it works perfect!

ShamPooSham Over a year ago

Nice answer! I would have done it with regex and do the logic myself, but this is much better. Nice to learn about collator and the numeric option

Zsolt Meszaros Over a year ago

Great, I'm glad it works :)

Tawfik Nasser Over a year ago

twice faster than localeCompare. nice answer +1

Zsolt Meszaros · Accepted Answer · 2021-12-03 18:11:10Z

2

It appears that Intl.Collator is almost twice as fast as localeCompare. So, I would use @ZsoltMeszaros answer.

Using String.prototype.localeCompare():

const arr = [
  { name: "Foo 1" },
  { name: "Baz 21" },
  { name: "Foo 14" },
  { name: "Foo 2" },
  { name: "Bar 1" },
  { name: "Baz 10" },
  { name: "Bar 15" },
  { name: "Bar 2" },
  { name: "Baz 1" },
  { name: "Baz 2" },
];

console.log(arr.sort((a,b)=>a.name.localeCompare(b.name,'en',{numeric : true})))

edited Dec 3, 2021 at 18:11

Zsolt Meszaros

23.3k19 gold badges60 silver badges70 bronze badges

answered Dec 3, 2021 at 17:51

Tawfik Nasser

1,13411 silver badges19 bronze badges

Collectives™ on Stack Overflow

Sort array by first character then number in JavaScript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related