Sort a string according to number of length

Question

Just want to ask for help to resolve my issue.

I just wanted to sort all inputted string according to least to more string

ex. aa,aaa,aaaa,a display should be a,aa,aaa,aaaa

my problem is that it doesn't sort anything

 function countStr() { var newArray = (document.getElementById("number").value); var n = newArray.length; strarr.push(newArray); strarrasc.push(newArray); strarrdsc.push(newArray); //count string length document.getElementById("demo0").innerHTML = n; console.log(n); console.log(countSort_asc(n)); document.getElementById("demo").innerHTML = strarr; console.log(strarr); mySort_asc(strarrasc); document.getElementById("demo1").innerHTML = strarr; console.log(countSort_asc(strarrasc)); mySort_dsc(strarrdsc); document.getElementById("demo2").innerHTML = strarrdsc; console.log(countSort_dsc(strarrdsc)); } function countSort_asc(arr) { for (var i = 0; i < strarr.length; i++) { var temp = strarr[i]; var b = i - 1; while (b >= 0 && strarr[b] > temp) { strarr[b + 1] = strarr[b]; b--; } strarr[b + 1] = temp; } return strarr; } function countSort_dsc(arr) { for (var i = 0; i < strarr.length; i++) { var temp = strarr[i]; var b = i - 1; while (b >= 0 && strarr[b] < temp) { strarr[b + 1] = strarr[b]; b--; } strarr[b + 1] = temp; } return strarr; } 

 <div> <form> Input a text: <input id="number" type="text" name="number" value=""> <input type="button" value="Submit" onclick="countStr()"> <div> count <p id="demo0"></p> </div> </form> Entered String : <p id="demo"></p> Ascending Order : <p id="demo1"></p> Descending Order : <p id="demo2"></p> </div> 

Answer 1

You can split() the string. Use sort() and use the length property in sorting. join() the array to form the string.

Using sort()

 var arr = []; function countStr() { var str = (document.getElementById("number").value); arr.push(str); var asc = [...arr].sort((a, b) => a.length - b.length); var desc = [...arr].sort((a, b) => b.length - a.length); document.getElementById("demo0").innerHTML = arr.length; document.getElementById("demo").innerHTML = arr; document.getElementById("demo1").innerHTML = asc; document.getElementById("demo2").innerHTML = desc; } 

 <div> <form> Input a text: <input id="number" type="text" name="number" value=""> <input type="button" value="Submit" onclick="countStr()"> <div> count <p id="demo0"></p> </div> </form> Entered String : <p id="demo"></p> Ascending Order : <p id="demo1"></p> Descending Order : <p id="demo2"></p> </div> 

---

Using Loop:

Referencing the bubble sort from this

 var newArray = []; function countStr() { var newString = (document.getElementById("number").value); newArray.push(newString); //count string length document.getElementById("demo0").innerHTML = newArray.length; document.getElementById("demo").innerHTML = newArray; var asc = countSort_asc(newArray); document.getElementById("demo1").innerHTML = asc; var desc = countSort_dsc(newArray); document.getElementById("demo2").innerHTML = desc; } function countSort_asc(arr) { arr = arr.slice(0); var done = false; while (!done) { done = true; for (var i = 1; i < arr.length; i += 1) { if (arr[i - 1].length > arr[i].length) { done = false; var tmp = arr[i - 1]; arr[i - 1] = arr[i]; arr[i] = tmp; } } } return arr; } function countSort_dsc(arr) { arr = arr.slice(0); var done = false; while (!done) { done = true; for (var i = 1; i < arr.length; i += 1) { if (arr[i - 1].length < arr[i].length) { done = false; var tmp = arr[i - 1]; arr[i - 1] = arr[i]; arr[i] = tmp; } } } return arr; } 

 <div> <form> Input a text: <input id="number" type="text" name="number" value=""> <input type="button" value="Submit" onclick="countStr()"> <div> count <p id="demo0"></p> </div> </form> Entered String : <p id="demo"></p> Ascending Order : <p id="demo1"></p> Descending Order : <p id="demo2"></p> </div> 

Answer 2

That looks to be a little bit complicated, why not just use sort instead?

 const inputArr = []; function countStr() { inputArr.push(document.getElementById("number").value); document.getElementById("demo0").textContent = inputArr.length; document.getElementById("demo").textContent = inputArr; document.getElementById("demo1").textContent = inputArr .slice(0) .sort((a, b) => a.length - b.length); document.getElementById("demo2").textContent = inputArr .slice(0) .sort((a, b) => b.length - a.length); } 

 <div> <form> Input a text: <input id="number" type="text" name="number" value=""> <input type="button" value="Submit" onclick="countStr()"> <div> count <p id="demo0"></p> </div> </form> Entered String : <p id="demo"></p> Ascending Order : <p id="demo1"></p> Descending Order : <p id="demo2"></p> </div> 

Answer 3

If you have an array of strings, you can sort them by using the sort method.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

var sortedStrings = strings.sort(function(a, b) {
    if (a.length === b.length) { 
        return 0; 
    }

    return a.length > b.length ? 1 : -1;
});