Menu
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>
657
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());
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
