Een string straight JavaScript afkappen

Ik wil een dynamisch geladen tekenreeks afkappen met gewoon JavaScript. Het is een url, dus er zijn geen spaties, en ik geef natuurlijk niet om woordgrenzen, alleen om karakters.

Dit is wat ik heb:

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

Antwoord 1, autoriteit 100%

Gebruik de substring-methode:

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

Dus in jouw geval:

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

Antwoord 2, autoriteit 5%

ja, subtekenreeks. U hoeft geen Math.min te doen; substring met een langere index dan de lengte van de string eindigt op de originele lengte.

Maar!

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

Dit is een vergissing. Wat als document.referrer een apostrof had? Of verschillende andere tekens die een speciale betekenis hebben in HTML. In het ergste geval kan de aanvallercode in de referrer JavaScript in uw pagina injecteren, wat een XSS-beveiligingslek is.

Hoewel het mogelijk is om handmatig te ontsnappen aan de tekens in padnaam om dit te voorkomen, is het een beetje lastig. Je kunt beter DOM-methoden gebruiken dan te rommelen met innerHTML-strings.

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

Antwoord 3, autoriteit 4%

Hier is een methode die u kunt gebruiken. Dit is het antwoord voor een van de FreeCodeCamp-uitdagingen:

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

Antwoord 4, autoriteit 3%

De volgende code kapt een tekenreeks af en splitst geen woorden op, maar verwijdert in plaats daarvan het woord waar de afknotting plaatsvond. Volledig gebaseerd op Sugar.js-bron.

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

Antwoord 5, autoriteit 3%

Ik dacht dat ik Sugar.jseen vermelding zou geven. Het heeft een truncate-methode die behoorlijk slim is.

Van de documentatie:

Knipt een string af. Tenzij splitsen waar is, zal truncate woorden niet splitsen, en in plaats daarvan
gooi het woord weg waar de truncatie plaatsvond.

Voorbeeld:

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

Uitvoer:

just sitting on...

Antwoord 6, autoriteit 2%

Bijgewerkte ES6-versie

const truncateString = (string = '', maxLength = 50) => 
  string.length > maxLength 
    ? `${string.substring(0, maxLength)}…`
    : string
// demo the above function
console.log(
  truncateString(prompt("", "This is a test"), 4)
)

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

var str = "Anything you type in.";
str.substring(0, 5) + "..." //you can type any amount of length you want

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

var pa = document.getElementsByTagName('p')[0].innerHTML;
var rpa = document.getElementsByTagName('p')[0];
// console.log(pa.slice(0, 30));
var newPa = pa.slice(0, 29).concat('...');
rpa.textContent = newPa;
console.log(newPa)

<p>
some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
</p>