Split Ends

You are here: irt.org | Articles | JavaScript | Text, String, and Number | Split Ends [ previous next ]

Published on: Saturday 6th September 1997 By: Martin Webb

• Introduction
• JavaScript 1.1 split
• JavaScript 1.0 split
• The complete solution

Introdcution

This article will describe how to split strings, and how to split strings in JavaScript 1.0.

The two methods will then be combined to provide a script suitable for all browsers.

JavaScript 1.1 split

The String object split() method, introduced in JavaScript 1.1 breaks a string into an String object array. The first example separates the string into its separate parts using the separator character. To access the stringArray[] all that is need is to cycle around the array using its length property.

<SCRIPT LANGUAGE="JavaScript1.1"><!--
var string = 'This+is+a+short+example';
var separator = '+';

var stringArray = string.split(separator);

for (var i=0; i < stringArray.length; i++)
    document.write(stringArray[i] + ' / ');
//-->

Which when run produces the following:

JavaScript 1.0 split

Within JavaScript 1.0 the split() method does not exist, therefore we need to create out own script to do it. In the following script the splitIndex variable is used to hold the length of the splitArray[] array. In JavaScript 1.0, there is no built in array length.

The splitting of string is then performed in a while loop. While the length of string and separator are both greater than zero, then the contents of the while loop is performed.

The contents of the while loop, which are similar to the replace() function used in the previous article, How long is a piece of string?, attempts to find separator within string using the indexOf method.

It uses the break statement to break out of the while loop if separator is not found within string.

When separator is found it creates an entry within the splitArray[] array to store a substring of string.

Note, where separator is not found, only one array entry is created, using the whole value of string.

At the end of the while the contents of string are tuncated using substring to remove the portion placed in the splitArray array.

<SCRIPT LANGUAGE="JavaScript"><!--
function textArray(value) { this.value = value; }
var splitIndex = 0;
var splitArray = new Array();

var string = 'This+is+a+short+example';
var separator = '+';

while ((string.length > 0) && (separator.length > 0)) {

    var i = string.indexOf(separator);
    if ((!i) && (separator != string.substring(0,separator.length))) break;
    if (i == -1) {
        splitArray[splitIndex++] = new textArray(string);
        break;
    }

    splitArray[splitIndex++] = new textArray(string.substring(0,i));
    
    string = string.substring(i+separator.length,string.length);
}

for (var i=0; i < splitIndex; i++)
        document.write(splitArray[i] + ' / ');

//--></SCRIPT>

Which when run produces the following:

The complete solution

The two previous examples use inline JavaScript to split and then display the string. It would make much better sense to rewrite and combine them so that it can be repeatedly used by any browser.

The following example is split into three parts to aid easier explanation. The first part defines thesplits() function, which is a complete rewrite of the whileloop used above, instead of looping it iterates by invoking itself until string has been completely split.

The split() function is an intermediate function which invokes the splits() function after resetiing the splitIndex to zero.

The showArray() function displays each of the splitArray[] entries on at a time.

<SCRIPT LANGUAGE="JavaScript"><!--
function splits(string,text) {
// splits string at 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 showArray() {
    for (var i=0; i < splitIndex; i++)
        document.write(splitArray[i] + ' / ');
    document.write('<BR>');
}
//--></SCRIPT>

The following JavaScript1.1 script replaces the previous definition of the split() function. For browsers that support JavaScript 1.1 it uses the inbuilt string objects split() method to populate the splitArray[]. The splitIndex variable is then set to the length of the splitArray[] array.

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

Finally, the following defines the splitIndex variable, and creates the intial empty splitArray[] array.

The split() function call will then, depending on the browser being used, either use the JavaScript 1.0 or the JavaScript 1.1 version of the split() function definition.

<SCRIPT LANGUAGE="JavaScript"><!--
var splitIndex = 0;
var splitArray = new Array();

split('This+is+another+short+example','+');
showArray();

split('This+is+an+even+longer+example+than+the+first','+');
showArray();
//--></SCRIPT>

Which when run produces the following:

Related items

Math functions in JavaScript

Selecting Random Numbers

Nested Splitting

How long is a piece of string?

Random Numbers & Random Events

Scrolling Text

©2018 Martin Webb