javascript - 在 n 个字符后剪切一个字符串，但如果它位于单词的中间，则剪切整个单词

Question

我正在尝试制作一个 JS 函数，它可以在 n 个字符之后剪切一个字符串 - 这很有效。问题是如果它在一个单词的中间它看起来很糟糕，所以我需要你的帮助让它在它的中间切掉整个单词。

到目前为止我的代码：

if($('#desc').text().length > 505){
  str = $("#desc").text();
  $('#desc').text(str.substring(0, 505)).append('...');
}

附言

• #desc 是包含我的字符串的 div。
• 你可以使用 jQuery。

Answer 1

function cut(n) {
    return function textCutter(i, text) {
        var short = text.substr(0, n);
        if (/^\S/.test(text.substr(n)))
            return short.replace(/\s+\S*$/, "");
        return short;
    };
}
$('#desc').text(cut(505));

Answer 2

lastIndexOf方法可以找到字符串中的最后一个空格字符，

并传递第二个参数设置上限。

var cutat= string.lastIndexOf(' ',505);
if(cutat!=-1)string=string.substring(0,cutat)+'...';
//else the string is shorter than 505 (or has no spaces...)

Answer 3

它是for循环,charAt和针对您认为是单词分隔符的字符测试字符的方法的组合。我将为此使用正则表达式：

function splitString(str, index) {
  var delim = /\s|[,\.]/; // Put any other character you consider
                          // a non-word char in the brackets.
                          // The initial \s is any whitespace, so
                          // space, tab, newline, etc.
  var ch;
  var i;

  // Loop until we find a matching delimiter or we run out of string    
  for (i = index;
       i >= 0 && !delim.test(str.charAt(i));
       --i) {
    // No body
  }
  if (i < 0) {
    // No break before, split word in middle
    return index;
  }
  return i + 1;
}

实例| 来源

Answer 4

你可能想看看Cutter.js

Cutter.js 是一个用于截断 HTML 代码以通过字数限制其长度的库，而不会丢失标记。

Answer 5

这个简单的功能在任何情况下都可以使用，如果需要，还可以添加 3 个点：

function shortenString(source_string, max_length) {
    var short = source_string.substr(0, max_length);
    if (/^\S/.test(source_string.substr(max_length)))
        return short.replace(/\s+\S*$/, "") + '...';
    return short;
};

例子：

var title = "This function will work in any situation";
var short = shortenString(title, 30);

Answer 6

		
    var texte = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu magna at justo bibendum accumsan. Aliquam quam metus, hendrerit eget commodo at, sagittis eu lectus. Nunc quis purus urna. Etiam sollicitudin aliquam dui, vel rutrum ligula tincidunt id. In elementum ultricies ex ut bibendum. Proin ac purus id lorem pharetra commodo. Curabitur euismod commodo eleifend. Proin porttitor aliquet massa eu dapibus. Phasellus vitae tempor nibh. Donec venenatis ligula dui, at eleifend urna facilisis sed. Proin sollicitudin vehicula mi aliquam interdum. Quisque in erat purus. Ut ut ipsum nec odio mollis maximus. Vivamus nec ultricies mi, ut posuere augue.`;
    
    function cut(n,text) {
        if(n<text.length){
          while(text[n] != " " && n>0){
            n--;
          }
          return text.substr(0,n);
        }else{
          return text;
        }

		}
    
    document.getElementById("result").innerHTML = cut(5,texte);

<p id="result"></p>

Answer 7

function cutAt(text, n) {
    if(text.length > n){
        for (; " .,".indexOf(text[n]) !== 0; n--){
        }
        return text.substr(0, n) + '...';
    }
    return text;
}
$('#desc').text(cutAt($('#desc').text(), 505));