How to compare two UTF-8 strings which contain diacritic characters

Question

I want to add an element like this fiddle but I have a problem to compare my strings when a string has a UTF-8 character because "é" 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");
    });
});

Do you have any solutions to fix that ?

Have a look at [this](http://stackoverflow.com/questions/286921/efficiently-replace-all-accented-characters-in-a-string). — Huelfe, Jan 08 '16 at 11:01

Rory McCrossan · Answer 1 · 2016-01-08T11:06:56.810

6

You can use the localeCompare() method to sort text which contains diacritics. Try this:

$(".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

Note that I amended your logic to make the selectors more efficient, and also to enable the sort algorithm.

localeCompare MDN documentation

edited Jan 08 '16 at 11:06

answered Jan 08 '16 at 11:05

Rory McCrossan

331,213
40
305
339

2

i liked `localeCompare()` method. – Jai Jan 08 '16 at 11:06
I can't use the sort method. This fiddle isn't the mirror of my code. I don't just have `
...`. Here is my code. And the text value is so far in the DOM http://pastebin.com/pEsh8nAH
– John Jan 08 '16 at 11:20
The structure there will still work with `sort()` you just need to sort the `div` elements instead of the `.ingredient`. If you can create a jsFiddle with your actual HTML structure I ca n show you how to do it. – Rory McCrossan Jan 08 '16 at 11:26
I'm actually on this fiddle https://jsfiddle.net/prbjz9d7/ but the animation doesn't work. Could you show me how to do this with the sort ? – John Jan 08 '16 at 13:11

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

For comparison, you may want to replace the accentuated characters: Remove accents/diacritics in a string in JavaScript

edited May 23 '17 at 11:44

Community

1
1

answered Jan 08 '16 at 11:01

xoxox

719
1
13
24

How to compare two UTF-8 strings which contain diacritic characters

2 Answers2