JavaScript substring: extract text by index

The JavaScript substring method extracts characters between two index positions and returns a new string. It accepts a start index and an optional end index (exclusive), pulling everything from start up to — but not including — end. When the end index is omitted, extraction continues to the end of the string. Unlike slice, substring auto-swaps its arguments when start exceeds end, which prevents accidental empty results.

JavaScript Substring Example For Text Extraction

Output:

Name: report-2024
Extension: csv

How This Example Works

1. filename.lastIndexOf(".") returns 11, the position of the last period in the string.
2. filename.substring(0, 11) extracts characters from index 0 up to (not including) index 11, producing "report-2024".
3. filename.substring(12) omits the end argument, so extraction runs from index 12 to the end of the string, returning "csv".
4. Both calls return new strings — the original filename is never modified because strings in JavaScript are immutable.

Common Mistakes With JavaScript substring

Expecting negative indices to count from the end.

Wrong:

"hello".substring(-3); // "hello", not "llo"

Right:

"hello".slice(-3); // "llo"

substring clamps negative values to 0, so substring(-3) becomes substring(0) and returns the whole string. Use slice for end-relative offsets.

Treating the second argument as a length.

Wrong:

"abcdef".substring(2, 3); // "c", not "cde"

Right:

"abcdef".substring(2, 5); // "cde"

The second parameter is an end index, not a character count. This confusion often comes from the legacy substr(start, length), where "abcdef".substr(2, 3) returns "cde". When migrating from substr, convert the length to an end index: start + length.

JavaScript substring vs slice

Use substring when indices come from calculations that might arrive in wrong order — the auto-swap guarantees a valid result. Use slice when negative offsets are intentional, such as extracting the last N characters with str.slice(-N).

Replacing Legacy substr With substring

The legacy substr(start, length) method (often called JavaScript substr) still shows up in older code and is deprecated in documentation. JavaScript substr substring confusion usually comes from the different meaning of the second argument: substr takes a length, while substring takes an end index. To migrate safely:

1. Replace str.substr(start, length) with str.substring(start, start + length).
2. If start can be negative, switch to slice(start, start + length) instead — substring clamps negatives to 0.
3. Test edge cases where length is 0, negative, or omitted, since substr and substring diverge on these inputs.

FAQ

What is the difference between JavaScript substring and slice?

Both extract part of a string by index, but they diverge on edge cases. substring clamps negative arguments to 0 and swaps start/end when start is larger. slice treats negatives as offsets from the end and returns an empty string when start exceeds end. For standard forward-index extraction, both produce identical results.

Does JavaScript substring modify the original string?

No. JavaScript strings are immutable — every string method returns a new string. The original remains unchanged after any substring call. Assign the result to a variable to keep the extracted portion.

What happens when start is greater than end in substring?

substring silently swaps the two arguments. "abcdef".substring(4, 1) behaves like "abcdef".substring(1, 4) and returns "bcd". This normalization prevents empty-string surprises when index calculations produce reversed bounds.