在n个字符后剪切一个字符串,但如果它在一个单词的中间剪切整个单词

时间:2012-05-25 08:32:54

标签: javascript jquery character truncate

我正在尝试创建一个在n个字符后剪切字符串的JS函数 - 这有效。问题是,如果它在一个单词的中间看起来很糟糕,所以我需要你的帮助,如果它是中间的话,它会切断整个单词。

到目前为止我的代码:

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

P.S

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

7 个答案:

答案 0 :(得分:18)

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));

答案 1 :(得分:5)

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...)

答案 2 :(得分:2)

它是for loopcharAt的组合,是一种测试角色的方法,而不是你认为是字分隔符的方法。我将使用regular expression

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;
}

Live example | source

答案 3 :(得分:1)

您可能需要查看Cutter.js

  

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

答案 4 :(得分:0)

这个简单的功能可以在任何情况下使用,如果需要还可以添加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);

答案 5 :(得分:0)

		
    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>

答案 6 :(得分:-1)

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));