JSFiddle - React, Tailwind, and code Playground

by abubelinha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.js"></script>
Finally I could sort my codes as non-numeric stuff:
<ul id="xcst">
  <li>mycode.1-811</li>
  <li>mycode.1.321</li>
  <li>mycode.1-5234</li>
  <li>mycode.2.2</li>
  <li>mycode.2-123</li>
  <li>mycode.2.007</li>
  <li>mycode.1.0</li>
  <li>mycode.1-1</li>
</ul>

CSS

li {
  font: monospace;
}

JavaScript

function sortCodes(a,b) {
      var sa=a.elm.textContent.toString();
      var sb=b.elm.textContent.toString();
      return sa===sb ? 0 : (sa>sb?1:-1);
}
function sortByLength(a,b) {
    var lenA = a.elm.textContent.length,
      lenB = b.elm.textContent.length;
    return lenA === lenB ? 0 : (lenA > lenB ? 1 : -1);
}
tinysort('ul#xcst>li', {
  sortFunction: sortByLength
});