正文 

当前位置： 首页 > 源码 >

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

     2023-05-07     159

关键词：

【中文标题】如何使用 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()。

如何使用 Javascript 和 PHP 用 mysql 查询的输出填充列表

】如何使用Javascript和PHP用mysql查询的输出填充列表【英文标题】：HowtofillalistwiththeoutputfromamysqlquerywithJavascriptandPHP【发布时间】：2021-10-0615:34:15【问题描述】：我正在尝试使用mysql查询的输出填充列表。我可以提供1件商品，但不... 查看详情

如何在 AMX 页面加载时调用 Javascript 函数？

】如何在AMX页面加载时调用Javascript函数？【英文标题】：HowtocallJavascriptfunctiononAMXpageload?【发布时间】：2017-06-2109:17:17【问题描述】：我正在尝试使用AMX页面中的调用操作在页面加载时调用Javascript函数，但它会引发异常。我正... 查看详情

如何重定向没有 www 的页面。到 www。用javascript？

】如何重定向没有www的页面。到www。用javascript？【英文标题】：HowdoIredirectapagefromnothavingwww.towww.withjavascript?【发布时间】：2017-12-1416:48:30【问题描述】：更新：请使用.htaccess，如果您使用的是JavaScript，那么您的代码100%有问题。... 查看详情

如何阅读用javascript[关闭]

我正在尝试制作随机颜色生成器，但我发现了一个问题。为此，我必须阅读JS中的段落文本。我不想使用任何库。只是HTML和JS。答案您可以使用id来获取要设置样式的元素。 <!DOCTYPEhtml> <html> <body> ... 查看详情

如何使用javascript或php检测窗口关闭事件[重复]

】如何使用javascript或php检测窗口关闭事件[重复]【英文标题】：Howtodetectawindowcloseeventusingjavascriptorphp[duplicate]【发布时间】：2012-10-0123:50:18【问题描述】：可能重复：javascriptdetectbrowserclosetab/closebrowser我正在用php做一个实时游戏... 查看详情

如何使用命令行美化 JavaScript 代码？

】如何使用命令行美化JavaScript代码？【英文标题】：HowcanIbeautifyJavaScriptcodeusingCommandLine?【发布时间】：2010-09-0608:20:31【问题描述】：我正在编写一个批处理脚本来美化JavaScript代码。它需要在Windows和Linux上运行。如何使用命令行... 查看详情

如何使用 JavaScript 获取上一页 URL？ [复制]

】如何使用JavaScript获取上一页URL？[复制]【英文标题】：HowtogetthepreviouspageURLusingJavaScript?[duplicate]【发布时间】：2011-08-1221:15:59【问题描述】：如何在JavaScript中获取上一页的URL？说，我从A页到B页，然后用浏览器的返回按钮回到A... 查看详情

如何使用 JavaScript 源映射（.map 文件）？

】如何使用JavaScript源映射（.map文件）？【英文标题】：HowcanIuseJavaScriptsourcemaps(.mapfiles)?【发布时间】：2014-03-1006:49:34【问题描述】：最近我看到一些JavaScript库（如Angular）附带了带有.js.map扩展名的文件，这只是在我脑海中提出... 查看详情

如何使用 Javascript 或任何 Javascript 框架创建用于保存图像的按钮？

】如何使用Javascript或任何Javascript框架创建用于保存图像的按钮？【英文标题】：HowIcancreateabuttonforsaveaimagewithJavascriptoranyJavascriptframework?【发布时间】：2016-06-1123:47:06【问题描述】：我想用一个按钮保存生成的图片。我看到最快... 查看详情

如何使用 JavaScript 数组数据填充 SELECT 下拉列表？

】如何使用JavaScript数组数据填充SELECT下拉列表？【英文标题】：HowtopopulateaSELECTdropdownlistwithJavaScriptarraydata?【发布时间】：2021-11-2606:43:15【问题描述】：我是HTML和javascript的新手。我正在尝试用我的数据文件填充下拉列表并做一... 查看详情

如何使用和应用 JavaScript 装饰器？

】如何使用和应用JavaScript装饰器？【英文标题】：HowdoIuseandapplyJavaScriptdecorators?【发布时间】：2018-06-1120:27:20【问题描述】：我正在尝试了解如何在一段非常简单的代码中使用装饰器，因此我可以将这个概念应用到我更大的项目... 查看详情

如何使用 JavaScript/jQuery 滚动到页面顶部？

】如何使用JavaScript/jQuery滚动到页面顶部？【英文标题】：HowtoscrolltotopofpagewithJavaScript/jQuery?【发布时间】：2011-05-1118:44:38【问题描述】：有没有办法用JavaScript/jQuery控制浏览器滚动？当我将页面向下滚动一半，然后触发重新加载... 查看详情

如何使用 JAVASCRIPT 录制音频和视频？ （反应 JS）

】如何使用JAVASCRIPT录制音频和视频？（反应JS）【英文标题】：HowtorecordaudioandvideousingJAVASCRIPT?(REACTJS)【发布时间】：2021-12-1007:00:42【问题描述】：我试过了，但是有错误“TypeError:Cannotreadpropertiesofundefined(reading\'stop\')”我在按钮... 查看详情

如何使用 jQuery 或 JavaScript 设置底边距

】如何使用jQuery或JavaScript设置底边距【英文标题】：HowtobottommarginwithjQueryorJavaScript【发布时间】：2016-02-1015:05:03【问题描述】：如何为我的选择框添加下边距？我已经试过了#Selectionmargin-bottom:23px;但这对我不起作用。有没有办法... 查看详情

如何在 Laravel 8 中使用 JavaScript 获取？

】如何在Laravel8中使用JavaScript获取？【英文标题】：HowdoIuseJavaScriptfetchinLaravel8?【发布时间】：2021-03-0821:44:27【问题描述】：问题：因此，每当我单击激活Javascript代码的HTML按钮时，我都会在控制台中收到一条错误消息：POSThttp://... 查看详情

如何使用 JavaScript 在 HTML 文档中插入文本？

】如何使用JavaScript在HTML文档中插入文本？【英文标题】：HowtoinserttextinanHTMLdocumentusingJavaScript?【发布时间】：2013-05-2813:49:25【问题描述】：我想用字符串"saying"替换span元素为id"randMsg"。这是我现在拥有的：document.getElementB... 查看详情

javascript - 如何使用 drawImage/putImageData 进行剪辑

】javascript-如何使用drawImage/putImageData进行剪辑【英文标题】：javascript-HowtoclipusingdrawImage/putImageData【发布时间】：2017-02-0114:18:07【问题描述】：我正在编写一个需要对画布上的图像进行静态剪辑的应用程序（当您在画布上移动图... 查看详情

如何使用 JavaScript 打印基本的圣诞树？

】如何使用JavaScript打印基本的圣诞树？【英文标题】：HowtoprintbasicChristmasTreewithJavaScript?【发布时间】：2018-10-1016:17:52【问题描述】：尝试制作一个简单的脚本，用简单的JS循环在控制台中绘制一定高度的树。应该是这样的。对... 查看详情