JQuery文本区域字母表

JQuery Textarea Alphabetizer

本文关键字：字母表 区域 文本 JQuery      更新时间：2023-09-26

我正在开发一个简单的字母排序器，但问题是它没有正确排序。

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

您应该用新行（'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>

此外。虽然对于您的示例来说没有必要（因为所有行都以大写字母开头），但您应该知道.sort()是区分大小写的，因此"AbCdEf"将被排序为"ACEbdf

为了使其不区分大小写，您可以传递一个排序方法作为参数，其中比较字符串.toLowerCase()：

// ...
txt.val(txt.val().split("'n").sort(caseInsensitive).join("'n"));
// ...
function caseInsensitive(a, b) {
    return a.toLowerCase().localeCompare(b.toLowerCase());
}

相关文章：