如何处理逗号分隔数字字符串并自定义实现升/降序排序求助

需求：获取用户输入的逗号分隔数字字符串，点击**Ascending（升序）或Descending（降序）**按钮后展示对应排序结果，禁止使用JavaScript内置sort函数，需自行实现排序逻辑。

目前已完成HTML编写，但JS代码无法实现排序功能，现需协助完成符合要求的功能开发。

原HTML代码 #

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Numbers</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <style>
        p {
            margin-top: 30px;
            margin-left: 70px;
        }
    </style>
</head>

<body>
    <div>
        <nav class="navbar bg-light">
            <div class="container-fluid">
                <span class="navbar-brand mb-0 h1" style="margin-left: 70px;">Sort the numbers</span>
            </div>
        </nav>
    </div>

    <div>
        <p>Put the numbers you want to sort below</p>
    </div>

    <input class="form-control" list="datalistOptions" id="numb"
        placeholder="Type the numbers seperated by a comma">

    <div class="dropdown" style="margin-top: 20px; margin-bottom: 20px;">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown button
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#" onclick="show()">Ascending</a></li>
            <li><a class="dropdown-item" href="#" onclick="show()">Desecending</a></li>

        </ul>
    </div>
</body>
<template id="form-template">
    <input class="form-control" list="datalistOptions" id="exampleDataList">
</template>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
<script src="page.js"></script>
</html>

原JavaScript代码（page.js） #

let temp = document.getElementsByTagName("template")[0];


function show(){
    let clon = temp.content.cloneNode(true);
    document.body.appendChild(clon);
}

function showNumber(){
    let number = document.getElementById("numb").value;
    console.log(number);
    let array = number.split(" ");
    console.log(array);
}

修改后的HTML代码 #

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Numbers</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <style>
        p {
            margin-top: 30px;
            margin-left: 70px;
        }
        .result-container {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: fit-content;
            margin-left: 70px;
        }
        .input-wrapper {
            margin-left: 70px;
            width: 500px;
        }
    </style>
</head>

<body>
    <div>
        <nav class="navbar bg-light">
            <div class="container-fluid">
                <span class="navbar-brand mb-0 h1" style="margin-left: 70px;">Sort the numbers</span>
            </div>
        </nav>
    </div>

    <div>
        <p>Put the numbers you want to sort below</p>
    </div>

    <div class="input-wrapper">
        <input class="form-control" list="datalistOptions" id="numb"
            placeholder="Type the numbers separated by a comma">
    </div>

    <div class="dropdown" style="margin-top: 20px; margin-left: 70px;">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            Select Sort Order
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#" onclick="handleSort('asc')">Ascending</a></li>
            <li><a class="dropdown-item" href="#" onclick="handleSort('desc')">Descending</a></li>
        </ul>
    </div>

    <!-- 结果展示容器 -->
    <div class="result-container" id="resultContainer" style="display: none;">
        <h5>排序结果:</h5>
        <p id="resultText"></p>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
<script src="page.js"></script>
</html>

修改后的JavaScript代码（page.js） #

// 冒泡排序 - 升序实现
function bubbleSortAsc(arr) {
    const length = arr.length;
    // 外层循环控制排序轮数
    for (let i = 0; i < length - 1; i++) {
        // 内层循环处理每一轮的元素比较交换
        for (let j = 0; j < length - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                // 交换两个元素位置
                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
            }
        }
    }
    return arr;
}

// 冒泡排序 - 降序实现
function bubbleSortDesc(arr) {
    const length = arr.length;
    for (let i = 0; i < length - 1; i++) {
        for (let j = 0; j < length - 1 - i; j++) {
            if (arr[j] < arr[j + 1]) {
                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
            }
        }
    }
    return arr;
}

// 处理排序请求的主函数
function handleSort(order) {
    const inputValue = document.getElementById('numb').value.trim();
    
    // 空输入验证
    if (!inputValue) {
        alert('请输入逗号分隔的数字');
        return;
    }

    // 解析输入为数字数组，过滤无效内容
    const numArray = inputValue.split(',').map(item => {
        const num = parseFloat(item.trim());
        return isNaN(num) ? null : num;
    }).filter(item => item !== null);

    // 无有效数字验证
    if (numArray.length === 0) {
        alert('输入中没有有效数字，请检查');
        return;
    }

    // 根据排序类型执行对应排序
    let sortedArr;
    if (order === 'asc') {
        sortedArr = bubbleSortAsc([...numArray]); // 复制数组避免修改原输入数据
    } else {
        sortedArr = bubbleSortDesc([...numArray]);
    }

    // 展示排序结果
    const resultContainer = document.getElementById('resultContainer');
    const resultText = document.getElementById('resultText');
    resultText.textContent = sortedArr.join(', ');
    resultContainer.style.display = 'block';
}

核心修改说明 #

• HTML调整：

  • 优化了输入框和下拉菜单的布局，添加了结果展示容器
  • 修改下拉菜单的点击事件，传递asc/desc参数明确排序类型
  • 移除了未使用的template标签

• JS逻辑实现：

  • 手动实现冒泡排序的升序和降序版本，完全不依赖内置sort函数
  • 增加输入解析与验证逻辑，处理逗号分隔的字符串，过滤非数字内容
  • 实现结果展示逻辑，将排序后的数组转为友好格式显示在页面上

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