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

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

const LongstringHelper = str => {
  const sliceBoundary = str => str.substr(0, str.lastIndexOf(" "));
  const truncate = (n, useWordBoundary) => 
        str.length <= n ? str : `${ useWordBoundary 
          ? sliceBoundary(str.slice(0, n - 1))
          : str.substr(0, n - 1)}&hellip;`;
  return { full: str,  truncate };
}; 
const longStr = LongstringHelper(`Lorem ipsum dolor sit amet, consectetur 
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum`);

const plain = document.querySelector("#resultTruncatedPlain");
const lastWord = document.querySelector("#resultTruncatedBoundary");
plain.innerHTML = 
  longStr.truncate(+plain.dataset.truncateat, !!+plain.dataset.onword);
lastWord.innerHTML = 
  longStr.truncate(+lastWord.dataset.truncateat, !!+lastWord.dataset.onword);
document.querySelector("#resultFull").innerHTML = longStr.full;

body {
  font: normal 12px/15px verdana, arial;
}

p {
  width: 450px;
}

#resultTruncatedPlain:before {
  content: 'Truncated (plain) n='attr(data-truncateat)': ';
  color: green;
}

#resultTruncatedBoundary:before {
  content: 'Truncated (last whole word) n='attr(data-truncateat)': ';
  color: green;
}

#resultFull:before {
  content: 'Full: ';
  color: green;
}

<p id="resultTruncatedPlain" data-truncateat="120" data-onword="0"></p>
<p id="resultTruncatedBoundary" data-truncateat="120" data-onword="1"></p>
<p id="resultFull"></p>

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

body {
  font: normal 12px/15px verdana, arial;
  margin: 2rem;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 30vw;
}

.truncate:before{
  content: attr(data-longstring);
}

.truncate:hover::before {
  content: attr(data-longstring);
  width: auto;
  height: auto;
  overflow: initial;
  text-overflow: initial;
  white-space: initial;
  background-color: white;
  display: inline-block;
}

<div class="truncate" data-longstring="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></div>

이것은 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…");

또는

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"

모든 최신 브라우저는 이제 텍스트 줄이 사용 가능한 너비를 초과하면 줄임표를 자동으로 추가하기위한 간단한 CSS 솔루션을 지원합니다.

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

(효과를 주려면 요소의 너비를 어떤 식 으로든 제한해야합니다.)

https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/를 기반으로 합니다.

이 방법은 문자 수에 따라 제한 되지 않습니다 . 여러 줄의 텍스트를 허용해야하는 경우 에도 작동하지 않습니다 .

대부분의 현대 자바 스크립트 프레임 워크 ( JQuery와 , 프로토 타입 , 등 ...) 그 핸들이 String에 식은 유틸리티 기능을 가지고있다.

다음은 프로토 타입의 예입니다.

'Some random text'.truncate(10);
// -> 'Some ra...'

이것은 다른 사람이 다루거나 유지하기를 원하는 기능 중 하나처럼 보입니다. 더 많은 코드를 작성하는 대신 프레임 워크가 처리하도록하겠습니다.

