Addressing the Problem - String Manipulation with Javascript

The Problem

Although getting data from databases is obviously loads better than having to hard-code zillions of pages, one problem with dynamic data is that the data can varying enormously in quality and length.

Take the example of an address. We may have:

Hill top View, 54 Manor Walk, Chucklebury, Springfield, Yorkshire, S99 5TP

or maybe

54 Manor Walk, Chucklebury, Springfield, Yorkshire, S99 5TP

or perhaps

54 Manor Walk, Chucklebury, Springfield, Yorkshire

Endless permutations are possible. Assume that all these different lengths of address need to be placed within a restricted space in a page template. We need some way of limiting the address length but without cutting it rudely short.

A Javascript Solution

The following Javascript snippet takes an address and limits to a maximum length of your choice, whilst ensuring that no word is cropped in two.


	function shortenAddress(noChars, address){
		var lenDisplayAdd = address.length;
		if(lenDisplayAdd > noChars){
			address = address.substr(0, noChars);
			var lastComma = address.lastIndexOf(",");
			address = address.substr(0, lastComma);
		}
		if(address.length == 0){
			address = "Too Short";
		}
		return address;
	}
/* sample function call */
shortenAddress(55, "Hill top View, 54 Manor Walk, Chucklebury, Springfield, Yorkshire, S99 5TP");

The function takes two parameters - the maximum number of characters you can cope with, and the raw address string.

Syntax
shortenAddress(noChars:number, address:string)

.. and I have set up a page using the function here as a demo.

The Explanation

If you are still here ... then let's do the explanation.

The function above uses a property of string and two string functions/methods.

Firstly the length property of our string variable is used to find out how many characters (including whitespaces) the address contains.

If this is over our limit then the address variable is run through Javascript's substr() method. This returns a part of the initial string - a 'sub-string'. The first parameter of substr() is the starting point of the sub-string. In our case 0 means start at the very beginning. A value of 1 would be the second character etc, in the fashion of an array index. The second parameter for substr() is the number of characters we wish returned in our new sub-string, and in here we use our noChars parameter that was feed into the function.

Next we need to make sure we don't break a word in two. So we make use of Javascript's lastIndexOf() method. Javascript's lastIndexOf() is used to look for the last occurrence of a string within a string. This we can use to find the position of the last comma in the string. We have only used one parameter with lastIndexOf() in this example but it can take a second optional parameter that of number indicating the start position for the search in the string. When omitted (as here) the search starts at the beginning.

The value lastIndexOf() returns will be a zero based count from the beginning of the string. This is fine for our purposes as we are really after the character just before the last comma. We'll store this is a variable called lastComma.

Tip: Javascript also has a indexOf() method that will find the first occurrence of a given character in a string. Again this is a zero based count.

Now we know the position of last comma (or really the character before it) we can rerun our address variable through the substr() method but this time using the lastComma variable as our second parameter - ie the number of characters we wished to be returned.

Finally if the length of our new address happens to be 0, we'll provide a message that the address is 'too short'.

In summary the Javascript string functions used here were:

substr()

Syntax
substr(start:number, length:number)

lastIndexOf()

Syntax
lastIndexOf(stringToFind:string, [startingPosition:number])