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 :

VariableDescriptionTypeWorthDefault value
newstringThe resulting substring.Stringn/an/a
oldstringThe original string to extract a part of.StringRequiredn/a
fromThe position of the first character to extract.NumberOptional0
toThe position after the last character to extract.NumberOptional0

Note :

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() ) {
  document.getElementById('output').innerHTML =
    word.substring(0,pos) + '<u>' + word.charAt(pos) + '<\/u>' + word.substring(pos+1);

document.onkeyup = findfirstletter;