实现显示更多 - 在页面上显示更少文本答案

【问题标题】：Implementing Show More - Show Less text on a page实现显示更多 - 在页面上显示更少文本
【发布时间】：2011-09-19 10:48:17
【问题描述】：

我有一个面向内容的产品。在某一时刻，我会显示可用实体的列表及其完整摘要。现在，上述summary是用户使用TinyMCE编辑器输入的数据（即它可以包含HTML标签，如img、p、span、ul、li等）。由于摘要可以跨越几百行，我想干净地实现 Show More-Less 功能，使用 javascript 我加载默认部分隐藏的摘要，并且仅在用户单击时显示其余部分，“显示更多”。

很高兴知道你们已经或将如何实施它。我正在考虑限制用户输入的标记种类，并使用 regex 将标记与 span 链接分开以加载更多（就像 facebook 那样）。

注意：我不能根据字符/单词的数量来拆分文本，因为它可能会违反标记。由于img 标签，我无法通过限制高度来隐藏内容（稍后加载并可以改变包含 div 的高度，进而破坏您的高度计算。）

【问题讨论】：

标签： javascript html uiview tinymce show-hide

【解决方案1】：

http://henrik.nyh.se/2008/02/jquery-html-truncate 这个家伙的一个非常简洁的实现。你也可以在这里看到工作演示http://henrik.nyh.se/examples/truncator/

【讨论】：

【解决方案2】：

我会使用以下函数来删除不需要的 html 标签。

// Strips HTML and PHP tags from a string 
// returns 1: 'Kevin <b>van</b> <i>Zonneveld</i>'
// example 2: strip_tags('<p>Kevin <img src="someimage.png" onmouseover="someFunction()">van <i>Zonneveld</i></p>', '<p>');
// returns 2: '<p>Kevin van Zonneveld</p>'
// example 3: strip_tags("<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>", "<a>");
// returns 3: '<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>'
// example 4: strip_tags('1 < 5 5 > 1');
// returns 4: '1 < 5 5 > 1'
function strip_tags (str, allowed_tags)
{

    var key = '', allowed = false;
    var matches = [];    var allowed_array = [];
    var allowed_tag = '';
    var i = 0;
    var k = '';
    var html = ''; 
    var replacer = function (search, replace, str) {
        return str.split(search).join(replace);
    };
    // Build allowes tags associative array
    if (allowed_tags) {
        allowed_array = allowed_tags.match(/([a-zA-Z0-9]+)/gi);
    }
    str += '';

    // Match tags
    matches = str.match(/(<\/?[\S][^>]*>)/gi);
    // Go through all HTML tags
    for (key in matches) {
        if (isNaN(key)) {
                // IE7 Hack
            continue;
        }

        // Save HTML tag
        html = matches[key].toString();
        // Is tag not in allowed list? Remove from str!
        allowed = false;

        // Go through all allowed tags
        for (k in allowed_array) {            // Init
            allowed_tag = allowed_array[k];
            i = -1;

            if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+'>');}
            if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+' ');}
            if (i != 0) { i = html.toLowerCase().indexOf('</'+allowed_tag)   ;}

            // Determine
            if (i == 0) {                allowed = true;
                break;
            }
        }
        if (!allowed) {
            str = replacer(html, "", str); // Custom replace. No regexing
        }
    }
    return str;
}

在内容是编辑器内容时使用。这将保留 Spans：

var my_clean_content = strip_tags( content, 'span');

【讨论】：

【解决方案3】：

就我个人而言，我会使用jQuery 来执行此操作，并使用诸如Text Constrain 之类的插件。

您可以download it here，或查看jQuery site上的其他类似插件。

【讨论】：

【解决方案4】：

我见过的实现此功能的最佳 jQuery 插件是 Expander。与此问题的答案中链接的大多数或所有其他解决方案不同，它还具有已存在数年的优势，并且在撰写本文时仍在积极维护。

【讨论】：