如何使用 javascript 用 (....) 替换多余的文本

Question

我有一个文本文件，用户可以在其中写一些东西，然后我用该文本框的 javascript 获取文本并将其显示在一个段落中。我对该段落有文本限制，例如 50 个字符。如果用户写了超过 50 个 chrac，我想在 45 个 chrac 之后显示 (...)。可以用javascript吗？

就像这是用户写的段落和超过 50 个字符。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim 广告 minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。

我想把它显示为

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 时间事件 (.....)

是否可以使用javascript？

Answer 1

$('textarea').on('keyup', function() {
    var v = this.value.length > 50 ? this.value.substr(0,45) + '(...)' : this.value;
    $('#result').text( v );
});

FIDDLE

这是你在最后一个字时如何切断它：

FIDDLE

Answer 2

对于集合中的每个元素，如果文本长度超过 50 个字符，则以下内容将在 45 个字符后附加 (...)。

elem = $('p');

elem.each(function(){
   curTxt = $(this).text();
    $(this).text(curTxt.length > 50 ? curTxt.substring(0,45)+'...' : curTxt);
});

JSFiddle

Answer 3

是的，这是可能的。您可以使用下一个函数缩短您的字符串：

var str = 'Lorem ipsum...'; var shortedStr = str.substr(0,50) + '(...)';

无论如何，您可以通过 CSS 自动完成。你已经在这里得到了这个主题的答案：

Truncating long strings with CSS: feasible yet?

Answer 4

您可以这样设置全局解决方案：

<p class="truncate">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

您可以使用truncate 类截断每个段落：

$('.truncate').each(function (el, index) {
    $el = $(el);
    $el.text($el.text().substr(0, 50) +' (...)');
});

Answer 5

这也可以在 CSS 中完成以获得更好的结果。

.ellipsis {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

这样，无论其内容是什么，文本总是会在尽可能接近元素末尾的位置被截断。这看起来比看似随机的截断要好得多。

Answer 6

检查这个 jsfiddle.net domo here

jQuery

$(document).ready(function() {
    var showChar = 100;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});

HTML

<div class="comment more">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vestibulum laoreet, nunc eget laoreet sagittis,
    quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
    Duis eget nisl orci. Aliquam mattis purus non mauris
    blandit id luctus felis convallis.
    Integer varius egestas vestibulum.
    Nullam a dolor arcu, ac tempor elit. Donec.
</div>
<div class="comment more">
    Duis nisl nibh, egestas at fermentum at, viverra et purus.
    Maecenas lobortis odio id sapien facilisis elementum.
    Curabitur et magna justo, et gravida augue.
    Sed tristique pellentesque arcu quis tempor.
</div>
<div class="comment more">
    consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit.
    Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum.
    Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.
</div>