Kürzen Sie eine Zeichenfolge direkt in JavaScript

Ich möchte eine dynamisch geladene Zeichenfolge mit direktem JavaScript abschneiden. Es ist eine URL, also gibt es keine Leerzeichen, und Wortgrenzen sind mir offensichtlich egal, nur Zeichen.

Hier ist, was ich habe:

var pathname = document.referrer; //wont work if accessing file:// paths
document.getElementById("foo").innerHTML = "<a href="" + pathname +"">" + pathname +"</a>"

Verwenden Sie die Teilzeichenfolge Methode:

var length = 3;
var myString = "ABCDEFG";
var myTruncatedString = myString.substring(0,length);
// The value of myTruncatedString is "ABC"

Also in deinem Fall:

var length = 3;  // set to the number of characters you want to keep
var pathname = document.referrer;
var trimmedPathname = pathname.substring(0, Math.min(length,pathname.length));

document.getElementById("foo").innerHTML =
     "<a href="" + pathname +"">" + trimmedPathname + "</a>"

Hier ist eine Methode, die Sie verwenden können. Dies ist die Antwort für eine der FreeCodeCamp-Herausforderungen:

function truncateString(str, num) {
  if (str.length > num) {
    return str.slice(0, num) + "...";
  } else {
    return str;
  }
}

ja, Teilstring. Sie müssen kein Math.min machen; Teilstring mit einem längeren Index als die Länge des Strings endet bei der ursprünglichen Länge.

Aber!

document.getElementById("foo").innerHTML = "<a href="" + pathname +"">" + pathname +"</a>"

Das ist ein Fehler. Was wäre, wenn document.referrer einen Apostroph hätte? Oder verschiedene andere Zeichen, die in HTML eine besondere Bedeutung haben. Im schlimmsten Fall könnte Angreifercode im Referrer JavaScript in Ihre Seite einschleusen, was eine XSS-Sicherheitslücke darstellt.

Es ist zwar möglich, die Zeichen im Pfadnamen manuell zu maskieren, um dies zu verhindern, aber es ist ein bisschen mühsam. Sie sind besser dran, DOM-Methoden zu verwenden, als mit inneren HTML-Strings herumzuspielen.

if (document.referrer) {
    var trimmed= document.referrer.substring(0, 64);
    var link= document.createElement('a');
    link.href= document.referrer;
    link.appendChild(document.createTextNode(trimmed));
    document.getElementById('foo').appendChild(link);
}

Aktualisierte ES6-Version

const truncateString = (string = '', maxLength = 50) => 
  string.length > maxLength 
    ? `${string.substring(0, maxLength)}…`
    : string

// demo the above function
alert(truncateString('Hello World', 4));

Der folgende Code schneidet eine Zeichenfolge ab und teilt Wörter nicht auf, sondern verwirft stattdessen das Wort, an dem die Kürzung aufgetreten ist. Vollständig basierend auf der Sugar.js-Quelle.

function truncateOnWord(str, limit) {
        var trimmable="\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u180E\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u2028\u2029\u3000\uFEFF";
        var reg = new RegExp('(?=[' + trimmable + '])');
        var words = str.split(reg);
        var count = 0;
        return words.filter(function(word) {
            count += word.length;
            return count <= limit;
        }).join('');
    }

Dachte, ich würde geben Zucker.js eine Erwähnung. Es hat eine ziemlich schlaue Methode zum Abschneiden.

Von dem Dokumentation:

Kürzt eine Zeichenfolge. Wenn split nicht wahr ist, wird truncate die Wörter nicht teilen und stattdessen das Wort verwerfen, an dem die Kürzung aufgetreten ist.

Beispiel:

'just sittin on the dock of the bay'.truncate(20)

Ausgabe:

just sitting on...

Ja, substring funktioniert super:

stringTruncate('Hello world', 5); //output "Hello..."
stringTruncate('Hello world', 20);//output "Hello world"

var stringTruncate = function(str, length){
  var dots = str.length > length ? '...' : '';
  return str.substring(0, length)+dots;
};