JavaScript sort方法数字排序顺序异常，含非数字列表排序问题

嘿，我懂你碰到的这个糟心问题——用默认的sort()方法排序混合了数字格式内容和纯字符串的列表时，数字总是乱序，比如100居然排在17前面，对吧？这事儿我之前也遇到过，其实根源很简单，咱们一步步来解决。

默认的sort()方法不管你内容里是不是数字，都会把所有元素当成字符串来按字典序排序。比如字符串"100"和"17"，会从第一个字符开始比：第一个字符都是"1"，接着比第二个字符，"0"的Unicode码点比"7"小，所以"100"就排在"17"前面了，完全不考虑实际数值大小。而且列表里还有纯字符串元素，也得考虑它们的排序位置。

场景1：Python处理文本列表 #

假设你已经把<li>里的内容提取成了字符串列表，我们可以写一个自定义的排序key函数，让数字按数值排，纯字符串可以统一放到最后（或者最前面）：

import re

def custom_sort_key(item):
    # 用正则提取字符串里的第一个连续数字
    num_match = re.search(r'\d+', item)
    if num_match:
        # 数字元素：用(0, 数值)作为key，保证数字排在前面，且按数值排序
        return (0, int(num_match.group()))
    else:
        # 纯字符串：用(1, 原字符串)作为key，让字符串排在后面，且自身按字典序排序
        return (1, item)

# 示例列表
my_list = ["100 x 10", "101 x 11", "109", "someword", "17"]
my_list.sort(key=custom_sort_key)
print(my_list)
# 输出结果：['17', '100 x 10', '101 x 11', '109', 'someword']

如果想把纯字符串放到最前面，只需要把key里的(0, ...)和(1, ...)调换位置就行~

场景2：前端JavaScript处理DOM元素 #

如果是在网页里直接排序这些<li>元素，我们可以自定义比较函数，先提取元素的文本内容，再区分数字和纯字符串：

// 获取所有li元素并转成数组
const liItems = Array.from(document.querySelector('.fliter-container').children);

// 自定义排序逻辑
liItems.sort((a, b) => {
    const textA = a.textContent.trim();
    const textB = b.textContent.trim();
    
    // 提取第一个数字，处理非数字情况
    const numA = parseInt(textA.match(/\d+/)[0]);
    const numB = parseInt(textB.match(/\d+/)[0]);
    const isNumA = !isNaN(numA);
    const isNumB = !isNaN(numB);
    
    if (isNumA && isNumB) {
        // 两个都是数字元素，按数值大小排序
        return numA - numB;
    } else if (isNumA) {
        // 只有A是数字，把A放前面
        return -1;
    } else if (isNumB) {
        // 只有B是数字，把B放前面
        return 1;
    } else {
        // 都是纯字符串，按自然语言字典序排序
        return textA.localeCompare(textB);
    }
});

// 把排序后的元素重新插入容器
const container = document.querySelector('.fliter-container');
liItems.forEach(item => container.appendChild(item));

如果你的数字格式更复杂（比如带小数、负数），只需要把int()换成float()（Python），或者parseFloat()（JavaScript）就行，正则部分不用改；如果要精确匹配小数，可以把正则改成\d+\.?\d*。

内容的提问来源于stack exchange，提问作者user759235