Displaying a Substring in JavaScript

The JavaScript language provides a diverse range of functions for string handling within websites. This allows developers to process user input and other strings in various ways. Substrings are among the most useful of these functions, as they allow you to access and process smaller sections of a larger strings where necessary. Using substrings in JavaScript is a straightforward task, worth learning at an early stage in JavaScript programming as it often proves useful.

Preparation

Prepare the string you plan on processing within your script. The following example code creates a string variable with some arbitrary text in it:

var wholeString = "ABCDEFG";

You can use any text string you like, including any you already have stored within your script, so this step is purely for demonstration. If you do already have a string, make sure you are storing it in a variable as in the example, as this will facilitate the substring processing.

Processing

Process the substring function on your string. Using the following code syntax, carry out the substring operation on your text variable:

wholeString.substring(1, 5);

This method takes the start and end string positions as parameters. The first index indicates the substring start position, while the second index is one after the final character to be included in the substring. Using the example text string, this operation would result in the text "BCDE".

Alternative

Process the "substr" function on your text string. The "subtr" is an alternative option for processing substrings in JavaScript, working in a slightly different way to the main substring method. To achieve the same result as the substring example, you can use the following syntax:

wholeString.substr(1, 4);

The second parameter in this case indicates the total length of the resulting substring. The first parameter is simply the starting character as in the first example. You can optionally carry out both functions using only a single parameter indicating the start position, and the substring will contain the remaining characters in the original string, for example:

wholeString.substring(1);
wholeString.substr(1);

Both of these will result in "BCDEFG".

Store

Store the result of your substring operation in a variable. Whichever method you choose, you can store the result in a variable for further use as follows:

var subSection = wholeString.substring(1, 4);

Using the alternative "substr" function:

var subSection = wholeString.substr(1, 4);

This allows you to access the substring at any point in your script after the operation has been carried out.

Display

Display your substring. There are different options for displaying strings and sections of strings within the Web browser, so which method you adopt will depend on your own project. The following code included within the body section of your HTML inside a "script" area will simply output the substring as text:

document.write(subSection);

If your JavaScript function is in the page head or another script and you want it to write into the page body, you can use the following to include it within an HTML element with a specific ID:

document.getElementById("anelement").innerHTML = subSection;

Notes

• The string class in JavaScript provides lots of other functions you may find useful.
  
• Make sure you test your string processing using realistic examples of text, particularly if user input is being used, as unexpected text may prevent your code from functioning correctly.
  

See also:
How To: AJAX PHP Functions
Implementing Image Links with JavaScript
How To: JavaScript PHP Function Calls