如何聪明地截断JavaScript中的HTML字符串? [英] 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.

例如

这是一些示例文本.我可以使用<>&<>&<>&<>&<>&<>&<>&<>&<>&& amp; ;<>&

This is some sample text. I can use special characters like <>&<>&<>&<>&<>&<>&<>&<>&<>&<>&

然后，我在网格中显示此内容，在该网格中文本被截断为80个字符(以适合可用空间)，并且如果用户将鼠标悬停在文本上，他们将看到完整的字符串.

I then display this content in a grid where the text is truncated to 80 characters (to fit in the available space) and if the user mouse overs the text they can see the full string.

我有一个调用此函数的功能.

I have a function that I call to do this for me.

function GetDescriptionContent(data, type, row){            
    return 
        "<span title='" + data.replace(/'/g, '&#39;') + "'>" + 
            $('<div/>').text(data).html().substring(0, 80) + 
        "</span>";
}

但是，当我对html进行子字符串化时，有时会切掉特殊字符，例如& < >
另外，当字符串中包含特殊字符时，会过早切断字符串，否则长度可能会确定.

However when I'm substringing html I sometimes cut up the special chars like & < >
Also when there is a special char in the string it will cut the string off prematurely that may otherwise be OK in length.

如何在javascript中截断我的HTML字符串?

How can I smartly truncate my HTML string in javascript?

推荐答案

我发现我可以跟踪html实体并调整截断长度.

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 truncated
    if(stringToTruncate.length <= truncationLength){
        return stringToTruncate;
    }

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

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

    //first instance of html entity is inside our truncation length
    var 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 entity
        var 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 character
        if(truncatedString.length >= truncationLength){
            return truncatedString.substring(0,truncationLength) 
                + truncationCharacter;
        }
    }

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

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




    function truncateToLength(
        stringToTruncate, 
        truncationLength, 
        truncationCharacter = "&hellip;")
    {
        //string is too small, does not need to be truncated
        if(stringToTruncate.length <= truncationLength){
            return stringToTruncate;
        }
        
        //find all html entities
        var splitOnAmpersandArray = stringToTruncate.split('&');

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

        //first instance of html entity is inside our truncation length
        var 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 entity
            var 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 character
            if(truncatedString.length >= truncationLength){
                return truncatedString.substring(0,truncationLength) 
                    + truncationCharacter;
            }
        }

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

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

这篇关于如何聪明地截断JavaScript中的HTML字符串?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！