Intelligente Methode zum Abschneiden langer Zeichenfolgen

Hat jemand eine ausgefeiltere Lösung / Bibliothek zum Abschneiden von Zeichenfolgen mit JavaScript und zum Setzen einer Ellipse am Ende als die offensichtliche:

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

Im Wesentlichen überprüfen Sie die Länge der angegebenen Zeichenfolge. Wenn es länger als eine bestimmte Länge ist n, schneiden Sie es auf Länge n( substroder slice) und fügen Sie eine HTML-Entität hinzu… der abgeschnittenen Zeichenfolge (…) hinzu.

Eine solche Methode sieht aus

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

Wenn Sie mit "anspruchsvoller" das Abschneiden an der letzten Wortgrenze einer Zeichenfolge meinen, benötigen Sie eine zusätzliche Prüfung. Zuerst schneiden Sie die Zeichenfolge auf die gewünschte Länge, dann schneiden Sie das Ergebnis bis zur letzten Wortgrenze

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

Sie können den nativen StringPrototyp mit Ihrer Funktion erweitern. In diesem Fall sollte der strParameter entfernt und strinnerhalb der Funktion ersetzt werden durch 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;";
};

Dogmatischere Entwickler können Sie stark darüber kapitulieren (" Ändern Sie keine Objekte, die Sie nicht besitzen ". Es würde mir jedoch nichts ausmachen).

Ein Ansatz ohne Erweiterung des StringPrototyps besteht darin, ein eigenes Hilfsobjekt zu erstellen, das die von Ihnen angegebene (lange) Zeichenfolge und die zuvor erwähnte Methode zum Abschneiden enthält. Das macht der folgende Ausschnitt.

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>

Schließlich können Sie CSS nur verwenden, um lange Zeichenfolgen in HTML-Knoten abzuschneiden. Es gibt Ihnen weniger Kontrolle, kann aber durchaus eine praktikable Lösung sein.

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>

Beachten Sie, dass dies nur für Firefox durchgeführt werden muss.

Alle anderen Browser unterstützen eine CSS-Lösung (siehe Support-Tabelle ):

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

Die Ironie ist, dass ich diesen Code-Ausschnitt von Mozilla MDC bekommen habe.

Es gibt triftige Gründe, warum Benutzer dies in JavaScript anstelle von CSS tun möchten.

So schneiden Sie in JavaScript 8 Zeichen (einschließlich Auslassungspunkte) ab:

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

oder

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

Verwenden Sie entweder Lodashs abgeschnitten

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

oder unterstreichen.strings abgeschnitten .

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

Hier ist meine Lösung, die einige Verbesserungen gegenüber anderen Vorschlägen aufweist:

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

Es:

• Wird nach 25 Zeichen im ersten Leerzeichen abgeschnitten
• Erweitert das JavaScript-Zeichenfolgenobjekt, sodass es für jede Zeichenfolge verwendet (und mit dieser verkettet) werden kann.
• Trimmt die Zeichenfolge, wenn das Abschneiden zu einem nachgestellten Leerzeichen führt.
• Fügt die Unicode-Hellip-Entität (Auslassungspunkte) hinzu, wenn die abgeschnittene Zeichenfolge länger als 25 Zeichen ist

Beste Funktion, die ich gefunden habe. Gutschrift auf Text-Auslassungspunkten .

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

Beispiele :

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"

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

Irgendwie funktionierte der obige Code nicht für eine Art kopierten oder geschriebenen Text in der vuejs App. Also habe ich lodash truncate verwendet und es funktioniert jetzt gut.

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

Alle modernen Browser unterstützen jetzt eine einfache CSS-Lösung zum automatischen Hinzufügen von Auslassungspunkten, wenn eine Textzeile die verfügbare Breite überschreitet:

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

(Beachten Sie, dass hierfür die Breite des Elements in irgendeiner Weise begrenzt werden muss, um einen Effekt zu erzielen.)

Basierend auf https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ .

