JavaScript:
Incrementing Letters



Introduction

Two things that computers are very good at are calculations and repetition. This page explores the use of using JavaScript to increment letters for a variety of uses.

Letters cannot be incremented directly but characters on computers are based on integer character codes. The original character codes were ASCII (American Standard Code for Information Interchange) but since 2007 the most common encoding scheme on web pages has been UTF-8 (U from Universal Character Set + Transformation Format + 8-bit). Sensibly, it was arranged that the most common characters of UTF-8 and ASCII use the same code. ASCII is a subset of Unicode and UTF-8 is a mapping method. There's an older, but interesting discussion of character sets on Joel Spolsky's web site.

A-Z Links

One common usage for using these codes is to step through the letters of the alphabet to produce links to anchor tags on web pages. There's several ways this can be done. In each case the links produced are to anchor tags which can be added anywhere in the page and take the form <p id="A">....</p>. older versions use <a name="A"> but that is no longer valid in HTML5. The new version will work in older browsers. Of course the id version can be used in any element such as is <h2 id="A">...</h2>

The code:

function azstring() {
// Create a row of A - Z links going to anchors
	var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	var outtxt = "";
	for(var count=0, end=str.length; count<end; count++){
		var nextChar = str.charAt(count);
		outtxt += "<a href='#" + nextChar + "'>" + nextChar + "</a> ";
	}
	document.getElementById("azlinks1").innerHTML = outtxt;
}

produces:

Alternatively the String.fromCharCode() function can be used. From the various UTF-8 tables around, and there are lots of them, "A" has the code 65 and "Z" has the code 90:

function charcode() {
// Create a row of A - Z links going to anchors
// 65 = ASCII/UTF-8 value for A, 90 = ASCII/UTF-8 value for Z
	var outtxt = "";
	for (var count=65; count<=90; count++){
		outtxt += "<a href='#" + String.fromCharCode(count) + "'>" + String.fromCharCode(count) + "</a> ";
	}
	document.getElementById("azlinks2").innerHTML = outtxt;
}

produces:

Using the above code as a basis, the function can be used to produce buttons or any other element:

function alphaButtons(){
// Create a row of A - Z button links going to anchors
// 65 = ASCII/UTF-8 value for A, 90 = ASCII/UTF-8 value for Z
	var count = 0;
	var strs = "";
	var outtxt = "";
	for (count=65; count<=90; count++){
		strs = String.fromCharCode(count)
		outtxt += '<input type="button" value=" ' + strs + ' "onclick=document.location.href="#' + strs + '"> '
	}
	document.getElementById("azlinks3").innerHTML = outtxt;
}

The output can also be formatted using CSS. The following is almost the same code but with a CSS class of alphabutton applied:

function cssButtons(){
// Create a row of CSS styled A - Z button links going to anchors
// 65 = ASCII/UTF-8 value for A, 90 = ASCII/UTF-8 value for Z
	var count = 0;
	var strs = "";
	var outtxt = "";
	for (count=65; count<=90; count++){
		strs = String.fromCharCode(count)
		outtxt += '<input class="alphabutton" type="button" value=" ' + strs + ' "onclick=document.location.href="#' + strs + '">'
	}
	document.getElementById("azlinks4").innerHTML = outtxt;
}

The CSS is:

<style type="text/css">
.alphabutton{
	font-weight:bold;
	width:23px;
	border-style:none;
	background-color:#0047b6;
	color:white 
}
</style>

More with String.fromCharCode()

String.fromCharCode() is static in that String cannot be a variable but it can accept numeric variables or comma separated multiple values as arguments in the () part.

String.fromCharCode(65, 66, 67, 68, 69);

produces:

Maths can be carried out in these operations. The code for "A" is 65, but we can use String.fromCharCode(65 + 1) which gives:

Getting a Code

To get the code from a character then the function charCodeAt() can be used. Unlike String.fromCharCode this is not a static function and the general form of the function is string.charCodeAt(index).

Speed tip: If no index is given then it defaults to 0. However, the function will run faster if an index of 0 is given rather than if it is left as an empty argument.

Both "Ray".charCodeAt() and "Ray".charCodeAt(0) produce:

and which the code for "R"

That's great but suppose you want to get the codes for all the characters in a string?

