A string within strings

Basic Javascript

The String object is one of the core objects in Javascript, and it has a number of native methods. More can be added through the prototype property. Together with indexOf and charAt, the substring method is perhaps the most frequently used.

The grammar

Description : Returns a portion of a string

Syntax :

newstring = oldstring.substring( from, to );

Where :

Note :

• from is inclusive, to is exclusive; the difference between the two is the length of the resulting substring.
• If to is not specified or lies outside of oldstring, the result will run to the end of the original.
• If to is smaller than from, they will be exchanged, except in JS1.2, which returns an out of memory error in that case.
• If they are equal, an empty string will result, unless both are omitted, in which case the original string is returned.
• Counting starts at zero: the first character is at position 0, the second at position 1, etc.

Some examples

Click on any of the alert statements to have the line executed. Spaces at either end of the result may not all be immediately apparent. Also note the use of the indexOf method in the last examples, another useful method of String objects.

var mystring = 'This is an example string.';
alert( mystring.substring( 0, 4 ) );  //  'This'/**/
alert( mystring.substring( 4, 8 ) );  //  ' is '/**/
alert( mystring.substring( 8 ) );   //  'an example string.'/**/
alert( mystring.substring( 8, mystring.indexOf( 'p' ) ) );  //  'an exam'/**/
alert( mystring.substring( mystring.indexOf( 'e' ), mystring.lastIndexOf( 'e' ) ) );  //  'exampl'/**/

An interactive test

Fill in your own teststring and indeces in the textfields below for even more experimentation.

A practical example

This Javascript function demonstrates the use of the substring method. Type a letter in the small text field, enter a word to scan for that letter in the bigger box below it, and watch the correct letter become underlined. If your browser supports key events, there is no need to click the button.

The script

At every keystroke, a function findfirstletter() is called. The first thing this function does, is make local copies of the values in the form fields, storing them in variables word and letter.

Next the function enters a for loop, in which a variable by the name of pos increments to the value of word.length, unless the loop breaks because word.charAt(pos) matches letter. (Note that the charAt() method is very similar to the substring method, except that the substring it returns is never longer than one character. Also note that the curly brackets were not strictly necessary for the for loop nor for the if statement, because both have only one child command to evaluate, respectively the if and the break.)

Now when the loop terminates and the function is ready for the next line, pos will either hold the position of the character to underline, or the word length value if there was no match and no break. Since word.substring(0,word.length) always returns the whole word itself, the final line can safely be executed, where the word is broken into three bits, underline tags are inserted, and the result is written into the ouput field. Presto!

Yes, that 's right: every time a user strikes a key which does not create a match, underline tags are inserted just after the last letter.   :-)

function findfirstletter() {
  var form = document.forms.input.elements;
  var letter = form.letter.value;
  var word = form.word.value;
  for( var pos = 0, n = word.length; pos < n; pos++ ) {
    if( word.charAt(pos).toLowerCase() == letter.toLowerCase() ) {
      break;
    }
  }
  document.getElementById('output').innerHTML =
    word.substring(0,pos) + '<u>' + word.charAt(pos) + '<\/u>' + word.substring(pos+1);
}

document.onkeyup = findfirstletter;
findfirstletter();