Dodona gives you answers

How do I truncate an HTML string without breaking the HTML code?

with 16 comments

Sometimes on a website, you just want to show the first few hundred characters of a text as an introduction, and link to the full text. But by simply using the PHP substr() function, you’re likely to break the HTML code or cut words in half. The PHP function below allows you to maintain your HTML and complete words while trimming your HTML string. The code is from the cakephp framework.

Links:
www.gsdesign.ro/blog/cut-html-string-without-breaking-the-tags
www.cakephp.org

@param string $text String to truncate.
@param integer $length Length of returned string, including ellipsis.
@param string $ending Ending to be appended to the trimmed string.
@param boolean $exact If false, $text will not be cut mid-word
@param boolean $considerHtml If true, HTML tags would be handled correctly
@return string Trimmed string.

function truncate($text, $length = 100, $ending = '...', $exact = false, $considerHtml = true) {
	if ($considerHtml) {
		// if the plain text is shorter than the maximum length, return the whole text
		if (strlen(preg_replace('/<.*?>/', '', $text)) <= $length) {
			return $text;
		}
		// splits all html-tags to scanable lines
		preg_match_all('/(<.+?>)?([^<>]*)/s', $text, $lines, PREG_SET_ORDER);
		$total_length = strlen($ending);
		$open_tags = array();
		$truncate = '';
		foreach ($lines as $line_matchings) {
			// if there is any html-tag in this line, handle it and add it (uncounted) to the output
			if (!empty($line_matchings[1])) {
				// if it's an "empty element" with or without xhtml-conform closing slash
				if (preg_match('/^<(\s*.+?\/\s*|\s*(img|br|input|hr|area|base|basefont|col|frame|isindex|link|meta|param)(\s.+?)?)>$/is', $line_matchings[1])) {
					// do nothing
				// if tag is a closing tag
				} else if (preg_match('/^<\s*\/([^\s]+?)\s*>$/s', $line_matchings[1], $tag_matchings)) {
					// delete tag from $open_tags list
					$pos = array_search($tag_matchings[1], $open_tags);
					if ($pos !== false) {
					unset($open_tags[$pos]);
					}
				// if tag is an opening tag
				} else if (preg_match('/^<\s*([^\s>!]+).*?>$/s', $line_matchings[1], $tag_matchings)) {
					// add tag to the beginning of $open_tags list
					array_unshift($open_tags, strtolower($tag_matchings[1]));
				}
				// add html-tag to $truncate'd text
				$truncate .= $line_matchings[1];
			}
			// calculate the length of the plain text part of the line; handle entities as one character
			$content_length = strlen(preg_replace('/&[0-9a-z]{2,8};|&#[0-9]{1,7};|[0-9a-f]{1,6};/i', ' ', $line_matchings[2]));
			if ($total_length+$content_length> $length) {
				// the number of characters which are left
				$left = $length - $total_length;
				$entities_length = 0;
				// search for html entities
				if (preg_match_all('/&[0-9a-z]{2,8};|&#[0-9]{1,7};|[0-9a-f]{1,6};/i', $line_matchings[2], $entities, PREG_OFFSET_CAPTURE)) {
					// calculate the real length of all entities in the legal range
					foreach ($entities[0] as $entity) {
						if ($entity[1]+1-$entities_length <= $left) {
							$left--;
							$entities_length += strlen($entity[0]);
						} else {
							// no more characters left
							break;
						}
					}
				}
				$truncate .= substr($line_matchings[2], 0, $left+$entities_length);
				// maximum lenght is reached, so get off the loop
				break;
			} else {
				$truncate .= $line_matchings[2];
				$total_length += $content_length;
			}
			// if the maximum length is reached, get off the loop
			if($total_length>= $length) {
				break;
			}
		}
	} else {
		if (strlen($text) <= $length) {
			return $text;
		} else {
			$truncate = substr($text, 0, $length - strlen($ending));
		}
	}
	// if the words shouldn't be cut in the middle...
	if (!$exact) {
		// ...search the last occurance of a space...
		$spacepos = strrpos($truncate, ' ');
		if (isset($spacepos)) {
			// ...and cut the text in this position
			$truncate = substr($truncate, 0, $spacepos);
		}
	}
	// add the defined ending to the text
	$truncate .= $ending;
	if($considerHtml) {
		// close all unclosed html-tags
		foreach ($open_tags as $tag) {
			$truncate .= '</' . $tag . '>';
		}
	}
	return $truncate;
}


