Как сделать сортировку списка li начиная с 4 символа

Question

Есть список

<ul id="list">    
  <li>22ЯУН</li>
  <li>32КАП</li>
  <li>42ЛОС</li>
  <li>52ТОР</li>
  <li>12КОМ</li>
</ul>

Как создать сортировку, которая сможет сортировать список li начиная с 3 символа (буквы)

Ожидаемый результат

<ul>
  <li>32КАП</li>
  <li>12КОМ</li>
  <li>42ЛОС</li>
  <li>52ТОР</li>
  <li>22ЯУН</li>
</ul>

Исходный код (болванка)

let list = document.querySelector('#list');
let items = document.querySelectorAll('#list li');
let button = document.querySelector('#button');

button.addEventListener('click', function() { //Сортировка элементов по нажатию кнопки
  let sorted = [...items].sort(function(a, b) { //На данный момент эта функция может сортировать только числа. 
    return a.innerHTML - b.innerHTML;
  });

  list.innerHTML = ''; //Очистка списка (меняем все значение на "пустоту")
  /*Вставка отсортированного списка в уже существующий*/
  for (let li of sorted) {
    list.appendChild(li);
  }
  console.log(sorted);

});

<ul id="list">
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>1</li>
</ul>

<!--
<ul id="list">
  <li>22ЯУН</li>
  <li>32КАП</li>
  <li>42ЛОС</li>
  <li>52ТОР</li>
  <li>12КОМ</li>
</ul>
-->

<input type="submit" id="button">

Answer 1

'a' - 'b' равно NaN. Поэтому и не сортировалось.

Тут можно почитать больше о сравнениях.

const list = document.querySelector('#list');
const items = document.querySelectorAll('#list li');
const button = document.querySelector('#button');

button.addEventListener('click', () => {
  const sorted = [...items].sort((a, b) => {
    a = a.innerHTML.substr(2);
    b = b.innerHTML.substr(2);
    if (a > b) return 1;
    if (a < b) return -1;
    return 0;
  });

  list.innerHTML = '';
  
  for (const li of sorted) {
    list.appendChild(li);
  }
});

<ul id="list">
  <li>22ЯУН</li>
  <li>32КАП</li>
  <li>42ЛОС</li>
  <li>52ТОР</li>
  <li>12КОМ</li>
</ul>

<input type="submit" id="button">

Answer 2

let list = document.querySelector('#list');
let items = document.querySelectorAll('#list li');
let button = document.querySelector('#button');

button.addEventListener('click', function (){
    let sorted = [...items].sort(function (a, b){   
        let collator = new Intl.Collator('ru-RU');
        return collator.compare(a.innerHTML.substring(2), b.innerHTML.substring(2));   
    });

    list.innerHTML = '';
    
    for(let li of sorted){
        list.appendChild(li);
    }
    
    console.log(sorted);
});

<ul id="list">
  <li>22ЯУН</li>
  <li>32КАП</li>
  <li>42ЛОС</li>
  <li>52ТОР</li>
  <li>12КОМ</li>
</ul>


<input type="submit" id="button">

БЛОГ НА HUSL

Как сделать сортировку списка li начиная с 4 символа

Ответы (2 шт):