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

Posted 2023-05-07

【中文标题】如何使用 javascript 用 (....) 替换多余的文本

【英文标题】：How to replace extra texts with (....) using javascript

【发布时间】：2013-10-06 06:35:55

【问题描述】：

我有一个文本文件，用户可以在其中写一些东西，然后我用该文本框的 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？

【问题讨论】：

使用 replace() 和 concat()

jQuery.dotdotdot.

你想对多余的文本做什么？它是否需要供以后使用，我们刚刚完全删除？空格算作一个字符吗？

完全删除。不会将空格算作字符。

【参考方案1】：

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

FIDDLE

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

FIDDLE

【讨论】：

OP 要求输入前 45 个字符，并且仅当输入超过 50 个时

【参考方案2】：

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

elem = $('p');

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

JSFiddle

【参考方案3】：

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

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

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

Truncating long strings with CSS: feasible yet?

【参考方案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) +' (...)');
);

【参考方案5】：

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

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

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

【参考方案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>

【讨论】：

天哪，显然有人从未听说过将$(this) 的结果存储在变量中...

好吧，生活和学习；我会建议链接这些方法。也许使用toggleClass()。