VândPupăză

If you have a larger block of text and you want to show just a shorter ‘intro’ of it, Java Script’s substr() method is one way of getting the job done.

However, when using substr() with a predefined fixed length and any block of text you may find yourself cutting the string somewhere inside a word and that’s not nice for the user.

The problem:
I’ll just use a small text block for readability. In real life your text would probably be much longer and not hard-coded.


If you want to cut off text at a predefined length of 30 characters, including spaces, in Java Script you can use the following snippet:

var textBlock = "Lorem ipsum dolor, sit amet consectetuer adipiscing elit.";
var intro = textBlock.substr(0, 30);

This bit of code takes the string stored in the textBlock variable and chops if off after 30 characters starting from the beginning.

The intro variable would hold: “Lorem ipsum dolor, sit amet co“.
That’s not ok. We just cut inside “consectetuer”. Depending on your text, that word may be important for the overall context of the intro and that’s just one of the reasons you shouldn’t cut inside it.

The smart bit
The issue here is to find a way to cut textBlock without cutting-off leters from a word. New code is bold.

var textBlock = "Lorem ipsum dolor, sit amet consectetuer adipiscing elit.";
var charNr = 30;
while(textBlock.charAt(charNr) !== " "){
--charNr;
}
var intro = textBlock.substr(0, charNr);

The charNr variable stores the character number after which you want to cut the string. We use this variable in the looping while statement where Java Script’s native charAt() method will return the character at the position specified by charNr. If the character at the current position isn’t a blank space, decrement the charNr variable and check again.

The loop will run until it finds a blank space. At this point you have the number of characters after which you should cut the string and be sure you don’t chop-off letters from words.

This method works both ways. You can also increment charNr until you find a space. You’d increment the variable using ++charNr.

Build on this!
The above example shows a simple use of the method. It’s simply an idea-starter.
You should creatively build on this method in order to get it running as you want.

Note, that the above example doesn’t take character encoding into account.

For example if you want to preserve context securely you should check for the first / last occurrence of a period (.) character and cut after it. Check for the leading character and be sure you don’t cut a number if the period is used as a decimal symbol. This way you only cut after a sentence and preserve the overall context.

You can also check for HTML tags and cut by paragraph.

Using this method on the client side (using Java Script) really makes sense if you intend to provide additional functionality. You can cut off long comments, show the intro and wrap the rest of the text in a HTML element. Use this to provide a “more…” link that toggles the additional text visibility.

Be creative! :)