JSFiddle - React, Tailwind, and code Playground

by blesh

JavaScript

function naturalSort(arr) {
    var allKeys = arr.map(makeKeys),
        maxKeyLen = allKeys.map(function (x) {
            return x.length;
        }).sort()[allKeys.length - 1],
        col = 0;
    while (col < maxKeyLen) {
        allKeys.sort(function (a, b) {
            if (isUndefined(a[col])) {
                return 1;
            }
            if (isUndefined(b[col])) {
                return -1;
            }
            return a[col] - b[col];
        });
        col++;
    }
    return allKeys.map(function(x) {
        return x.val;
    });
}

function makeKeys(item) {
    var keys = item.split(/(\d+)/).map(convert);
    keys.val = item;
    return keys;
}

function convert(val) {
    return isNaN(val) ? val : parseInt(val);
}

function isUndefined(obj) {
    return typeof obj === 'undefined';
}