To do this you need to step through all the characters of the string. The first position is 0 and the last is the length of the string minus 1. This is why < string.length is used in the following code rather than <= string.length.

Speed tip: In the following function for (var count=0; count<str.length; count++) can be used but in this case str.length is evaluated on every loop iteration. Using the form for (var count=0, end=str.length; count<end; count++) means the value for end is evaluated just once. See JSPerf for performance test.

The function:

function getstrcode(){
var str = "Ray is great.";
var outtxt = "";
for (var count=0, end=str.length; count<end; count++){
outtxt += str.charCodeAt(count) + " ";
}
document.getElementById("azlinks5").innerHTML = "The codes for \"" + str + "\" are " + outtxt;
}

Gives:

Combining charCodeAt() and String.fromCharCode()

A code obtained from charCodeAt(0) can be used as the input to String.fromCharCode() by using:

String.fromCharCode("A".charCodeAt(0) + 1)

This gives:

Suppose it was needed that for some reason all characters in a string need to be changed as above, then the following can be used:

function changestrcodes(){
	var str = "Ray is great.";
	var outtxt1 = "";
	var outtxt2 = "";
	var outtxt3 = "";
	var outtxt4 = "";
	for (var count=0, end=str.length; count<end ; count++){
		outtxt1 += str.charAt(count);
		outtxt2 += str.charCodeAt(count) + " ";
		outtxt3 += String.fromCharCode(str.charCodeAt(count) + 1);
		outtxt4 += outtxt3.charCodeAt(outtxt3.length-1) + " ";
	}
	document.getElementById("azlinks6").innerHTML = "Original string: " + outtxt1 + "<br />";
	document.getElementById("azlinks6").innerHTML += "Original letter codes in the string: " + outtxt2 + "<br />";
	document.getElementById("azlinks6").innerHTML += "New string: " + outtxt3 + "<br />";
	document.getElementById("azlinks6").innerHTML += "New letter codes: " + outtxt4;
}

JavaScript already contains functions for changing the casing of text, at least to upper and lower case using str.toUpperCase() and str.toLowerCase(). This can be done by adding 32 to change uppercase letter codes to lowercase ones, and by taking away 32 from lowercase codes to create uppercase ones.

Of course there are limits to this. You probably would only want to change the character codes from 60 to 95 and from 97 to 122 for the English alphabet and using the inbuilt JavaScript functions is much better. CSS text-transform can also be used using the uppercase, lowercase and capitalize properties. This script is only included for completeness.

function changecase(){
	var str = "Ray is Great.";
	var outtxt = "";
	var change = 0;
	for (var count=0, end=str.length; count<end ; count++){
		change=0;
		if ("ABCDEFGHIJXLMNOPQRSTUVXYZ".indexOf(str.charAt(count))>-1){change=32;}
		if ("abcdefghijklmnopqrstuvwxyz".indexOf(str.charAt(count))>-1){change=-32;} 
		outtxt += String.fromCharCode(str.charCodeAt(count) + change);
	}
	document.getElementById("azlinks7").innerHTML = "Original text: " + str + "<br />";
	document.getElementById("azlinks7").innerHTML += "New text: " + outtxt;
}

The following Id'd HTML <p> tags are for use with the buttons made ealier on this page.

This is the link from "A"

Back to Top

This is the link from "B"

Back to Top

This is the link from "C"

Back to Top

This is the link from "D"

Back to Top

This is the link from "E"

Back to Top

This is the link from "F"

Back to Top

This is the link from "G"

Back to Top

This is the link from "H"

Back to Top

This is the link from "I"

Back to Top

This is the link from "J"

Back to Top

This is the link from "K"

Back to Top

This is the link from "L"

Back to Top

This is the link from "M"

Back to Top

This is the link from "N"

Back to Top

This is the link from "O"

Back to Top

This is the link from "P"

Back to Top

This is the link from "Q"

Back to Top

This is the link from "R"

Back to Top

This is the link from "S"

Back to Top

This is the link from "T"

Back to Top

This is the link from "U"

Back to Top

This is the link from "V"

Back to Top

This is the link from "W"

Back to Top

This is the link from "X"

Back to Top

This is the link from "Y"

Back to Top

This is the link from "Z"

Back to Top

This page created 11th May 2008, last modified 18th October 2014


GoStats stats counter