CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

javascript: show only a part of a long string (ellipsis)

Ellipsis (…) is a character which indicates that the content is to wide. There are many solutions to truncate the text and show an ellipsis: in javascript and css. I want to share my humble function which extends the String.prototype:

String.prototype.ellipsize = function(maxLength) {
	maxLength = maxLength || 100;
	if (this.length <= maxLength) {
		return this;
	}
	var text = this.toString().replace(/[\r\n]/g, ""),
		max = maxLength,
		min = maxLength - 20,
		elipsized,
		tryExtract = function () {
			var regex = new RegExp("^.{" + min + "," + max + "}\\s"),
				match = text.match(regex);
				if (match) {
					elipsized = match[0].replace(/\.?\s$/, '…');
				} else {
					//well, there were no \s between min and max
					min = min - 20;
					tryExtract();
				}
		};
	if (min <= 0) {
		return text;
	}
	tryExtract();
	return elipsized || text;
};

To use it, just call the function from a string property in your favorite templating engine: Angular, jsRender, Knockout….:

order.description.ellipsize();

This function takes an argument maxLength (default 100 chars). It doesn’t cut your text in the middle of a word, that’s why it looks after a whitespace in range of maxLength-20 and maxLength.

Advertisements

2 responses to “javascript: show only a part of a long string (ellipsis)

  1. Mayur 2013-02-19 at 16:39

    While working on my upcoming cool project, I wanted a JavaScript function that will perform an Ellipsis, bare in mind that I usually use C# and already have a .NET method that will do just that. However, in this case since my web application is 90% JS, I figured I could just do that client side. Here is what I came up with, I just wrote this 5 minutes ago, so use at your own risk.

    • Anatoly Mironov 2013-02-19 at 16:59

      Great. Did you want to share your solution? Did it disappear when you saved the comment?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager talking Office 365, SharePoint and Azure

My view and thoughts on Productivity and more.

My programming life

and everything in between

SharePoint Development Lab by @avishnyakov

It is a good place to share some SharePoint stories and development practices.

SharePoint Dragons

Nikander & Margriet on SharePoint

Paul J. Swider - RealActivity

RealActivity is a specialized healthcare services and solution advisory firm.

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Cameron Dwyer | Office 365, SharePoint, Outlook, OnePlace Solutions

Office 365, SharePoint, OnePlace Solutions & Life's Other Little Wonders

paul.tavares

Me and My doings!

Share SharePoint Points!!

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

Aryan Nava

BigData and Blockchain expert in Toronto

SPJoel

SharePoint for everyone

SharePointRyan

Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

%d bloggers like this: