如何修正表格排序JS代码以忽略换行符与前置空格？

问题说明 #

当HTML编辑器为长文本单元格自动添加换行符后，现有表格排序逻辑会因为单元格文本包含多余的换行、空格等空白字符，导致排序结果异常（例如示例中的第二列）。

问题根源 #

原代码直接使用textContent.toUpperCase()获取单元格文本，未清理其中的换行、制表符、首尾空格等无效空白字符。这些空白字符会改变字符串的实际排序权重（比如换行符的ASCII码小于字母），导致排序逻辑错误。

修复后的代码 #

JavaScript 代码 #

window.onload = function() {
  document.querySelectorAll('th').forEach((element) => { // 表格表头
    element.addEventListener('click', function() {
      let table = this.closest('table');

      // 仅处理带排序图标的列
      if (this.querySelector('span')) {
        let order_icon = this.querySelector('span');
        let order = encodeURI(order_icon.innerHTML).includes('%E2%86%91') ? 'desc' : 'asc';
        let separator = '-----'; // 分隔值与索引，保证数据完整性

        let value_list = {}; // 存储<tr>元素的HTML
        let obj_key = []; // 存储待排序的列值（带索引）

        let string_count = 0;
        let number_count = 0;

        // 遍历tbody中的每一行
        table.querySelectorAll('tbody tr').forEach((line, index_line) => {
          let cell = line.children[element.cellIndex];
          // 清理文本中的所有无效空白：先去首尾，再合并中间多余空白（包括换行）
          let key = cell.textContent.trim().replace(/\s+/g, ' ').toUpperCase();

          // 日期类型处理：使用data-timestamp属性排序
          if (cell.hasAttribute('data-timestamp')) {
            key = cell.getAttribute('data-timestamp');
          } else if (key.replace('-', '').match(/^[0-9,.]*$/g)) {
            number_count++;
          } else {
            string_count++;
          }

          value_list[key + separator + index_line] = line.outerHTML.replace(/(\t)|(\n)/g, '');
          obj_key.push(key + separator + index_line);
        });

        // 数字类型排序逻辑
        if (string_count === 0) {
          obj_key.sort(function(a, b) {
            return parseFloat(a.split(separator)[0]) - parseFloat(b.split(separator)[0]);
          });
        } else {
          // 字符串类型排序
          obj_key.sort();
        }

        // 切换排序方向并更新图标
        if (order === 'desc') {
          obj_key.reverse();
          order_icon.innerHTML = '&darr;';
        } else {
          order_icon.innerHTML = '&uarr;';
        }

        // 重新渲染tbody内容
        let html = '';
        obj_key.forEach(function(chave) {
          html += value_list[chave];
        });
        table.getElementsByTagName('tbody')[0].innerHTML = html;
      }
    });
  });
}

HTML 代码 #

<div align="center">
  <table border="1">
    <thead>
      <tr class="header">
        <th>Title <span>&uarr;</span></th>
        <th>Title2 <span>&uarr;</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>text</td>
        <td>ear</td>
      </tr>
      <tr>
        <td>arabic</td>
        <td>
          cat</td>
      </tr>
      <tr>
        <td>words</td>
        <td>
          dark</td>
      </tr>
      <tr>
        <td>here</td>
        <td>black</td>
      </tr>
    </tbody>
  </table>
</div>

关键修改点 #

• 空白字符清理：在获取单元格文本时，通过trim()去除首尾空白，再用replace(/\s+/g, ' ')将所有连续空白（包括换行、制表符、多个空格）合并为单个空格，确保排序用的key仅包含有效内容。
• 数字排序优化：原代码直接用字符串相减，改为parseFloat()转换后再计算，避免非整数数字的排序错误。

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