JavaScript Program to Truncate a String to a Certain Length and Add Ellipsis (...)

In this article, we will see how to truncate a string to a certain length and add an ellipsis (...) in JavaScript. To truncate a string to a specific length and add an ellipsis (...) in JavaScript means shortening the string to a predefined character count, indicating that the content continues beyond the truncated portion.

There are several methods that can be used to truncate a string to a certain length and add ellipsis (...) in JavaScript, which are listed below:

We will explore all the above methods along with their basic implementation with the help of examples.

Approach 1: Using String Manipulation

In this approach, we are using String.slice() method To truncate a string and add ellipsis using String.slice(), check if the string length exceeds a limit, then use slice to extract characters and append '...' for truncation.

Syntax:

const combinedString = str1 + " " + str2;

Example: In this example, The truncateString function shortens inputString to 20 characters, adding '...' if it exceeds the limit.

function truncateString(str, maxLength) {
    if (str.length > maxLength) {
        return str.slice(0, maxLength - 3) + '...';
    }
    return str;
}

let inputString = 'This is a Geeks for geeks article';
let truncatedString = truncateString(inputString, 20);
console.log(truncatedString);

This is a Geeks f...

Approach 2: Using substring()

In this approach we are using substring() method to truncate a string. If the input string surpasses the specified limit, it extracts the first characters and appends '...' to indicate truncation.

Syntax:

string.substring(startIndex, endIndex);

Example: In this example, function truncateString shortens inputString to 25 characters, adding '...' if it exceeds the limit.

function truncateString(str, maxLength) {
    if (str.length > maxLength) {
        return str.substring(0, maxLength - 3) + '...';
    }
    return str;
}

let inputString = 'This is a Geeks for geeks article';
let truncatedString = truncateString(inputString, 25);
console.log(truncatedString);

This is a Geeks for ge...

Approach 3: Using Template Literals and Conditional Operator

In this approach, template literal and conditional (ternary) operator. If the length exceeds a limit, truncate and add '...'; otherwise, return the original string.

Syntax:

`string text ${expression} string text`

Example: In this example we are using the above-explained approach.

function truncateString(str, maxLength) {
    return str.length > maxLength ?
        `${str.slice(0, maxLength - 3)}...` : str;
}

let inputString = 'This is a Geeks for geeks article';
let truncatedString = truncateString(inputString, 30);
console.log(truncatedString);

This is a Geeks for geeks a...

Approach 4: Using Array.prototype.join()

In this approach, we will use the Array.prototype.join() method to concatenate the truncated string and the ellipsis. This method involves splitting the string into an array of characters up to the specified length, joining them back into a string, and then appending the ellipsis if necessary.

Example: In this example, the truncateString function shorten inputString to 15 characters, adding '…' if it exceeds the limit.

function truncateString(str, maxLength) {
    if (str.length > maxLength) {
        return [str.slice(0, maxLength - 3), '...'].join('');
    }
    return str;
}

let inputString = 'This is a Geeks for geeks article';
let truncatedString = truncateString(inputString, 15);
console.log(truncatedString);

This is a Ge...