Article Categories

Selected Reading

How to sort strings with accented characters using JavaScript?

Javascript Web Development Object Oriented Programming

JavaScript's default string sorting doesn't handle accented characters properly. The localeCompare() method provides locale-aware string comparison that correctly sorts accented characters.

The Problem with Default Sort

Using the default sort() method on strings with accented characters produces incorrect results because it compares Unicode code points rather than the actual alphabetical order.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default Sort Problem</title>
</head>
<body>
    <h2>Default Sort (Incorrect)</h2>
    
    
    <script>
        let words = ['qué', 'cómo', 'dónde', 'quién', 'cuánto', 'cuántos'];
        
        // Default sort - incorrect for accented characters
        let defaultSorted = [...words].sort();
        document.getElementById('defaultResult').innerHTML = 
            'Original: ' + words.join(', ') + '<br>' +
            'Default sort: ' + defaultSorted.join(', ');
    </script>
</body>
</html>

Using localeCompare() Method

The localeCompare() method compares strings according to the current locale, properly handling accented characters and special characters.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sort Accented Strings</title>
    <style>
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
        }
        .result {
            font-size: 18px;
            font-weight: 500;
            color: blueviolet;
            margin: 10px 0;
        }
        .sample {
            font-size: 18px;
            font-weight: 500;
            color: red;
        }
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h2>Sort Strings with Accented Characters</h2>
    
    Original: [qué, cómo, dónde, quién, cuánto, cuántos]
    
    <button onclick="sortArray()">SORT ARRAY</button>
    
    
    
    <script>
        function sortArray() {
            let arr = ['qué', 'cómo', 'dónde', 'quién', 'cuánto', 'cuántos'];
            
            // Sort using localeCompare for proper accent handling
            let sortedArr = arr.sort(function(a, b) {
                return a.localeCompare(b);
            });
            
            document.getElementById('result').innerHTML = 
                'Sorted: [' + sortedArr.join(', ') + ']';
        }
    </script>
</body>
</html>

Advanced Sorting Options

The localeCompare() method accepts options for more control over the sorting behavior:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Locale Sorting</title>
</head>
<body>
    <h2>Advanced Sorting Options</h2>
    
    
    <script>
        let mixedWords = ['Café', 'café', 'resume', 'résumé', 'Apple', 'apple'];
        
        // Case-sensitive sorting
        let caseSensitive = [...mixedWords].sort((a, b) => 
            a.localeCompare(b, 'en', { sensitivity: 'case' })
        );
        
        // Case-insensitive sorting
        let caseInsensitive = [...mixedWords].sort((a, b) => 
            a.localeCompare(b, 'en', { sensitivity: 'base' })
        );
        
        // Numeric sorting
        let numbers = ['item10', 'item2', 'item1', 'item20'];
        let numericSort = [...numbers].sort((a, b) => 
            a.localeCompare(b, 'en', { numeric: true })
        );
        
        document.getElementById('advancedResults').innerHTML = 
            'Original: ' + mixedWords.join(', ') + '<br><br>' +
            'Case-sensitive: ' + caseSensitive.join(', ') + '<br>' +
            'Case-insensitive: ' + caseInsensitive.join(', ') + '<br><br>' +
            'Numbers original: ' + numbers.join(', ') + '<br>' +
            'Numeric sort: ' + numericSort.join(', ');
    </script>
</body>
</html>

Comparison Table

Method	Handles Accents	Locale-Aware	Customizable
`array.sort()`	No	No	No
`array.sort((a,b) => a.localeCompare(b))`	Yes	Yes	Yes

Key Points

Always use localeCompare() when sorting strings with accented characters
The method respects the user's locale settings by default
You can specify locale and options for more control
Options include case sensitivity, numeric sorting, and accent sensitivity

Conclusion

Use localeCompare() method with sort() to properly handle accented characters in JavaScript. This ensures correct alphabetical ordering regardless of special characters or locale differences.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

465 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next