循环遍历 h1 元素并仅输出前 140 个附加省略号的字符

Posted 2023-04-18

【中文标题】循环遍历 h1 元素并仅输出前 140 个附加省略号的字符

【英文标题】：Loop through h1 elements and output only first 140 characters with ellipsis appended

【发布时间】：2013-03-03 01:44:13

【问题描述】：

我想循环遍历一组 html 元素，在本例中为 H1s，计算字符数，如果字符数大于 140，我想截断字符，只输出前 140 个字符，后跟一个省略号。我一直在通过控制台测试我的代码，到目前为止已经想出了这个。

$( "h1.evTitle" ).each(function( truncate ) 
     console.log($(this).text().substring(0, 140).split(" ").slice(0, -1).join(" ") + "...");
);

这可以正常工作，但它会将省略号添加到每个字符串上，而不管长度如何。关于 if 语句仅将其应用于长度大于 140 个字符的字符串的任何想法？请记住，这将是一系列 H1，而不仅仅是其中一个。

这是我的最终代码，以防有人也想这样做。

$('h1').each(function () 
    if ($(this).text().length>140) 
        $(this).text($(this).text().substring(0, 140).split(" ").slice(0, -1).join(" ") + "...");
    
);

我在.split(" ") 中添加了将字符串分隔为包含每个单词的数组，然后我使用.slice(0, -1) 删除了数组中的最后一项（这样我就可以从部分单词中删除任何垃圾字符，然后使用.join(" ") 使该数组再次变为字符串。

【问题讨论】：

在原始字符串上使用.length。

你能给我看一个例子吗？会是：if (this.length() > 140 ) //Do some stuff 吗？

顺便说一句：从 SEO 的角度来看，多个 H1 标签是个坏主意。

@Diodeus，这是有争议的，但在这种情况下无关紧要。

【参考方案1】：

先检查一下：

var str = $(this).text();
if (str.length > 140) 
    str = str.substring(0, 140) + "...";

由于您使用的是 jQuery，因此您可能会在其中抛出一个 $.trim 或两个：

var str = $.trim($(this).text());
if (str.length > 140) 
    str = $.trim(str.substring(0, 140)) + "...";

第一个删除原始上的前导和尾随空格，第二个防止省略号前面有空格。

另请注意，还有一种更简单的截断和添加省略号的方法（如上所示）。

如果您使用拆分/连接的目标是删除多余的空格，我认为不会，但这会：

var str = $.trim($(this).text());
str = str.replace(/  +/g, " ");
if (str.length > 140) 
    str = $.trim(str.substring(0, 140)) + "...";

Live Example | Source（在示例中，我将结果写回元素）

【参考方案2】：

$('h1').each(function () 
    if ($(this).text().length>140) 
        $(this).text($(this).text().substr(0, 140) + "...");
    
);

jsFiddle example

【参考方案3】：

在添加省略号之前检查是否$(this).text().length > 140。