ย่อสตริงโดยไม่ต้องตัดคำใน JavaScript

ฉันไม่ค่อยถนัดกับการปรับแต่งสตริงใน JavaScript และฉันก็สงสัยว่าคุณจะตัดสตริงให้สั้นลงได้อย่างไรโดยไม่ต้องตัดคำใด ๆ ออก ฉันรู้วิธีใช้สตริงย่อย แต่ไม่ใช่ indexOf หรืออะไรก็ได้ที่ดีจริงๆ

สมมติว่าฉันมีสตริงต่อไปนี้:

text = "this is a long string I cant display"

ฉันต้องการตัดให้เหลือ 10 อักขระ แต่ถ้าไม่ได้ลงท้ายด้วยการเว้นวรรคให้จบคำนั้น ฉันไม่ต้องการให้ตัวแปรสตริงมีลักษณะเช่นนี้:

"นี่มันสายยาวฉันไม่ไหว"

ฉันต้องการให้มันจบคำจนกว่าจะมีช่องว่างเกิดขึ้น

ถ้าฉันเข้าใจถูกต้องคุณต้องการย่อสตริงให้มีความยาวแน่นอน (เช่นย่อ"The quick brown fox jumps over the lazy dog"ให้สั้นลงพูด 6 อักขระโดยไม่ต้องตัดคำใด ๆ ออก)

หากเป็นกรณีนี้คุณสามารถลองทำสิ่งต่อไปนี้:

var yourString = "The quick brown fox jumps over the lazy dog"; //replace with your string.
var maxLength = 6 // maximum number of characters to extract

//Trim and re-trim only when necessary (prevent re-trim when string is shorted than maxLength, it causes last word cut) 
if(yourString.length > trimmedString.length){
    //trim the string to the maximum length
    var trimmedString = yourString.substr(0, maxLength);

    //re-trim if we are in the middle of a word and 
    trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")))
}

มีหลายวิธีในการทำ แต่นิพจน์ทั่วไปเป็นวิธีบรรทัดเดียวที่มีประโยชน์:

"this is a longish string of text".replace(/^(.{11}[^\s]*).*/, "$1"); 
//"this is a longish"

นิพจน์นี้ส่งคืนอักขระ 11 ตัวแรก (ใด ๆ ) บวกกับอักขระที่ไม่ใช่ช่องว่างที่ตามมา

ตัวอย่างสคริปต์:

<pre>
<script>
var t = "this is a longish string of text";

document.write("1:   " + t.replace(/^(.{1}[^\s]*).*/, "$1") + "\n");
document.write("2:   " + t.replace(/^(.{2}[^\s]*).*/, "$1") + "\n");
document.write("5:   " + t.replace(/^(.{5}[^\s]*).*/, "$1") + "\n");
document.write("11:  " + t.replace(/^(.{11}[^\s]*).*/, "$1") + "\n");
document.write("20:  " + t.replace(/^(.{20}[^\s]*).*/, "$1") + "\n");
document.write("100: " + t.replace(/^(.{100}[^\s]*).*/, "$1") + "\n");
</script>

เอาท์พุต:

1:   this
2:   this
5:   this is
11:  this is a longish
20:  this is a longish string
100: this is a longish string of text

ฉันรู้สึกแปลกใจที่สำหรับปัญหาง่ายๆเช่นนี้มีคำตอบมากมายที่อ่านยากและบางคำรวมถึงข้อที่เลือกก็ใช้ไม่ได้

โดยปกติฉันต้องการให้สตริงผลลัพธ์มีอักขระไม่เกิน maxLenตัว ฉันยังใช้ฟังก์ชันเดียวกันนี้เพื่อย่อทากใน URL

str.lastIndexOf(searchValue[, fromIndex]) รับพารามิเตอร์ที่สองซึ่งเป็นดัชนีที่จะเริ่มค้นหาย้อนหลังในสตริงทำให้สิ่งต่างๆมีประสิทธิภาพและเรียบง่าย

// Shorten a string to less than maxLen characters without truncating words.
function shorten(str, maxLen, separator = ' ') {
  if (str.length <= maxLen) return str;
  return str.substr(0, str.lastIndexOf(separator, maxLen));
}

นี่คือผลลัพธ์ตัวอย่าง:

