Comment trier et classer des li dans un ul ?

Ce script montre comment on peut manipuler une liste de li pour en faire une liste triée et ensuite une liste alphabétique

Exemple

Code HTML : 

<ul id="alphaIndex">
   <li>xavier</li>
   <li>Alexia</li>
   <li>bernard</li>
   <li>sophie</li>
   <li>Alexandre</li>
   <li>Franck</li>
   <li>Zoé</li>  
   <li>Philippe</li>   
   <li>Thierry</li>   
   <li>Paul</li>
   <li>Francoise</li>
   <li>Pauline</li>
   <li>Jacques</li>
   <li>Pierre</li>
   <li>Michel</li>
   <li>michèle</li>   
   <li>micheline</li>   
   <li>Hector</li>
   <li>Ernest</li>
   <li>Philibert</li>
   <li>hubert</li>
   <li>david</li>
   <li>john</li>
   <li>mustapha</li>
   <li>mariette</li>
   <li>arielle</li>
   <li>thomas</li>
   <li>céline</li>
   <li>stuart</li>
   <li>fernand</li>
   <li>patrick</li>
   <li>tom</li>
   <li>suzanne</li>
   <li>hélène</li>
   <li>séverine</li>
   <li>roland</li>
   <li>walter</li>
   <li>sam</li>
   <li>franz</li>
   <li>victor</li>
   <li>maire-rose</li>
</ul>

Code JS : 

    // Transformation en liste triée
    $( '#alphaIndex' ).html(
        $( '#alphaIndex li' )
            .get()
            .sort( function( a, b ){
                return ( a.innerHTML.replace( /^\s*/, '').toLowerCase() >= b.innerHTML.replace( /^\s*/, '').toLowerCase() ) ? 1 : -1; 
            })
     
        /*
         * Pas de ; final car il s'agit d'insérer une suite
         * de <li>...</li> en HTML.
         * La liste des "li" est incluse dans le tableau (array) généré
         * par get() et trié par sort().
         * L'array est interprété implicitement comme un htmlString,
         * voir https://api.jquery.com/html/.
         */ 
    );
    
    // Transformation en liste alphabétique
    $( '#alphaIndex li' ).each( function(){
        
        // On sélectionne la première lettre, en majuscule
        var letter = $(this).text().match( /^\s*([a-z])/im )[1].toUpperCase();
     
        /*
         * Si cette lettre n'est pas déjà dans la liste
         * alphabétique, on crée l'en-tête de la sous-liste
         * alphabétique.
         */
        if ( $( "#_" + letter ).length == 0 ){
            $( '#alphaIndex' ).append(
                $( '<li/>' ).text( letter ).css({ "font-weight": "bold", "text-decoration": "underline" }),
                $( '<ul/>' ).attr('id', '_' + letter)
            );
        }
     
        // On ajoute les éléments "li" à la sous-liste
        $( '#_' + letter ).append( $(this) );
    });