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

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

我的代码到目前为止:

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

PS

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

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

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

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

实例 | 资源

你可能想看看Cutter.js

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

这个简单的function适用于任何情况,如果需要还可以添加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); 
 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(n0){ n--; } return text.substr(0,n); }else{ return text; } } document.getElementById("result").innerHTML = cut(5,texte); 
 

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