for (var i = 0; i < 50; i += 3) 
  console.log(i, shorten("The quick brown fox jumps over the lazy dog", i));

 0 ""
 3 "The"
 6 "The"
 9 "The quick"
12 "The quick"
15 "The quick brown"
18 "The quick brown"
21 "The quick brown fox"
24 "The quick brown fox"
27 "The quick brown fox jumps"
30 "The quick brown fox jumps over"
33 "The quick brown fox jumps over"
36 "The quick brown fox jumps over the"
39 "The quick brown fox jumps over the lazy"
42 "The quick brown fox jumps over the lazy"
45 "The quick brown fox jumps over the lazy dog"
48 "The quick brown fox jumps over the lazy dog"

และสำหรับทาก:

for (var i = 0; i < 50; i += 10) 
  console.log(i, shorten("the-quick-brown-fox-jumps-over-the-lazy-dog", i, '-'));

 0 ""
10 "the-quick"
20 "the-quick-brown-fox"
30 "the-quick-brown-fox-jumps-over"
40 "the-quick-brown-fox-jumps-over-the-lazy"

ดูเหมือนทุกคนจะลืมไปว่า indexOf ใช้อาร์กิวเมนต์สองตัวคือสตริงที่จะจับคู่และดัชนีอักขระจะเริ่มมองหา คุณสามารถแบ่งสตริงในช่องว่างแรกหลังจาก 10 อักขระ

function cutString(s, n){
    var cut= s.indexOf(' ', n);
    if(cut== -1) return s;
    return s.substring(0, cut)
}
var s= "this is a long string i cant display";
cutString(s, 10)

/*  returned value: (String)
this is a long
*/

Lodash มีฟังก์ชันที่เขียนขึ้นโดยเฉพาะสำหรับสิ่งนี้: _.truncate

const truncate = _.truncate
const str = 'The quick brown fox jumps over the lazy dog'

truncate(str, {
  length: 30, // maximum 30 characters
  separator: /,?\.* +/ // separate by spaces, including preceding commas and periods
})

// 'The quick brown fox jumps...'

จากคำตอบของ NT3RP ซึ่งไม่สามารถจัดการกับบางกรณีได้ฉันได้สร้างรหัสนี้ รับประกันว่าจะไม่ส่งคืนข้อความที่มีเหตุการณ์ขนาด> maxLength เป็นจุดไข่ปลา...เพิ่มในตอนท้าย

นอกจากนี้ยังจัดการกับบางกรณีที่มีมุมเช่นข้อความที่มีคำเดียวคือ> maxLength

shorten: function(text,maxLength,options) {
    if ( text.length <= maxLength ) {
        return text;
    }
    if ( !options ) options = {};
    var defaultOptions = {
        // By default we add an ellipsis at the end
        suffix: true,
        suffixString: " ...",
        // By default we preserve word boundaries
        preserveWordBoundaries: true,
        wordSeparator: " "
    };
    $.extend(options, defaultOptions);
    // Compute suffix to use (eventually add an ellipsis)
    var suffix = "";
    if ( text.length > maxLength && options.suffix) {
        suffix = options.suffixString;
    }

    // Compute the index at which we have to cut the text
    var maxTextLength = maxLength - suffix.length;
    var cutIndex;
    if ( options.preserveWordBoundaries ) {
        // We use +1 because the extra char is either a space or will be cut anyway
        // This permits to avoid removing an extra word when there's a space at the maxTextLength index
        var lastWordSeparatorIndex = text.lastIndexOf(options.wordSeparator, maxTextLength+1);
        // We include 0 because if have a "very long first word" (size > maxLength), we still don't want to cut it
        // But just display "...". But in this case the user should probably use preserveWordBoundaries:false...
        cutIndex = lastWordSeparatorIndex > 0 ? lastWordSeparatorIndex : maxTextLength;
    } else {
        cutIndex = maxTextLength;
    }

    var newText = text.substr(0,cutIndex);
    return newText + suffix;
}

ฉันเดาว่าคุณสามารถลบการพึ่งพา jquery ได้อย่างง่ายดายหากสิ่งนี้รบกวนคุณ

นี่คือคำตอบในหนึ่งบรรทัด

text = "this is a long string I cant display"

function shorten(text,max) {
    return text && text.length > max ? text.slice(0,max).split(' ').slice(0, -1).join(' ') : text
}


