Display only the first x characters (or words) of a string using JavaScript

Image for post
Image for post

Sometimes, when designing for interfaces, there’s just way too much content (for the given context) to display on a particular screen. Often, the user might not need to see all the information right away. I’ve run into this issue a few times, mostly while making cards out of some data coming from a database or an API endpoint.

Two ways of only displaying the first x characters (or words) using JavaScript

  1. Using slice()
const string = "In an age when nature and magic rule the world, there is an extraordinary legend: the story of a warrior who communicates with animals, who fights sorcery and the unnatural. His name is Dar, last of his tribe. He is also called Beastmaster."// slice(start, stop)string.slice(0, 50)// => returns "In an age when nature and magic rule the world, th"

You can also use slice() like so:

string.split(' ').slice(0, 5).join(' ')// => "In an age when nature"

The split(' ').slice(start, stop).join(' ') approach above doesn’t cut any words short.

2. Using substring()

const string = "In an age when nature and magic rule the world, there is an extraordinary legend: the story of a warrior who communicates with animals, who fights sorcery and the unnatural. His name is Dar, last of his tribe. He is also called Beastmaster."// substring(start, stop)string.substring(0, 50)// => returns "In an age when nature and magic rule the world, th"

Things to note:

  • Both slice() and substring() returns a new string, and do not mutate the original string.
  • Using slice(), If start > stop, returns an empty string "".
string.slice(10, 1)
// => ""
  • Using substring(), if start > stop, it swaps out those 2 arguments
string.substring(10, 1)
// => "n an age "
  • Using substring(), if a character is negative, it will treat it as if its zero
string.substring(-1, 10)
// => "In an age "

There are some more peculiarities that you can find in this details SO response.

I like making things and solving problems. http://nikhilvijayan.com.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store