How to seperate the string that has comma and numbers and order them in asc and desc order?-CodePudding

The string is the value that i have taken from the input.When the user is going to put the numbers which the seperates them with a comma.And when he push asc the form with the asc order will be seen and the same with the desc order.I CAN NOT USE THE SORT FUNCTION BUT TO MAKE THE ORDER FUNCTION MYSELF. Below i am going to send the code of the 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/[email protected]/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 >
            <div >
                <span  style="margin-left: 70px;">Sort the numbers</span>
            </div>
        </nav>
    </div>

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

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

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

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

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

I cant sort them.Below i am going to send the js code that i cant do it.I want help with this.

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);
}

CodePudding user response：

So here's your solution:

array = number.split(/[ ,] /);
array.sort(); // ["123", "126", "127", "234"]
array.reverse()  // ["234", "127", "126", "123"]

Or you can use sort(function(a, b){return a-b}) for asc, sort(function(a, b){return b-a}) for desc order.

CodePudding user response：

When you reference your input-element you'll get a string looking like this:

const stringOfNumbersFromOutput =  "1,2,4,3,7"

Now, what you can do is call split(), this is a method that belongs to the String global object. It takes an argument which is a string or a RegEx. You supply what deliminator you want to split the string with. Read more here: w3schools page on .split()

You have a comma seperated list supplied as a string

stringOfNumbersFromOutput.split(',') // returns ["1", "2", "4", "3", "7"]

You can use any deliminator you want

"1-2-4-3-7".split("-") // returns ["1", "2", "4", "3", "7"]

Now! you can sort that array with sort(), it works straight out of the box with strings, but not numbers.

To sort numbers, you need to supply the compare-function read more here: w3school's page on comparefunctions

You want to do this:

   function compareFunction(a, b) { 
     return a-b 
   }
   stringOfNumbersFromOutput.split(',').sort(compareFunction) // returns ["1", "2", "3", "4", "7"]

a-b // will give you ascending order
b-a // will give you descending order

If you want to turn it back into a string, you use the .join() method, which is very similar to .split() but it will join an array into a string. It also takes a delimiter

   function compareFunction(a, b) { 
     return a-b 
   }
   stringOfNumbersFromOutput.split(',').sort(compareFunction).join(", ") // returns "1, 2, 3, 4, 7"

The comparefunction is explained nicely in the link to the .sort() method w3school's page on comparefunctions