console.log(shorten(text,10));

ฉันไปงานปาร์ตี้สาย แต่นี่เป็นวิธีแก้ปัญหาเล็กน้อยและง่ายที่ฉันคิดขึ้นเพื่อส่งคืนคำพูดจำนวนมาก

ไม่เกี่ยวข้องโดยตรงกับความต้องการตัวละครของคุณ แต่ให้ผลลัพธ์แบบเดียวกับที่ฉันเชื่อว่าคุณเป็น

function truncateWords(sentence, amount, tail) {
  const words = sentence.split(' ');

  if (amount >= words.length) {
    return sentence;
  }

  const truncated = words.slice(0, amount);
  return `${truncated.join(' ')}${tail}`;
}

const sentence = 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.';

console.log(truncateWords(sentence, 10, '...'));

ดูตัวอย่างการทำงานที่นี่: https://jsfiddle.net/bx7rojgL/

ซึ่งจะไม่รวมคำสุดท้ายแทนที่จะรวมไว้ด้วย

function smartTrim(str, length, delim, appendix) {
    if (str.length <= length) return str;

    var trimmedStr = str.substr(0, length+delim.length);

    var lastDelimIndex = trimmedStr.lastIndexOf(delim);
    if (lastDelimIndex >= 0) trimmedStr = trimmedStr.substr(0, lastDelimIndex);

    if (trimmedStr) trimmedStr += appendix;
    return trimmedStr;
}

การใช้งาน:

smartTrim(yourString, 11, ' ', ' ...')
"The quick ..."

ฉันใช้วิธีอื่น ในขณะที่ฉันต้องการผลลัพธ์ที่คล้ายกัน แต่ก็ต้องการให้ค่าตอบแทนน้อยกว่าความยาวที่ระบุ

function wordTrim(value, length, overflowSuffix) {
    value = value.trim();
    if (value.length <= length) return value;
    var strAry = value.split(' ');
    var retString = strAry[0];
    for (var i = 1; i < strAry.length; i++) {
        if (retString.length >= length || retString.length + strAry[i].length + 1 > length) break;
        retString += " " + strAry[i];
    }
    return retString + (overflowSuffix || '');
}

แก้ไขฉัน refactored มันบิตที่นี่: ตัวอย่าง JSFiddle จะเข้าร่วมอาร์เรย์เดิมอีกครั้งแทนที่จะเชื่อมต่อกัน

function wordTrim(value, length, overflowSuffix) {
    if (value.length <= length) return value;
    var strAry = value.split(' ');
    var retLen = strAry[0].length;
    for (var i = 1; i < strAry.length; i++) {
        if(retLen == length || retLen + strAry[i].length + 1 > length) break;
        retLen+= strAry[i].length + 1
    }
    return strAry.slice(0,i).join(' ') + (overflowSuffix || '');
}

function shorten(str,n) {
  return (str.match(RegExp(".{"+n+"}\\S*"))||[str])[0];
}

shorten("Hello World", 3); // "Hello"

// SHORTEN STRING TO WHOLE WORDS
function shorten(s,l) {
  return (s.match(new RegExp(".{"+l+"}\\S*"))||[s])[0];
}

console.log( shorten("The quick brown fox jumps over the lazy dog", 6) ); // "The quick"

คุณสามารถใช้truncateซับเดียวด้านล่าง:

const text = "The string that I want to truncate!";

const truncate = (str, len) => str.substring(0, (str + ' ').lastIndexOf(' ', len));

console.log(truncate(text, 14));

shorten(str, maxLen, appendix, separator = ' ') {
if (str.length <= maxLen) return str;
let strNope = str.substr(0, str.lastIndexOf(separator, maxLen));
return (strNope += appendix);

}

var s = "นี่คือสตริงที่ยาวและฉันอธิบายไม่ได้ทั้งหมด"; ทำให้สั้นลง (s, 10, '... ')

/* "นี่คือ .." */

นี่เป็นโค้ดอีกชิ้นที่ตัดทอนตามเครื่องหมายวรรคตอน (กำลังค้นหาสิ่งนี้และ Google พบคำถามนี้ที่นี่) ต้องคิดวิธีแก้ปัญหาด้วยตัวเองนี่คือสิ่งที่ฉันแฮ็คใน 15 นาที ค้นหาเหตุการณ์ทั้งหมดของ ! เหรอ? และตัดทอนที่ตำแหน่งใด ๆ ของสิ่งเหล่านี้ที่ <thanlen

