Schneiden Sie eine Zeichenfolge gerade JavaScript

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

Folgendes habe ich bekommen:

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

Verwenden Sie die Teilzeichenfolgenmethode :

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

ja, Teilzeichenfolge. Sie müssen keine Math.min ausführen. Teilzeichenfolge mit einem längeren Index als die Länge der Zeichenfolge endet mit 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 ein Apostroph hätte? Oder verschiedene andere Zeichen, die in HTML eine besondere Bedeutung haben. Im schlimmsten Fall kann der Angreifer-Code im Referrer JavaScript in Ihre Seite einfügen, was eine XSS-Sicherheitslücke darstellt.

Es ist zwar möglich, den Zeichen im Pfadnamen manuell zu entkommen, um dies zu verhindern, aber es ist ein bisschen schmerzhaft. Sie sind besser dran, DOM-Methoden zu verwenden, als mit innerHTML-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);
}

Ich dachte, ich würde Sugar.js erwähnen. Es hat eine abgeschnittene Methode, die ziemlich klug ist.

Aus der Dokumentation :

Schneidet eine Zeichenfolge ab. Wenn die Aufteilung nicht wahr ist, werden beim Abschneiden keine Wörter aufgeteilt, sondern das Wort verworfen, bei dem die Kürzung aufgetreten ist.

Beispiel:

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

Ausgabe:

just sitting on...

Der folgende Code schneidet eine Zeichenfolge ab und teilt keine Wörter auf. Verwerfen Sie stattdessen das Wort, bei dem die Kürzung aufgetreten ist. Völlig basierend auf der Quelle von Sugar.j.

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

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

function truncateString(str, num) {


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

Aktualisierte ES6-Version

const truncateString = (string, maxLength = 50) => {
  if (!string) return null;
  if (string.length <= maxLength) return string;
  return `${string.substring(0, maxLength)}...`;
};

truncateString('what up', 4); // returns 'what...'

Ja, substringfunktioniert 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;
};

für den Fall, dass Sie nach Wort abschneiden möchten.

function limit(str, limit, end) {

      limit = (limit)? limit : 100;
      end = (end)? end : '...';
      str = str.split(' ');
      
      if (str.length > limit) {
        var cutTolimit = str.slice(0, limit);
        return cutTolimit.join(' ') + ' ' + end;
      }

      return str.join(' ');
    }

    var limit = limit('ILorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus metus magna, maximus a dictum et, hendrerit ac ligula. Vestibulum massa sapien, venenatis et massa vel, commodo elementum turpis. Nullam cursus, enim in semper luctus, odio turpis dictum lectus', 20);

    console.log(limit);