아마도 누군가가 null을 처리하는 위치의 예를 놓쳤을 수도 있지만 null이있을 때 3 개의 TOP 답변이 효과가 없었습니다 (오류 처리가 있고 백만 가지가 질문에 대답하는 사람의 책임이 아님을 알고 있지만 나는 기존 함수를 다른 사람들에게 제공 할 것이라고 생각한 훌륭한 잘림 줄임표 답변 중 하나와 함께 사용했습니다.

예 :

자바 스크립트 :

news.comments

절단 기능 사용

news.comments.trunc(20, true);

그러나 news.comments가 null 인 경우 "단절"

결정적인

checkNull(news.comments).trunc(20, true) 

KooiInc의 trunc 기능 제공

String.prototype.trunc =
 function (n, useWordBoundary) {
     console.log(this);
     var isTooLong = this.length > n,
         s_ = isTooLong ? this.substr(0, n - 1) : this;
     s_ = (useWordBoundary && isTooLong) ? s_.substr(0, s_.lastIndexOf(' ')) : s_;
     return isTooLong ? s_ + '…' : s_;
 };

내 간단한 null 검사기 (리터럴 "null"항목도 검사합니다 (정의되지 않은 "", null, "null"등을 잡습니다.)

  function checkNull(val) {
      if (val) {
          if (val === "null") {
              return "";
          } else {
              return val;
          }
      } else {
          return "";
      }
  }

때로는 파일 이름이 번호가 매겨져 색인이 시작 또는 끝에있을 수 있습니다. 그래서 줄의 중심에서 짧게하고 싶었습니다.

function stringTruncateFromCenter(str, maxLength) {
    const midChar = "…";      // character to insert into the center of the result
    var left, right;

    if (str.length <= maxLength) return str;

    // length of beginning part      
    left = Math.ceil(maxLength / 2);

    // start index of ending part   
    right = str.length - Math.floor(maxLength / 2) + 1;   

    return str.substr(0, left) + midChar + str.substring(right);
}

UTF-8에서 1 바이트 이상으로 채우기 문자를 사용했습니다.

Ext.js 를 사용하는 경우 Ext.util.Format.ellipsis 함수를 사용할 수 있습니다.

나는 Kooilnc의 솔루션을 찬성했습니다. 정말 멋진 컴팩트 솔루션. 내가 다루고 싶은 작은 경우가 하나 있습니다. 어떤 이유로 든 누군가가 긴 문자 시퀀스를 입력하면 잘리지 않습니다.

function truncate(str, n, useWordBoundary) {
    var singular, tooLong = str.length > n;
    useWordBoundary = useWordBoundary || true;

    // Edge case where someone enters a ridiculously long string.
    str = tooLong ? str.substr(0, n-1) : str;

    singular = (str.search(/\s/) === -1) ? true : false;
    if(!singular) {
      str = useWordBoundary && tooLong ? str.substr(0, str.lastIndexOf(' ')) : str;
    }

    return  tooLong ? str + '…' : str;
}

빠른 인터넷 검색으로 이것을 발견 했습니다 ... 효과가 있습니까?

/**
 * Truncate a string to the given length, breaking at word boundaries and adding an elipsis
 * @param string str String to be truncated
 * @param integer limit Max length of the string
 * @return string
 */
var truncate = function (str, limit) {
    var bits, i;
    if (STR !== typeof str) {
        return '';
    }
    bits = str.split('');
    if (bits.length > limit) {
        for (i = bits.length - 1; i > -1; --i) {
            if (i > limit) {
                bits.length = i;
            }
            else if (' ' === bits[i]) {
                bits.length = i;
                break;
            }
        }
        bits.push('...');
    }
    return bits.join('');
};
// END: truncate

텍스트 오버플로 : 줄임표는 필요한 속성입니다. 이것과 오버플로 : 특정 너비로 ​​숨겨지면 끝에 세 가지 기간 효과를 가져올 수있는 모든 것 ... 공백을 추가하는 것을 잊지 마십시오 : 줄 바꿈 또는 텍스트가 여러 줄로 표시됩니다.

.wrap{
  text-overflow: ellipsis
  white-space: nowrap;
  overflow: hidden;
  width:"your desired width";
}
<p class="wrap">The string to be cut</p>

c_harm의 대답은 제 생각에 가장 좋습니다. 사용하고 싶은 경우는 양해 바랍니다

"My string".truncate(n)

리터럴 대신 regexp 객체 생성자를 사용해야합니다. 또한 \S변환 할 때 탈출해야 합니다.

String.prototype.truncate =
    function(n){
        var p  = new RegExp("^.{0," + n + "}[\\S]*", 'g');
        var re = this.match(p);
        var l  = re[0].length;
        var re = re[0].replace(/\s$/,'');

        if (l < this.length) return re + '&hellip;';
    };

다음 코드 사용

 function trancateTitle (title) {
    var length = 10;
    if (title.length > length) {
       title = title.substring(0, length)+'...';
    }
    return title;
}

Kooilnc의 솔루션 수정 :

String.prototype.trunc = String.prototype.trunc ||
  function(n){
      return this.length>n ? this.substr(0,n-1)+'…' : this.toString();
  };

잘릴 필요가없는 경우 String 객체 대신 문자열 값을 반환합니다.

나는 최근에 이것을해야했고 결국

/**
 * Truncate a string over a given length and add ellipsis if necessary
 * @param {string} str - string to be truncated
 * @param {integer} limit - max length of the string before truncating
 * @return {string} truncated string
 */
function truncate(str, limit) {
    return (str.length < limit) ? str : str.substring(0, limit).replace(/\w{3}$/gi, '...');
}

기분이 좋고 깨끗합니다. :)

.slice ()를 사용하는 것이 좋습니다. 첫 번째 인수는 시작 색인이고 두 번째 인수는 종료 색인입니다. 그 사이의 모든 것은 당신이 돌아 오는 것입니다.

var long = "hello there! Good day to ya."
// hello there! Good day to ya.

var short  = long.slice(0, 5)
// hello

어딘가 스마트 : D

//My Huge Huge String
    let tooHugeToHandle = `It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).`
    
//Trim Max Length
 const maxValue = 50
// The barber.
 const TrimMyString = (string, maxLength, start = 0) => {
//Note - `start` is if I want to start after some point of the string
    	if (string.length > maxLength) {
    	let trimmedString = string.substr(start, maxLength)
    	 return (
    	   trimmedString.substr(
    	   start,
    	   Math.min(trimmedString.length,   trimmedString.lastIndexOf(' '))
           ) + ' ...'
         )
       }
    return string
}

console.log(TrimMyString(tooHugeToHandle, maxValue))

이 기능은 공간과 단어 부분을 자릅니다. (예 : 어머니가 나방으로 ...)

String.prototype.truc= function (length) {
        return this.length>length ? this.substring(0, length) + '…' : this;
};

용법:

"this is long length text".trunc(10);
"1234567890".trunc(5);

산출:

이건 ...

12345 ...