如何将jQuery文本字符截断改为按单词边界截断？

嘿，我来帮你把这段jQuery代码改成按单词边界截断的版本，再也不会把单词劈成两半啦！

首先直接上修改后的完整代码，然后一步步说改动的思路和关键调整：

$(document).ready(function() {
  var nInitialWordCount = 20; // 这里设置你想要显示的初始单词数，比如20个
  var moretext = "Read more >";
  var lesstext = "Read less";
  
  $('.longtext').each(function() {
    var $this = $(this);
    // 先提取纯文本内容，避免HTML标签干扰单词分割
    var fullText = $this.text();
    // 按任意数量的空格分割成单词数组（多个空格也只会当成一个分隔符）
    var wordsArray = fullText.split(/\s+/);
    
    // 如果总单词数超过设定的数量，才进行截断
    if (wordsArray.length > nInitialWordCount) {
      // 截取前N个单词，再拼接成完整的字符串，末尾加省略号
      var truncatedText = wordsArray.slice(0, nInitialWordCount).join(' ') + '...';
      // 把完整文本存在元素的data属性里，方便后续展开时调用
      $this.data('originalText', fullText);
      // 替换成截断后的文本+展开按钮
      $this.html(truncatedText + ' <a href="#" class="morelink">' + moretext + '</a>');
    } else {
      // 单词数没超过限制，直接跳过，不用加按钮
      return;
    }
  });

  // 处理展开/收起的点击事件
  $(document).on('click', '.morelink', function(e) {
    e.preventDefault();
    var $this = $(this);
    var $textContainer = $this.closest('.longtext');
    var originalText = $textContainer.data('originalText');
    
    if ($this.text() === moretext) {
      // 切换到展开状态：显示完整文本+收起按钮
      $textContainer.html(originalText + ' <a href="#" class="morelink">' + lesstext + '</a>');
    } else {
      // 切换到收起状态：重新截断文本+展开按钮
      var wordsArray = originalText.split(/\s+/);
      var truncatedText = wordsArray.slice(0, nInitialWordCount).join(' ') + '...';
      $textContainer.html(truncatedText + ' <a href="#" class="morelink">' + moretext + '</a>');
    }
  });
});

关键改动说明： #

• 从字符限制改成单词限制：把原来的nInitialCount（字符数）换成nInitialWordCount（单词数），直接设置你想要保留的单词数量就行。
• 避免HTML干扰：用text()提取纯文本，而不是html()，这样不会把<strong>这类标签当成单词分割，保证截断的是真正的文本内容。
• 精准截断单词边界：用split(/\s+/)把文本按空格分割成单词数组，再用slice截取前N个单词，最后join拼接回去，绝对不会在单词中间截断。
• 优化展开/收起逻辑：把完整文本存在元素的data属性里，不用每次都重新解析原始HTML，性能更好，也避免重复处理出错。

小提示： #

如果你的文本里有带标点的单词（比如"hello,"），这个方法会把它当成一个完整单词，符合正常阅读习惯；如果想把标点和单词分开处理，可以在分割前加一行代码清理文本：

fullText = fullText.replace(/[^\w\s]/g, '');

不过大多数情况下不需要这一步，看你的具体需求调整～

内容的提问来源于stack exchange，提问作者Jordan Norcross