Es ist zu beachten, dass dieser Ansatz nicht auf der Anzahl der Zeichen basiert. Es funktioniert auch nicht , wenn Sie mehrere Textzeilen zulassen müssen.

Die meisten modernen Javascript - Frameworks ( JQuery , Prototype , etc. ...) haben eine Nutzenfunktion String gehefteten auf die Griffe dieser.

Hier ist ein Beispiel in Prototype:

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

Dies scheint eine der Funktionen zu sein, mit denen sich jemand anderes befassen / die Sie warten sollen. Ich würde das Framework damit umgehen lassen, anstatt mehr Code zu schreiben.

Vielleicht habe ich ein Beispiel verpasst, in dem jemand mit Nullen umgeht, aber 3 TOP-Antworten haben bei mir nicht funktioniert, als ich Nullen hatte (Sicher ist mir klar, dass die Fehlerbehandlung und Millionen anderer Dinge NICHT in der Verantwortung der Person liegen, die die Frage beantwortet, sondern seitdem Ich hatte eine vorhandene Funktion zusammen mit einer der hervorragenden Antworten auf Kürzungsellipsen verwendet, von denen ich dachte, ich würde sie für andere bereitstellen.

z.B

Javascript:

news.comments

mit Kürzungsfunktion

news.comments.trunc(20, true);

Wenn news.comments jedoch null ist, würde dies "brechen".

Finale

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

Trunc-Funktion mit freundlicher Genehmigung von KooiInc

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

Mein einfacher Null-Checker (sucht auch nach dem wörtlichen "Null" -Ding (dies fängt undefinierte, "", null, "null" usw. ab).

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

Manchmal sind Dateinamen nummeriert, wobei der Index am Anfang oder am Ende stehen kann. Also wollte ich von der Mitte der Saite aus kürzen:

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

Beachten Sie, dass ich hier in UTF-8 ein Füllzeichen mit mehr als 1 Byte verwendet habe.

Sie können die Funktion Ext.util.Format.ellipsis verwenden, wenn Sie Ext.js verwenden.

Ich habe die Lösung von Kooilnc positiv bewertet. Wirklich schöne kompakte Lösung. Es gibt einen kleinen Randfall, den ich ansprechen möchte. Wenn jemand aus irgendeinem Grund eine wirklich lange Zeichenfolge eingibt, wird diese nicht abgeschnitten:

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

Mit einem schnell gefunden googeln ich dieses ... für Sie tut das?

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

Textüberlauf: Auslassungspunkte sind die Eigenschaft, die Sie benötigen. Mit diesem und einem Überlauf: versteckt mit einer bestimmten Breite, alles, was den Drei-Perioden-Effekt am Ende übertrifft ... Vergessen Sie nicht, Leerzeichen hinzuzufügen: nowrap oder der Text wird in mehrere Zeilen eingefügt.

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

Die Antwort von c_harm ist meiner Meinung nach die beste. Bitte beachten Sie, dass, wenn Sie verwenden möchten

"My string".truncate(n)

Sie müssen einen Regexp-Objektkonstruktor anstelle eines Literal verwenden. Außerdem müssen Sie \Sbeim Konvertieren dem entkommen .

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

Verwenden Sie den folgenden Code

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

Korrektur der Kooilnc-Lösung:

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

Dies gibt den Zeichenfolgenwert anstelle des Zeichenfolgenobjekts zurück, wenn es nicht abgeschnitten werden muss.

Ich musste dies kürzlich tun und endete mit:

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

Fühlt sich gut und sauber für mich an :)

Ich benutze gerne .slice () Das erste Argument ist der Startindex und das zweite ist der Endindex. Alles dazwischen bekommen Sie zurück.

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

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

Irgendwo klug: 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))

Diese Funktion übernimmt auch das Abschneiden von Leerzeichen und Wörtern (z. B. Mutter in Motte ...)

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

Verwendung:

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

Ausgabe:

das ist lo ...

12345 ...