Tronquer une chaîne directement en JavaScript

Je voudrais tronquer une chaîne chargée dynamiquement en utilisant du JavaScript simple. C'est une URL, donc il n'y a pas d'espaces, et je ne me soucie évidemment pas des limites des mots, juste des caractères.

Voici ce que j'ai:

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

Utilisez la méthode de sous - chaîne :

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

Donc dans votre cas:

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

oui, sous-chaîne. Vous n'avez pas besoin de faire un Math.min; La sous-chaîne avec un index plus long que la longueur de la chaîne se termine à la longueur d'origine.

Mais!

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

C'est une erreur. Et si document.referrer avait une apostrophe dans? Ou divers autres caractères qui ont une signification particulière en HTML. Dans le pire des cas, le code de l'attaquant dans le référent pourrait injecter du JavaScript dans votre page, ce qui est une faille de sécurité XSS.

Bien qu'il soit possible d'échapper manuellement aux personnages du chemin d'accès pour empêcher cela, c'est un peu pénible. Il vaut mieux utiliser les méthodes DOM que jouer avec les chaînes innerHTML.

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

Je pensais que je donnerais à Sugar.js une mention à . Il a une méthode tronquée qui est assez intelligente.

De la documentation :

Tronque une chaîne. À moins que split ne soit vrai, truncate ne divisera pas les mots et rejettera à la place le mot où la troncature s'est produite.

Exemple:

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

Production:

just sitting on...

Le code suivant tronque une chaîne et ne divisera pas les mots, mais rejettera à la place le mot où la troncature s'est produite. Totalement basé sur la source Sugar.js.

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

Voici une méthode que vous pouvez utiliser. Voici la réponse à l'un des défis de FreeCodeCamp:

function truncateString(str, num) {


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

Version ES6 mise à jour

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...'

Oui, substringfonctionne très bien:

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

au cas où vous voudriez tronquer par mot.

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