sorting A-Z and 1-9

by Евгений

HTML

<div class="wrap"></div>

CSS

.wrap {
  display: flex;
}

.result {
  border-right: 1px solid #eaeaea;
  padding: 0 10px;
}

.title {
  font-weight: 700;
  border-bottom: 1px solid #eaeaea;
}

JavaScript

const data = [
  'aA',
  '1000',
  'B330',
  'B34',
  'aaab4',
  'aab4',
  'A120',
  'J954',
  '12',
  'z201',
  'z35',
  '5000',
  'f34u20',
  'f200u19',
  'e34u20',
  'e34u3',
  '2020',
  '203',
  'd24a',
  'd100a',
];

const sortings = [
  (a, b) => {
    const aParts = a.split(/([\d]+)/);
    const bParts = b.split(/([\d]+)/);
    const minLength = Math.min(aParts.length, bParts.length);
    for (let i = 0; i < minLength; i++) {
      if (aParts[i] === bParts[i]) continue;
      if (/\d+/.test(aParts[i]) && /\d+/.test(bParts[i])) {
        return aParts[i] - bParts[i];
      };
      const lowerCaseA = aParts[i].toLocaleLowerCase();
      const lowerCaseB = bParts[i].toLocaleLowerCase();
      return lowerCaseA.localeCompare(lowerCaseB);
    };
    return 0;
  },
  (a, b) => /[A-Za-z]/.test(a) - /[A-Za-z]/.test(b) || a.charCodeAt(0) - b.charCodeAt(0),
  (a, b) => /[A-Za-z]/.test(a) - /[A-Za-z]/.test(b) || (a.toUpperCase() < b.toUpperCase() ? -1 : a.toUpperCase() > b.toUpperCase() ? 1 : 0),
];

sortings.forEach((sortingFn, index) => {
  const wrapEl = document.querySelector('.wrap');
  const resultEl = document.createElement('div');
  resultEl.className = "result";
  resultEl.innerHTML = `<div class="title">sort${index}</div>` + [...data].sort(sortingFn).join('<br>');
  wrapEl.appendChild(resultEl);
});