Javascript: truncate() met html

Een titel inkorten met javascript: geen probleem in principe, alleen staat in die titel soms ook html (denk aan super- en subscript bijv.). Ook zijn afbrekeningen bij sommige zinnen wat ongelukkig.

Neem de volgende zin:
Geen probleem in principe, alleen staat in die titel soms ook html (denk aan super en subscript bijv.)

Stel ik wil die afbreken op 75 tekens, dan zou een eenvoudige truncate functie het volgende doen:
Geen probleem in principe, alleen staat in die titel soms ook html (denk

Dat staat niet zo netjes, ook daar wil ik rekening mee houden. Hiervoor heb ik een truncate() functie gemaakt in javascript die rekening houdt met geopende tags.

String.prototype.truncate = function(max) {
	if (this.length < max)
		return this;
	
	var text = '';
	var symbols = {
		open : ['{', '[', '(', '<'],
		close : ['}', ']', ')', '>']
	}
	var open = 0; // position of opened tag

	// loop through characters of the string
	for (var i = 0; i < this.length; i++) {
		var character = this.charAt(i);
		
		// tag opened or closed?
		if (symbols.open.contains(character)) {
			open = i;
		}
		else if (symbols.close.contains(character)) {
			open = 0;
		}
		
		// max isn't reached
		if ((i + 1) < max) {
			text += character;
		}
		else {
			// max length exceeded but open tag, substring at last valid pos
			if (open > 0) {
				text = text.substring(0, open);
			}
			
			// do not continue, max reached
			break;
		}
	}
	
	return text;
}

De voorbeeldzin wordt dan:
Geen probleem in principe, alleen staat in die titel soms ook html

Een ander voorbeeld met html:

Dit is een voorbeeldzin met html die moet worden afgekapt maar <strong>rekening</strong> houdend met html tags

Als ik deze afkap op dezelfde 75 tekens, wordt dat dan:
Dit is een voorbeeldzin met html die moet worden afgekapt maar

Het blijft natuurlijk lastig om tekstueel een net afbreekpunt te vinden (in het laatste voorbeeld zou je wellicht het laatste woord ook weg willen laten), maar liever midden in een zin dan html tags!

Leave a Reply

Your email address will not be published. Required fields are marked *