function pos(str, char) {
    let pos = 0
    const ret = []
    while ( (pos = str.indexOf(char, pos + 1)) != -1) {
        ret.push(pos)
    }
    return ret
}

function truncate(str, len) {
    if (str.length < len)
        return str

    const allPos = [  ...pos(str, '!'), ...pos(str, '.'), ...pos(str, '?')].sort( (a,b) => a-b )
    if (allPos.length === 0) {
        return str.substr(0, len)
    }

    for(let i = 0; i < allPos.length; i++) {
        if (allPos[i] > len) {
            return str.substr(0, allPos[i-1] + 1)
        }
    }
}

module.exports = truncate

typescript และจุดไข่ปลา :)

export const sliceByWord = (phrase: string, length: number, skipEllipses?: boolean): string => {
  if (phrase.length < length) return phrase
  else {
    let trimmed = phrase.slice(0, length)
    trimmed = trimmed.slice(0, Math.min(trimmed.length, trimmed.lastIndexOf(' ')))
    return skipEllipses ? trimmed : trimmed + '…'
  }
}

'พาสต้ากับมะเขือเทศและผักโขม'

หากคุณไม่ต้องการตัดครึ่งคำ

การทำซ้ำครั้งแรก:

acc: 0 / acc + cur.length = 5 / newTitle = ['พาสต้า'];

การทำซ้ำครั้งที่สอง:

acc: 5 / acc + cur.length = 9 / newTitle = ['Pasta', 'with'];

การทำซ้ำครั้งที่สาม:

acc: 9 / acc + cur.length = 15 / newTitle = ['Pasta', 'with', 'tomato'];

การทำซ้ำครั้งที่สี่:

acc: 15 / acc + cur.length = 18 (จำกัด ขอบเขต) / newTitle = ['Pasta', 'with', 'tomato'];

const limitRecipeTitle = (title, limit=17)=>{
    const newTitle = [];
    if(title.length>limit){
        title.split(' ').reduce((acc, cur)=>{
            if(acc+cur.length <= limit){
                newTitle.push(cur);
            }
            return acc+cur.length;
        },0);
    }

    return `${newTitle.join(' ')} ...`
}

ผลผลิต: พาสต้ากับมะเขือเทศ ...

สำหรับสิ่งที่คุ้มค่าฉันเขียนสิ่งนี้เพื่อตัดทอนขอบเขตของคำโดยไม่เว้นวรรคตอนหรือช่องว่างไว้ท้ายสตริง:

function truncateStringToWord(str, length, addEllipsis)
{
    if(str.length <= length)
    {
        // provided string already short enough
        return(str);
    }

    // cut string down but keep 1 extra character so we can check if a non-word character exists beyond the boundary
    str = str.substr(0, length+1);

    // cut any non-whitespace characters off the end of the string
    if (/[^\s]+$/.test(str))
    {
        str = str.replace(/[^\s]+$/, "");
    }

    // cut any remaining non-word characters
    str = str.replace(/[^\w]+$/, "");

    var ellipsis = addEllipsis && str.length > 0 ? '&hellip;' : '';

    return(str + ellipsis);
}

var testString = "hi stack overflow, how are you? Spare";
var i = testString.length;

document.write('<strong>Without ellipsis:</strong><br>');

while(i > 0)
{
  document.write(i+': "'+ truncateStringToWord(testString, i) +'"<br>');
  i--;
}

document.write('<strong>With ellipsis:</strong><br>');

i = testString.length;
while(i > 0)
{
  document.write(i+': "'+ truncateStringToWord(testString, i, true) +'"<br>');
  i--;
}

