Q189 How do you sort a number of lines of information in a textarea?

Here is the psuedo code:

Obtain the value of the textarea.
Split the value based of line breaks into an array.
Sort the array.
Join the array back together with line breaks.

A couple of problems:

Not every browser uses the same line breaks. I don't know the exact details but some use \r\n and some use just \n.
Not every browser has support for the strings split() method.
Not every browser has support for the arrays sort() method.
Not every browser has support for the arrays join() method.

We should be able to overcome these problems though:

We can ignore the fact that browsers have different types of linebreaks and just split the textarea on \n

The article Split Ends describes how to split strings, and how to split strings in JavaScript 1.0. Also describes how the two methods can be combined to provide a script suitable for all browsers.

The article Arrays, Object Arrays and Sorting shows how to sort arrays using the JavaScript 1.1 array sort method. It also describes the different options available during sorting, and how to sort arrays for browsers that don't support the sort method, or where the sort method does not work correctly.

We can write our own join() function.

So here is the code:

<html>
<head>
<script language="JavaScript"><!--
var splitIndex = 0;
var splitArray = new Array();

function splits(string,text) {
    var strLength = string.length, txtLength = text.length;
    if ((strLength == 0) || (txtLength == 0)) return;

    var i = string.indexOf(text);
    if ((!i) && (text != string.substring(0,txtLength))) return;
    if (i == -1) {
        splitArray[splitIndex++] = string;
        return;
    }

    splitArray[splitIndex++] = string.substring(0,i);

    if (i+txtLength < strLength)
        splits(string.substring(i+txtLength,strLength),text);

    return;
}

function split(string,text) {
    splitIndex = 0;
    splits(string,text);
}

function join(arrayName) {
    var temp = '';
    for (var i=0; i<splitIndex; i++)
        temp += arrayName[i] + '\n';
    if (escape(temp.substring(0,1)) == '%0A')
        return temp.substring(1,temp.length);
    else
        return temp;
}

function sort(arrayName) {
    for (var i=0; i<(splitIndex-1); i++)
        for (var j=i+1; j<splitIndex; j++)
            if (arrayName[j] < arrayName[i]) {
                var dummy = arrayName[i];
                arrayName[i] = arrayName[j];
                arrayName[j] = dummy;
            }
}

function sorttext() {
    split(document.myform.mytext.value,'\n');
    sort(splitArray);
    document.myform.mytext.value = join(splitArray);
}
//--></script>

<script language="JavaScript1.1"><!--
function split(string,text) {
    splitArray = string.split(text);
    splitIndex = splitArray.length;
}
//--></script>
</head>

<body>

<form name="myform">
<textarea name="mytext" rows="9" cols="8">
Lion
Tiger
Bear
Fox
Rabbit
Anteater
Snake
Dog
Cat
</textarea>
<p><input type="button" value="sort" onClick="sorttext()">
</form>

</body>
</html>

Feedback on 'Q189 How do you sort a number of lines of information in a textarea?'

Tuesday November 23rd, 1999 at 09:25:20 - William Finke