[javascript] 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));

스 니펫 확장