[javascript] 긴 문자열을 자르는 현명한 방법

Program / 글쓴이

누구나 JavaScript를 사용하여 문자열을 자르고 끝 부분을 줄임표보다 더 정교한 솔루션 / 라이브러리가 있습니까?

if (string.length > 25) {
  string = string.substring(0, 24) + "...";
}

답변

기본적으로 주어진 문자열의 길이를 확인합니다. 주어진 길이보다 길면 n길이 n( substr또는 slice)로 …자르고 html 엔티티 (…)를 잘린 문자열에 추가하십시오.

이러한 방법은 다음과 같습니다

function truncate(str, n){
  return (str.length > n) ? str.substr(0, n-1) + '…' : str;
};

‘더 정교’하여 문자열의 마지막 단어 경계에서 잘림을 의미하는 경우 추가 검사가 필요합니다. 먼저 문자열을 원하는 길이로 자르고 그 결과를 마지막 단어 경계로 자릅니다.

function truncate( str, n, useWordBoundary ){
  if (str.length <= n) { return str; }
  const subString = str.substr(0, n-1); // the original check
  return (useWordBoundary 
    ? subString.substr(0, subString.lastIndexOf(" ")) 
    : subString) + "&hellip;";
};

String함수를 사용하여 기본 프로토 타입을 확장 할 수 있습니다 . 이 경우 str매개 변수를 제거하고 str함수 내에서 다음으로 대체해야합니다 this.

String.prototype.truncate = String.prototype.truncate || 
function ( n, useWordBoundary ){
  if (this.length <= n) { return this; }
  const subString = this.substr(0, n-1); // the original check
  return (useWordBoundary 
    ? subString.substr(0, subString.lastIndexOf(" ")) 
    : subString) + "&hellip;";
};

더 독단적 인 개발자들은 당신을 강력하게 사로 잡을 수도 있습니다 ( ” 당신이 소유하지 않은 객체를 수정하지 마십시오 .”)

String프로토 타입 을 확장하지 않는 방법 은 사용자가 제공 한 (긴) 문자열과 잘라 내기위한 앞서 언급 한 방법을 포함하는 자신 만의 헬퍼 객체를 만드는 것입니다. 이것이 아래 스 니펫의 기능입니다.

코드 스 니펫 표시

마지막으로 CSS를 사용하여 HTML 노드에서 긴 문자열을자를 수 있습니다. 통제력은 떨어지지 만 실용적 솔루션 일 수 있습니다.

코드 스 니펫 표시

답변

이것은 Firefox에서만 수행해야합니다.

다른 모든 브라우저는 CSS 솔루션을 지원합니다 ( 지원 테이블 참조 ).

p {
    white-space: nowrap;
    width: 100%;                   /* IE6 needs any width */
    overflow: hidden;              /* "overflow" value must be different from  visible"*/ 
    -o-text-overflow: ellipsis;    /* Opera < 11*/
    text-overflow:    ellipsis;    /* IE, Safari (WebKit), Opera >= 11, FF > 6 */
}

아이러니 한 사실은 Mozilla MDC에서 해당 코드 스 니펫을 얻은 것입니다.

답변

사람들이 CSS 대신 JavaScript로 이것을하기를 원하는 정당한 이유가 있습니다.

JavaScript에서 8 자 (줄임표 포함)로 자르려면

short = long.replace(/(.{7})..+/, "$1&hellip;");

또는

short = long.replace(/(.{7})..+/, "$1…");

답변

lodash의 잘림을 사용하십시오. 

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

또는 underscore.string의 truncate .

_('Hello world').truncate(5); => 'Hello...'

답변

('long text to be truncated').replace(/(.{250})..+/, "$1…");

어떻게 든 vuejs 앱에서 붙여 넣기 또는 작성된 텍스트의 종류에 대해 위의 코드가 작동하지 않았습니다. 그래서 lodash truncate를 사용 했으며 이제는 잘 작동합니다.

_.truncate('long text to be truncated', { 'length': 250, 'separator': ' '});

답변

다음은 다른 제안보다 개선 된 솔루션입니다.

String.prototype.truncate = function(){
    var re = this.match(/^.{0,25}[\S]*/);
    var l = re[0].length;
    var re = re[0].replace(/\s$/,'');
    if(l < this.length)
        re = re + "&hellip;";
    return re;
}

// "This is a short string".truncate();
"This is a short string"

// "Thisstringismuchlongerthan25characters".truncate();
"Thisstringismuchlongerthan25characters"

// "This string is much longer than 25 characters and has spaces".truncate();
"This string is much longer&hellip;"

그것:

  • 25 자 뒤 첫 공백에서 자릅니다.
  • JavaScript String 객체를 확장하여 모든 문자열에서 사용할 수 있습니다.
  • 잘림으로 인해 후행 공백이 생기면 문자열이 잘립니다.
  • 잘린 문자열이 25자를 초과하면 유니 코드 헬리콥터 엔티티 (타원체)를 추가합니다.

답변

내가 찾은 최고의 기능. 텍스트 줄임표에 대한 크레딧 .

function textEllipsis(str, maxLength, { side = "end", ellipsis = "..." } = {}) {
  if (str.length > maxLength) {
    switch (side) {
      case "start":
        return ellipsis + str.slice(-(maxLength - ellipsis.length));
      case "end":
      default:
        return str.slice(0, maxLength - ellipsis.length) + ellipsis;
    }
  }
  return str;
}

예 :

var short = textEllipsis('a very long text', 10);
console.log(short);
// "a very ..."

var short = textEllipsis('a very long text', 10, { side: 'start' });
console.log(short);
// "...ng text"

var short = textEllipsis('a very long text', 10, { textEllipsis: ' END' });
console.log(short);
// "a very END"