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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

Вула Чăвашла

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

Discovering SharePoint

And going crazy doing it

Bram de Jager - Coder, Speaker, Author

Office 365, SharePoint and Azure

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

| Blockchain | Serverless Architecture | Microservices Architecture | DevOps | AWS Lambda | Teraform |

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

blksthl

Mostly what I know about SharePoint - CommunicoCuspis

%d bloggers like this: