如何比較包含撥號字符的兩個UTF-8字符串

Question

我想添加一個像這樣的元素fiddle但我有一個問題，當字符串具有UTF-8字符時，因爲"é" is > at all basics letters而比較我的字符串。

<ol class="ingredientList"> 
    <li class="ingredient">Apples</li> 
    <li class="ingredient">Carrots</li> 
    <li class="ingredient">Clams</li> 
    <li class="ingredient">Oysters</li> 
    <li class="ingredient">Wheat</li> 
</ol> 
<ol class="ingredientList"> 
    <li class="ingredient">Barley</li> 
    <li class="ingredient">éggs</li> 
    <li class="ingredient">Millet</li> 
    <li class="ingredient">Oranges</li> 
    <li class="ingredient">Olives</li> 
</ol> 

$(".ingredient").click(function() { 
    var element = $(this); 
    var added = false; 
    var targetList = $(this).parent().siblings(".ingredientList")[0]; 
    $(this).fadeOut("fast", function() { 
     $(".ingredient", targetList).each(function() { 
      if ($(this).text() > $(element).text()) { 
       $(element).insertBefore($(this)).fadeIn("fast"); 
       added = true; 
       return false; 
      } 
     }); 
     if (!added) $(element).appendTo($(targetList)).fadeIn("fast"); 
    }); 
}); 

你有什麼解決方案來解決這個問題？

Answer 1

爲了進行比較，你可能需要更換的加劇字符： Remove accents/diacritics in a string in JavaScript

Answer 2

可以使用localeCompare()方法排序包含變音符號的文本。試試這個：

$(".ingredient").click(function() { 
    var $element = $(this); 
    var $targetList = $element.closest('.ingredientList').siblings().first(); 

    $element.fadeOut("fast", function() { 
     $element.appendTo($targetList);  
     $(".ingredient", $targetList).sort(function(a, b) { 
      return $(a).text().localeCompare($(b).text()); 
     }).appendTo($targetList); 
     $element.fadeIn('fast'); 
    }); 
}); 

Updated fiddle

請注意，我修改你的邏輯，使選擇更加高效，也使排序算法。

localeCompare MDN documentation