ไม่พบวิธีแก้ปัญหาที่ได้รับการโหวตเป็นที่น่าพอใจ ดังนั้นฉันจึงเขียนบางอย่างที่เป็นแบบทั่วไปและใช้ได้ทั้งส่วนแรกและส่วนสุดท้ายของข้อความของคุณ (เช่นตัวย่อย แต่เป็นคำ) นอกจากนี้คุณสามารถตั้งค่าได้ว่าต้องการให้เว้นวรรคในการนับถ่านหรือไม่

    function chopTxtMinMax(txt, firstChar, lastChar=0){
        var wordsArr = txt.split(" ");
        var newWordsArr = [];

        var totalIteratedChars = 0;
        var inclSpacesCount = true;

        for(var wordIndx in wordsArr){
            totalIteratedChars += wordsArr[wordIndx].length + (inclSpacesCount ? 1 : 0);
            if(totalIteratedChars >= firstChar && (totalIteratedChars <= lastChar || lastChar==0)){
                newWordsArr.push(wordsArr[wordIndx]);
            }
        }

        txt = newWordsArr.join(" ");
        return txt;
    }

ฉันมาช้าสำหรับสิ่งนี้ แต่ฉันคิดว่าฟังก์ชั่นนี้ตอบสนองสิ่งที่ OP ร้องขอ คุณสามารถเปลี่ยน SENTENCE และค่า LIMIT สำหรับผลลัพธ์ที่แตกต่างกันได้อย่างง่ายดาย

function breakSentence(word, limit) {
  const queue = word.split(' ');
  const list = [];

  while (queue.length) {
    const word = queue.shift();

    if (word.length >= limit) {
      list.push(word)
    }
    else {
      let words = word;

      while (true) {
        if (!queue.length ||
            words.length > limit ||
            words.length + queue[0].length + 1 > limit) {
          break;
        }

        words += ' ' + queue.shift();
      }

      list.push(words);
    }
  }

  return list;
}

const SENTENCE = 'the quick brown fox jumped over the lazy dog';
const LIMIT = 11;

// get result
const words = breakSentence(SENTENCE, LIMIT);

// transform the string so the result is easier to understand
const wordsWithLengths = words.map((item) => {
  return `[${item}] has a length of - ${item.length}`;
});

console.log(wordsWithLengths);

ผลลัพธ์ของตัวอย่างข้อมูลนี้คือที่ LIMIT คือ 11 คือ:

[ '[the quick] has a length of - 9',
  '[brown fox] has a length of - 9',
  '[jumped over] has a length of - 11',
  '[the lazy] has a length of - 8',
  '[dog] has a length of - 3' ]

ด้วยเงื่อนไขขอบเขตเช่นประโยคว่างและคำแรกที่ยาวมาก นอกจากนี้ยังไม่ใช้สตริง API / ไลบรารีเฉพาะภาษา

function solution(message, k) {
    if(!message){
        return ""; //when message is empty
    }
    const messageWords = message.split(" ");
    let result = messageWords[0];
    if(result.length>k){
        return ""; //when length of first word itself is greater that k
    }
    for(let i = 1; i<messageWords.length; i++){
        let next = result + " " + messageWords[i];

        if(next.length<=k){
            result = next;
        }else{
            break;
        }
    }
    return result;
}

console.log(solution("this is a long string i cant display", 10));

เราสามารถทำได้ง่ายๆโดยใช้ฟังก์ชัน truncate ของ lodash

_.truncate('hi-diddly-ho there, neighborino');
// => 'hi-diddly-ho there, neighbo...'

_.truncate('hi-diddly-ho there, neighborino', {
  'length': 24,
  'separator': ' '
 });
// => 'hi-diddly-ho there,...'

ไปที่ Lodash Documentation เพื่อความชัดเจนยิ่งขึ้น

คุณสามารถตัดแต่งช่องว่างด้วยสิ่งนี้:

var trimmedString = flabbyString.replace(/^\s*(.*)\s*$/, '$1');

อัปเดตจาก @ NT3RP ฉันพบว่าหากสตริงเกิดการชนช่องว่างเป็นครั้งแรกรอบ ๆ มันจะจบลงด้วยการลบคำนั้นทำให้สตริงของคุณสั้นกว่าคำเดียว ดังนั้นฉันจึงโยนคำสั่ง if else เพื่อตรวจสอบว่า maxLength ไม่ตกบนช่องว่าง

codepen.io

var yourString = "The quick brown fox jumps over the lazy dog"; //replace with your string.
var maxLength = 15 // maximum number of characters to extract

if (yourString[maxLength] !== " ") {

//trim the string to the maximum length
var trimmedString = yourString.substr(0, maxLength);

alert(trimmedString)

//re-trim if we are in the middle of a word
trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")))
}

else {
  var trimmedString = yourString.substr(0, maxLength);
}

alert(trimmedString)