编写JavaScript脚本实现列表按字母分组并自动排序

问题描述 #

现有如下HTML列表：

<ul class="uuuu">

    <li class="aaaaaa" id="xxxxxx">
        <a class="bbbbbb" href="ccccc" data-depth="1">
            Luffy
        </a>
    </li>

    <li class="aaaaaa" id="xxxxxx">
        <a class="bbbbbb" href="ccccc" data-depth="1">
            987
        </a>
    </li>
   
    <li class="aaaaaa" id="xxxxxx">
        <a class="bbbbbb" href="ccccc" data-depth="1">
            564
        </a>
    </li>
   
    <li class="aaaaaa" id="xxxxxx">
        <a class="bbbbbb" href="ccccc" data-depth="1">
            Sabo
        </a>
    </li>
    
    <li class="aaaaaa" id="xxxxxx">
        <a class="bbbbbb" href="ccccc" data-depth="1">
            Smoker
        </a>
    </li>

    <li class="aaaaaa" id="xxxxxx">
        <a class="bbbbbb" href="ccccc" data-depth="1">
            Zorro
        </a>
    </li>

</ul>

需要实现：将列表项按首字母排序，数字归为0-9组，自动生成分组标题，最终呈现类似如下的结构化效果：

0-9
    
    564
    987

    L
    
    Luffy

    S
    
    Sabo
    Smoker

    Z
    
    Zorro     

解决方案代码 #

直接运行以下JavaScript代码即可实现需求：

// 获取目标列表容器
const listContainer = document.querySelector('.uuuu');
// 把所有列表项转为数组方便操作
const listItems = Array.from(listContainer.querySelectorAll('li.aaaaaa'));

// 为每个列表项整理关键信息：文本、原元素、分组标识
const processedItems = listItems.map(item => {
  const linkText = item.querySelector('a').textContent.trim();
  return {
    text: linkText,
    element: item,
    // 数字开头的归到0-9组，字母取大写首字母作为分组标识
    group: /^\d/.test(linkText) ? '0-9' : linkText.charAt(0).toUpperCase()
  };
});

// 排序：先按分组标识排，同组内按文本内容排
processedItems.sort((a, b) => {
  if (a.group !== b.group) {
    return a.group.localeCompare(b.group);
  }
  return a.text.localeCompare(b.text);
});

// 把排序后的项按分组归类
const grouped = processedItems.reduce((result, item) => {
  if (!result[item.group]) {
    result[item.group] = [];
  }
  result[item.group].push(item);
  return result;
}, {});

// 清空原列表，准备重新渲染
listContainer.innerHTML = '';

// 遍历每个分组，插入标题和对应的列表项
Object.entries(grouped).forEach(([groupName, items]) => {
  // 创建分组标题（这里用加粗的li，也可以换成其他标签，比如h3）
  const groupTitle = document.createElement('li');
  groupTitle.style.fontWeight = 'bold';
  groupTitle.style.marginTop = '16px';
  groupTitle.textContent = groupName;
  listContainer.appendChild(groupTitle);
  
  // 把当前分组的所有列表项加回去
  items.forEach(item => {
    listContainer.appendChild(item.element);
  });
});

代码说明 #

1. 提取信息：遍历所有列表项，获取链接的文本内容，同时判断该项属于哪个分组（数字组或字母首字母组）。
2. 排序逻辑：使用localeCompare实现自然排序，先按分组名称排序，同一个分组内再按文本内容排序，保证顺序正确。
3. 分组归类：用reduce把同组的项放到一起，方便后续按组渲染。
4. 重新渲染：清空原列表后，依次插入每个分组的标题和对应的列表项，标题通过样式和普通列表项区分开。

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