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:
Table of Content
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...