Interested in a Content Management System built for webdesigners by webdesigners? Check out Spike CMS.


About these ads

Written by lutsen

April 5, 2009 at 1:55 pm

Posted in PHP

16 Responses

Subscribe to comments with RSS.

  1. I was also searching for this, but I did not find your solutions before. I implemented solution using DomDocument. The code is very simple http://code.google.com/p/cut-html-string/

    Any comments?

    prajwalaa

    May 8, 2009 at 6:54 am

    • I’ve tried to use this cut-html-string project on google code, one problem I found is with accented characters, I have a string which should say:

      -> Whats the name of that little “house” next to the castle at mont Jüic?

      when passing it through this cut object, I get

      -> Whats the name of that little “house” next to the castle at mont Jüic?

      So it seems to have problems with multi-byte utf8 characters, I tried to fix it but with no avail. I’m going to put a bug report on his project to see whether it’s possible to fix.

      Christopher Thomas

      July 13, 2011 at 9:59 am

  2. This is brilliant. I started writing my own but I’m so glad I Googled it before doing any more. Much appreciated!

    Cheers.

    Benjamin Wells

    June 10, 2009 at 11:45 am

  3. how to get the rest string?

    deerawan

    September 17, 2009 at 11:15 am

    • @deerawan I guess the function doesn’t provide for that right now. But you are free to modify it.

      lutsen

      September 17, 2009 at 9:20 pm

    • By clicking Read more link and getting a whole article from DB in details :P

      Chips

      December 22, 2009 at 12:07 am

  4. Thank you very much. it helped me very much.

    Manish Soni

    February 6, 2010 at 3:22 pm

  5. I just ported this over to C# for a project. I think there might be a bug in your ‘exact’ logic, though. Consider the case where your truncated HTML ends with:

    In this case, the last space is *within* the EMBED tag, and your ‘exact’ code would result in invalid HTML.

    I’m trying to implement a regex that will find spaces that are not between characters, and then truncating at the last match, instead. Let me know if you have any better ideas (or if I’m wrong altogether). =)

    Jared

    March 13, 2010 at 4:19 am

  6. amazing function !
    does exactly as described.
    Used this in my Drupal site. Thanks so much for the work.

    wolfie

    March 28, 2010 at 12:40 am

  7. [...] How do I truncate an HTML string without breaking the HTML code?Bra när du behöver kapa en sträng utan att förstöra HTML-kod och ord. [...]

  8. This worked splendidly. Thank you for saving me hours of frustration!

    Doc

    September 1, 2010 at 9:50 am

  9. I just need it,thank u very much .

    jfbcb

    April 18, 2011 at 8:48 am

  10. Great code, it helped me for months,

    I just had an issue because I used spaces in my tags (like ) which was considered as the last space in text so the tag was broke right in the middle (moreover the tag was not inside the open tags list).

    So I’ve added this part just before appending the ending string:

    if($considerHtml) {
    // delete unclosed tags in the end of string
    $truncate = preg_replace(‘/]*$/’, ”, $truncate);
    }

    Still, it was really helpful, thanks :)

    Kaktul

    December 12, 2012 at 1:18 pm

  11. Is there a way to add a starting point to the function?

    GreenFin

    May 28, 2013 at 12:41 am

  12. […] it be feasible to add a starting point to the function below (from here)? Or a way to use a dynamically set point in the $text […]


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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: