How Do I Smartly Truncate An Html String In Javascript?

I have a content that a user enters in that can be any sort of text. eg This is some sample text. I can use special characters like <>&<>&<>&<>

Solution 1:

I found that I can keep track of the html entities and adjust the truncation length.

function truncateToLength(
    stringToTruncate, 
    truncationLength, 
    truncationCharacter = "…")
{
    //string is too small, does not need to be truncatedif(stringToTruncate.length <= truncationLength){
        return stringToTruncate;
    }

    //find all html entitiesvar splitOnAmpersandArray = stringToTruncate.split('&');

    //first instance of html entity is beyond our truncation length//return what we have plus truncation characterif(splitOnAmpersandArray[0].length > truncationLength){
        return splitOnAmpersandArray[0].substring(0, truncationLength) 
            + truncationCharacter;
    }

    //first instance of html entity is inside our truncation lengthvar truncatedString = splitOnAmpersandArray[0];

    //keep adding onto truncated string until:// it is longer than our length or // we are out of characters to add on.for(var i = 1; i < splitOnAmpersandArray.length; i++){
        //find end of current html entityvar htmlEntityLength = splitOnAmpersandArray[i].indexOf(';');

        //increase truncation length to account for size of current html entity
        truncationLength += htmlEntityLength + 1;

        //add up until next html entity
        truncatedString = truncatedString + '&' + splitOnAmpersandArray[i];

        //if our new length is too long, truncate and add truncation characterif(truncatedString.length >= truncationLength){
            return truncatedString.substring(0,truncationLength) 
                + truncationCharacter;
        }
    }

    //we ran out of characters to add onto string, return resultreturn truncatedString;
}

var content = " &><"'¢£¥€©®";
  $('#sample').html(truncateToLength(content, 5));
  $('#sample').prop('title', $('<div/>').html(content).text());




    functiontruncateToLength(
        stringToTruncate, 
        truncationLength, 
        truncationCharacter = "&hellip;")
    {
        //string is too small, does not need to be truncatedif(stringToTruncate.length <= truncationLength){
            return stringToTruncate;
        }
        
        //find all html entitiesvar splitOnAmpersandArray = stringToTruncate.split('&');

        //first instance of html entity is beyond our truncation length//return what we have plus truncation characterif(splitOnAmpersandArray[0].length > truncationLength){
            return splitOnAmpersandArray[0].substring(0, truncationLength) 
                + truncationCharacter;
        }

        //first instance of html entity is inside our truncation lengthvar truncatedString = splitOnAmpersandArray[0];
        
        //keep adding onto truncated string until:// it is longer than our length or // we are out of characters to add on.for(var i = 1; i < splitOnAmpersandArray.length; i++){
            //find end of current html entityvar htmlEntityLength = splitOnAmpersandArray[i].indexOf(';');

            //increase truncation length to account for size of current html entity
            truncationLength += htmlEntityLength + 1;

            //add up until next html entity
            truncatedString = truncatedString + '&' + splitOnAmpersandArray[i];

            //if our new length is too long, truncate and add truncation characterif(truncatedString.length >= truncationLength){
                return truncatedString.substring(0,truncationLength) 
                    + truncationCharacter;
            }
        }

        //we ran out of characters to add onto string, return resultreturn truncatedString;
    }

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="sample"></div>