Q:

string.prototype.localeCompare(), script modification

I have this code:
<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>  
            Sort a list alphabetically 
        </title> 

        <script src =  
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
        </script> 
    </head>  

    <body>  
        <button> 
                click here 
            </button> 

        <ul> 
            <li>Geeks</li> 
            <li>Sosna</li> 
            <li>Zebra</li> 
            <li>GeeksForGeeks</li>
          <li><h1>G</h1></li> 
            <li><h1>F</h1></li> 
            <li>Arbuz</li> 
            <li><h1>A</h1></li>
          <li>Łódź</li> 
            <li><h1>Ł</h1></li>
          <li>ósmy</li> 
            <li><h1>Ó</h1></li> 
          <li>święty</li> 
            <li><h1>Ś</h1></li> 
          <li>ärgern</li> 
            <li><h1>Ä</h1></li> 
          <li>Österreich</li> 
            <li><h1>Ö</h1></li> 
          <li>Überraschung</li> 
            <li><h1>Ü</h1></li> 
        </ul> 

        <script> 
            function Ascending_sort(a, b) { 
                return ($(b).text().toUpperCase()) <  
                    ($(a).text().toUpperCase()) ? 1 : -1;  
            } 
            $('button').on('click', function() { 
                $("ul li").sort(Ascending_sort).appendTo('ul'); 
            });                  
        </script>  
    </body>  
</html>  

Codepen: https://codepen.io/rudolph-reti/pen/dyPzXER
I just started learning JavaScript. I can't handle it alone. I would like the list to be sorted using localeCompare() function. Could somebody help me put it into the script? 

A:

.localeCompare() already returns the correct Number value that .sort() expects, so  you don't need to worry about doing that yourself
From the Docs, the Return value of .localeCompare():

A negative number if the reference string occurs before the compare string; positive if the reference string occurs after the compare string; 0 if they are equivalent.

Your code with .localeCompare() would be as follows:
function Ascending_sort(a, b) {
  b = $(b).text().trim().toUpperCase();
  a = $(a).text().trim().toUpperCase();

  return b.localeCompare(a);
}

$('button').on('click', function() {
  $("ul li").sort(Ascending_sort).appendTo('ul');
});

Following discussion in the chat, using a sort making use a string made more sense, and has been added to the snippet

const alphabet = "abcdefghijklmnopqrstuvwxyzäöüß";

function letterSort(a, b) {
  b = $(b).text().trim().toLowerCase();
  a = $(a).text().trim().toLowerCase();
  
  // Find the first position were the strings do not match
  let position = 0;
  
  while(a[position] === b[position]) {
      // If both are the same don't swap
      if(!a[position] && !b[position]) return 0;
      
      // Otherwise the shorter one goes first
      if(!a[position]) return 1;
      if(!b[position]) return -1;
      
      position++;
  }
  
  // Then sort by the characters position
  return alphabet.indexOf(a[position]) - alphabet.indexOf(b[position]);
}

$('button').on('click', function() {
  $("ul li").sort(letterSort).appendTo('ul');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <button>Click here</button>

  <ul>
    <li>Geeks</li>
    <li>Sosna</li>
    <li>Zebra</li>
    <li>GeeksForGeeks</li>
    <li>
      <h1>G</h1>
    </li>
    <li>
      <h1>F</h1>
    </li>
    <li>Arbuz</li>
    <li>
      <h1>A</h1>
    </li>
    <li>Łódź</li>
    <li>
      <h1>Ł</h1>
    </li>
    <li>ósmy</li>
    <li>
      <h1>Ó</h1>
    </li>
    <li>święty</li>
    <li>
      <h1>Ś</h1>
    </li>
    <li>ärgern</li>
    <li>
      <h1>Ä</h1>
    </li>
    <li>Österreich</li>
    <li>
      <h1>Ö</h1>
    </li>
    <li>Überraschung</li>
    <li>
      <h1>Ü</h1>
    </li>
  </ul>
</body>

