Uzun telleri kısaltmanın akıllı yolu

JavaScript ile dizeleri kırpmak ve sonuna bir üç nokta koymak için daha sofistike bir çözüm / kütüphane var mı:

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

Esas olarak, verilen dizenin uzunluğunu kontrol edersiniz. Belirli bir uzunluktan daha uzunsa n, uzunluğa n( substrveya slice) …kırpın ve kırpılan dizeye html varlığı (…) ekleyin .

Böyle bir yöntem benziyor

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

Eğer 'daha sofistike' ile bir dizgenin son kelime sınırında kısalmak istiyorsan ekstra bir kontrol gerekir. Önce dizeyi istediğiniz uzunluğa, ardından sonucunu son sözcük sınırına kırpırsınız

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;";
};

Yerel Stringprototipi işlevinizle genişletebilirsiniz . Bu durumda strparametre kaldırılmalı ve strişlev içinde aşağıdakilerle değiştirilmelidir 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;";
};

Daha dogmatik geliştiriciler sizi bu konuda güçlü bir şekilde teslim edebilir ("Sahip olmadığınız nesneleri değiştirmeyin ".

StringPrototipi genişletmeden bir yaklaşım , sağladığınız (uzun) dizeyi ve onu kısaltmak için yukarıda belirtilen yöntemi içeren kendi yardımcı nesnenizi oluşturmaktır. Aşağıdaki pasaj bunu yapar.

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>

Son olarak, css komutunu yalnızca HTML düğümlerindeki uzun dizeleri kısaltmak için kullanabilirsiniz. Size daha az kontrol sağlar, ancak uygulanabilir bir çözüm olabilir.

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>

Bunun yalnızca Firefox için yapılması gerektiğini unutmayın.

Diğer tüm tarayıcılar bir CSS çözümünü destekler ( destek tablosuna bakın ):

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 */
}

İronik olan, bu kod snippet'ini Mozilla MDC'den aldım.

Kullanıcıların bunu JavaScript'te CSS yerine yapmak isteyebileceklerinin geçerli nedenleri vardır.

JavaScript'te 8 karaktere (üç nokta dahil) kısaltmak için:

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

veya

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

Her iki lodash'ın kesimini kullan

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

veya alt çizgi . dizenin kesmesi .

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

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

Her nasılsa yukarıdaki kod vuejs app yapıştırılan veya yazılı metin bir tür için çalışma değildi. Bu yüzden kesik kesik kullandım ve şimdi iyi çalışıyor.

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

İşte diğer öneriler üzerinde birkaç iyileştirme olan benim çözüm:

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

O:

• 25 karakterden sonra ilk boşlukta kısalır
• JavaScript String nesnesini genişletir, böylece herhangi bir dizede kullanılabilir (ve bu dizine zincirlenebilir).
• Kesme, sondaki boşlukla sonuçlanırsa dizeyi keser;
• Kesilen dize 25 karakterden uzunsa unicode hellip varlığını (üç nokta) ekler

Bulduğum en iyi fonksiyon. Metin üç noktaya kredi .

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

Örnekler :

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"

Tüm modern tarayıcılar artık bir metin satırı mevcut genişliği aşarsa otomatik olarak üç nokta eklemek için basit bir CSS çözümünü desteklemektedir:

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

(Bunun, herhangi bir etkisi olması için öğenin genişliğinin bir şekilde sınırlandırılmasını gerektirdiğini unutmayın.)

Göre https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ .

Yaklaşımın olmadığını belirtmek gerekir değil karakterlerin sayısına bağlı sınırlar. Ayrıca gelmez değil metnin birden fazla satır izin vermek gerekirse çalışır.

Çoğu modern Javascript çerçevesi ( JQuery , Prototype , vb .) Bunu işleyen String'e yapıştırılmış bir yardımcı program fonksiyonuna sahiptir.

Prototipte bir örnek:

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

Bu, başka birinin başa çıkmasını / bakımını yapmasını istediğiniz işlevlerden biri gibi görünüyor. Daha fazla kod yazmak yerine, çerçevenin üstesinden gelmesine izin verirdim.

Belki birisinin null'ları ele aldığı bir örneği kaçırdım, ancak null'larım olduğunda 3 TOP yanıtı benim için işe yaramadı (Elbette hata işlemenin olduğunu ve milyon başka şeyin soruyu cevaplayan kişinin sorumluluğu DEĞİL olduğunu anlıyorum, ancak Başkaları için sağlayacağımı düşündüğüm mükemmel kesilme üç nokta cevaplarından biri ile birlikte mevcut bir işlevi kullanmıştım.

Örneğin

javascript:

news.comments

kesme fonksiyonunu kullanma

news.comments.trunc(20, true);

Ancak, news.comments boş olması bu "kırmak" olacaktır

final

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

trunk işlevi KooiInc'in izniyle

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_;
 };

Benim basit null denetleyicisi (gerçek "null" şey de denetler (bu tanımsız, "", null, "null", vb yakalar)

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

Bazen dosya adları numaralandırılır; burada dizin başında veya sonunda olabilir. Bu yüzden ipin merkezinden kısaltmak istedim:

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'de 1 bayttan fazla dolgu karakteri kullandığımı unutmayın.

Ext.js kullanıyorsanız Ext.util.Format.ellipsis işlevini kullanabilirsiniz.

Kooilnc'nin çözümünü iptal ettim. Gerçekten güzel kompakt çözüm. Ele almak istediğim küçük bir kenarlık var. Birisi herhangi bir nedenle gerçekten uzun bir karakter dizisine girerse, kesilmez:

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

Hızlı bir Google ile bunu buldum ... Bu sizin için uygun mu?

/**
 * 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

Metin taşması: üç nokta, ihtiyacınız olan özelliktir. Bu ve bir taşma ile: belirli bir genişlikle gizlenmiş, sonunda üç periyot etkisini alacak olan her şey ... Boşluk eklemeyi unutmayın: nowrap veya metin birden çok satıra konur.

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

c_harm'ın cevabı bence en iyisidir. Kullanmak istiyorsanız lütfen unutmayın

"My string".truncate(n)

değişmez değer yerine regexp nesne yapıcısı kullanmanız gerekir. Ayrıca \Sdönüştürürken kaçmak zorunda kalacaksınız .

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;';
    };

Aşağıdaki kodu kullanın

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

Kooilnc'nin çözümünü düzeltme:

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

Bu, kesilmesi gerekmiyorsa String nesnesi yerine dize değerini döndürür.

Son zamanlarda bunu yapmak zorunda kaldı ve ile sona erdi:

/**
 * 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, '...');
}

Bana güzel ve temiz geliyor :)

Ben .slice () kullanmayı seviyorum İlk argüman başlangıç ​​dizin ve ikincisi bitiş endeksidir. Aradaki her şey geri döndüğünüz şey.

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

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

Akıllı Bir Yerde: 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))

Bu işlev, kesme alanını ve sözcük parçalarını da yapar. (Örn: Anneye Güve ...)

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

kullanımı:

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

çıktı:

bu lo ...

12345 ...