使用jQuery按字母顺序对div中的文本进行排序答案

【问题标题】：Sort text in a div alphabetically with jQuery使用jQuery按字母顺序对div中的文本进行排序
【发布时间】：2017-06-01 20:26:19
【问题描述】：

是否可以在div 中找到某些特定文本，然后按字母顺序对其进行排序？

例如，在div 中的这个文本块中：

<div class="text-block">
Jim, Mike, Ali, and Marsha went to the store.
</div>

我想让Jim, Mike, Ali, and Marsha 按字母顺序排列，所以输出会变成这样：

<div class="text-block">
Ali, Jim, Marsha, and Mike went to the store.
</div>

我觉得这几乎是不可能的，但也许只是一个查找和替换？不太确定最好的方法是什么。

【问题讨论】：

你会一直有四个人还是人数会有所不同？
正如所写，这个问题并不容易。试着把它分解成更小的块。您可以使用 jQuery 获取 div 中的文本。然后，使用正则表达式，您可以找到每个大写的单词并将这些单词放入一个数组中。对该数组进行排序，然后将名称重新格式化为句子的开头。然后将它们放回 div 中。不容易，但可行。
可能，但可能不是任何人都想写的东西。你能不把名字存储在预先排序的变量中并写出来吗？
因为and Marsha went to the store. 有点难。格式也总是相同的吗？ 4 个名称为 , and went to the store?
基本上你在问“是否可以解析自然人类语言？”你在下面得到一堆答案，都是“当然！扔一个正则表达式！用逗号分割它！”在您尝试解析的下一段文本省略牛津逗号或使用人类倾向于在纯文本中使用的无数其他语法变体之前，这很好。自然语言处理是一个完整的研究领域是有原因的。很难。

标签： javascript jquery html sorting alphabetical

【解决方案1】：

您可以使用正则表达式完成此操作。这样您就可以支持更多功能的输入。

$(".text-block").html(function(idx, oldhtml) {
    return oldhtml.replace(/[, a-z]+and [a-z]+/gi,function(a) {
        tmp = a.replace(" and "," ").split(/[^\w]+/).sort();
        return tmp.slice(0,-1).join(", ") + ", and " + tmp.pop();
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-block">
Jim, Mike, Ali, and Marsha went to the store.
</div>

【讨论】：

【解决方案2】：

像这样：

divText = $('.text-block').text();
arr = divText.split(",");
lastStr = arr.pop(-1);
arr.sort();
arr.push(lastStr);
$('.text-block').text(arr.toString());

【讨论】：

【解决方案3】：

您可以这样做：使用正则表达式获取以大写字母开头的名称。对名称进行排序后，需要连接剩余的文本。见下文：

var str = $('.text-block').text();//Read the div

var names = str.match(/\b[A-Z].*?\b/g);//Find out names

var lastName = names[names.length - 1];
var lastNameIndex = str.indexOf(lastName);
var remainingStr = str.slice(lastNameIndex + lastName.length);//remaining 
                                                              //text
names = names.sort();
names[names.length - 1] = " and " + names[names.length - 1];
var newStr = names + remainingStr;
$('.text-block').text(newStr);//update div

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-block">
  Jim, Mike, Ali, and Marsha went to the store.
</div>

【讨论】：