CODEWITHSUNDEEP
javascriptjquery
Michael Schwartz
Michael Schwartz

Reputation: 8425

JQuery Textarea Alphabetizer

I'm working on a simple alphabetizer however the problem is it doesn't sort it correctly.

$(document).ready(function() {
  var txt = $(".input-text");
  $(".alphabetize").on("click", function() {
    txt.val(txt.val().split(" ").sort().join(" "));
  });
});
<!DOCTYPE html>
<html>
  <head>
    <title>Alphabetizer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
  <body>
        <a class="alphabetize" href="javascript:void(0)">Alphabetize</a><br />
        <textarea class="input-text" placeholder="Alphabetize your text here...">China
India
United States of America
Indonesia
Brazil
Pakistan
Nigeria
Bangladesh
Russia
Japan
Mexico
Philippines
Ethiopia
Vietnam
Egypt
Germany
Iran
Turkey
Democratic Republic of the Congo
France</textarea>
  </body>
</html>

Upvotes: 3

Views: 96

Answers (1)

Artur Filipiak
Artur Filipiak

Reputation: 9157

You should split the text by new lines (\n).

$(document).ready(function() {
  var txt = $(".input-text");
  $(".alphabetize").on("click", function() {
    txt.val(txt.val().split("\n").sort().join("\n"));
  });
});
<!DOCTYPE html>
<html>
  <head>
    <title>Alphabetizer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
  <body>
        <a class="alphabetize" href="javascript:void(0)">Alphabetize</a><br />
        <textarea class="input-text" placeholder="Alphabetize your text here...">China
India
United States of America
Indonesia
Brazil
Pakistan
Nigeria
Bangladesh
Russia
Japan
Mexico
Philippines
Ethiopia
Vietnam
Egypt
Germany
Iran
Turkey
Democratic Republic of the Congo
France</textarea>
  </body>
</html>

Also. While it's not necessary for your example (as all of the lines starts with capital letter), you should know that .sort() is case sensitive, so that "AbCdEf" will be sorted as "ACEbdf".

To make it case insensitive, you can pass a sorting method as argument, where strings .toLowerCase() are compared:

// ...
txt.val(txt.val().split("\n").sort(caseInsensitive).join("\n"));
// ...

function caseInsensitive(a, b) {
    return a.toLowerCase().localeCompare(b.toLowerCase());
}

Upvotes: 2

Related Questions