JS排序时如何忽略非数字字符实现DOM元素正确排序

排序失效的核心问题出在数值转换逻辑上：

• 现有代码用~~对文本做整数转换，这个方法仅对纯整数字符串生效，只要字符串开头不是合法数字，就会直接返回0；如果非数字字符插在数字中间，也会直接截断转换，完全拿不到正确的数值。
• 比如文本是./123、45a67这类值，~~转换后分别得到0、45，和实际要比对的数字完全不符，排序自然出错。
• 额外说明：~~本身是做整数位截断运算的，连纯小数的场景都无法正确处理，不适合做通用的数值提取。

核心调整是在转换数字前，先对提取到的文本做清洗，剔除所有非数字字符，再转成数值做比较：

1. 拿到.num节点的文本后，用正则替换掉所有不符合要求的非数字字符
2. 将清洗后的纯数字字符串转为Number类型，再做差值比较
3. 保留原有的flex order赋值逻辑即可

如果你的场景需要支持负数、小数排序，可以调整正则规则，额外保留负号和小数点，按需处理异常格式即可。

function sorting(){
  const items = document.querySelectorAll('.sortbox')
  Array.from(items).sort(function(a, b) {
    // 提取文本，清洗所有非数字字符；如果要支持小数/负数，将正则替换为 /[^\d.-]/g
    const valA = a.querySelector('.num').innerText.replace(/[^\d]/g, '')
    const valB = b.querySelector('.num').innerText.replace(/[^\d]/g, '')
    return Number(valA) - Number(valB)
  }).forEach(function(node, index) {
    node.style.order = index
  })
}

• 确保.sortbox的直接父元素设置了display: flex，否则CSS的order属性不会生效
• 如果需要处理带千分位逗号的数字（比如1,234），可以在清洗步骤先把逗号替换为空，再做非数字过滤
• 如果排序值里可能出现空值，建议加一层兜底逻辑，给空值默认设为0或者排到最后，避免出现NaN导致排序异常

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