如何按文本内容对列表进行排序，其中包括数字？

编程问答 2022-04-22

问题描述

我正在尝试按照从最低到最高的距离（56km、96km、6km）对这个列表进行排序。我知道有更简单的方法来处理和添加 li 到 ul，但我需要这种形式。问题是我完全没有想法，也没有在互联网上找到任何东西。

    <ul class="collapsible z-depth-0 assignment " id="assigment_list" style="border: none;">

    </ul>

const assignmentList = document.querySelector('.assignment');

  const li = `
  <li >
    <div class="collapsible-header grey lighten-4 right-align"> Nick,56km from you </div>
  </li>
    <li >
    <div class="collapsible-header grey lighten-4 right-align">Niclas,96km from you  </div>
  </li>
  <li >
    <div class="collapsible-header grey lighten-4 right-align"> Max,6km from you </div>
  </li>
`;
html += li;
assignmentList.innerHTML = html

解决方法

如果您的距离是字符串而不是数字，则可以使用 parseInt 函数先将它们转换为数字，然后进行排序。像这样

const distances = ["96km","6km","56km"]
// Use parseInt function to get the kilometers as number
const intDistances = distances.map((stringDistance) => {
  // Note that,parseInt stops at the first character that is not number-like
  // So parseInt("6km") will return 6
  const intDistance = parseInt(stringDistance,10);
    return intDistance;
})
// Sorted
intDistances.sort((a,b) => a - b);
,

此代码有助于将 KM 从低到高排序。

var a = ["Nick,56km from you","Niclas,96km from you","Max,6km from you"];
alert("BEGIN WITH: " + a);
var numericPart;
var letterPart;
var max_chars = 4;
var pad_char = 0;
var b = [];
for (var i=0; i<a.length; i++) {
    numericPart = a[i].match(/\d+/);
    numericPart = (new Array(max_chars + 1).join(pad_char) + numericPart).slice(-max_chars); 
    b[i] = numericPart;
}
b.sort(function(a,b){
    if (a > b)
        return 1;
    if (a < b)
        return -1;
    // a must be equal to b
    return 0;
});
for (var i=0; i<b.length; i++) {
    b[i] = b[i].replace(/0+(?=[1-9])/,'');
}
alert(b);

,

如果您必须使用像 'Nick,56km from you' 这样的整个字符串，这里有一种方法。这个答案展示了如何像这样对字符串进行排序，还展示了添加到 ul 标签的 2 种不同方式 - innerHTML 和 insertAdjacentHTML。请注意，在我的示例中，同时显示两种方式意味着列表将显示两次。

这是排序线：

data = data.sort((a,b) => +b.replace(/\D/g,'') - +a.replace(/\D/g,''));

它基本上是说遍历数据数组，对于每个项目：删除除数字之外的所有内容，然后进行比较。您会在每个项目之前看到 +。那就是将它们转换为数字，因为（例如）虽然 replace(/\D/g,'') 删除了除数字之外的所有内容，但结果仍然是一个字符串，如“56”。将 + 放在前面会将其更改为 56 - 一个实际数字。 sort 函数不会改变原始数据——它只是排序——所以为了比较我们可以像这样转换它们。

const assignmentList = document.querySelector('.assignment');
let data = ['Nick,56km from you','Niclas,96km from you','Max,6km from you'];
data = data.sort((a,''));
let ul = document.querySelector('#assigment_list')
// using insertAdjacentHTML
data.forEach(string => ul.insertAdjacentHTML('beforeend',`<li>${string}</li>`));
// using innerHTML
// data.forEach(string => ul.innerHTML += `<li>${string}</li>`);
<ul class="collapsible z-depth-0 assignment " id="assigment_list" style="border: none;">

</ul>

htmlhtml-listsjavascriptmaterializesorting