JavaScript Strings

Use the following function to pad a string with to a set length with a given string. The function takes three parameters. The string to be padded, the total number of characters that the string must be, and the string to be added. If the third parameter is not given then 0 is used as a default.

function pad(padMe, totalChars, padWith) {
  padMe = padMe + ""; // force num to be string
 padWith = (padWith) ? padWith :"0"; // set default pad
 if ( padMe.length < totalChars ) {
  while ( padMe.length < totalChars ) {
    padMe = padWith + padMe;
  }
 }
 return padMe;
}

Here are some examples of the function in action. If the string given is longer than the required pad length then the string is returned unchanged.

Counting the number of words in a block of text can be tricky. Users tend to create sections of white space that can throw out most scripts that don't take this into consideration.

I have created a tool for #! code that looks at a textarea of a form, and prints the number of words into an input box in the same form. The textarea calls a function called textCounter() every time a key is pressed. Here is the HTML of the form.

<form onsubmit="return false;" action="" id="wordCountCalc">
<textarea name="message1" rows="10" cols="68" onkeydown="textCounter()" onkeyup="textCounter()"></textarea>
<input readonly="readonly" size="15" type="text" name="len" maxlength="10" value="0" />
</form>

The function works by removing any white space from the start of the text. It then removes any tab characters from the text before splitting the text by one or more white space characters.

This is a simple trick that will allow users to select the contents of a text area. First we need a text area.

<form><textarea name="textarea1" id="textarea1" rows="5" cols="40" wrap="off">This is some
long content.
This is some long content.
This is some long content.
This is some long content.
</textarea>
<br />
<input type="button" value="Select text" onclick="selectText('textarea1')">
</form>

This form also includes a button with an on click event that runs a function. This function takes a single parameter as the name of the element. It then sets the focus to this element and then selects all of the text therein.

Here is a simple function that makes text in a tag fade into one colour slowly before quickly fading back into the original colour. If the background is the same colour as the text then the text will appear to fade in and out.

Letting the user now that something in the background is working is an essential part of website usability. If nothing at all happens then the user will more than likely either try again or go elsewhere. A good way of doing this is to have a little bit of text that says "Working" and animate dots behind it. Here is a function that will do this.

var strDots = '';
var dotLength = 10;
var timeout = 500;
function dots()
  { 
  strDots += '.';
  if ( strDots.length == dotLength ) {
    strDots = '.';
  }
  document.getElementById('working').innerHTML = "<b>Working"+strDots+"</b>";
  dotTimer = setTimeout('dots()', timeout);
}

You then need to add the following bit of HTML to your page to start the dots off. The first one will print off:

Working

Followed by:

Here are a few of the built in JavaScript functions available.

To get the length of a string use the length variable. This returns the number of characters in a string.

var str = 'abcdef';
str.length; // returns 6

The charAt function will return the character at the point specified in the parameter. So to get the first character of a string use:

var str = 'abcdef';
str.charAt(0); // returns a

To get the last character of a string use a combination of charAt and length.

var str = 'abcdef';
str.charAt(str.length - 1); // returns 'f'

To get the position of a character or group of characters in a string use the indexOf function. The function returns -1 if the string is not found.