Comment couper une chaîne en N caractères en Javascript?


169

Comment puis-je, en utilisant Javascript, créer une fonction qui réduira la chaîne passée en argument, à une longueur spécifiée, également passée en argument. Par exemple:

var string = "this is a string";
var length = 6;
var trimmedString = trimFunction(length, string);

// trimmedString should be:
// "this is"

Quelqu'un a des idées? J'ai entendu quelque chose sur l'utilisation de substring, mais je n'ai pas tout à fait compris.


1
"ceci est" = 7 caractères, l'aviez-vous prévu?
aziz punjani

Comme indiqué dans la question, je ne sais pas trop comment utiliser une sous-chaîne pour ce faire. Pouvez-vous me donner un exemple? J'accepterai est une réponse bien sûr, si ça marche;) @Interstellar_Coder oups, faute de frappe!

Réponses:


346

Pourquoi ne pas simplement utiliser substring ... string.substring(0, 7);Le premier argument (0) est le point de départ. Le deuxième argument (7) est le point final (exclusif). Plus d'infos ici.

var string = "this is a string";
var length = 7;
var trimmedString = string.substring(0, length);

Merci! Fonctionne parfaitement. Je la marquerai comme réponse dès que le délai sera dépassé!

24
Et si vous voulez des ellipses pour les chaînes dépassant la longueur maximale (probablement plus utile pour un max plus long): var string = "ceci est une chaîne"; var longueur = 20; var trimmedString = string.length> length? string.substring (0, longueur - 3) + "...": string.substring (0, longueur);
Will

5
Veuillez noter que string.substr (start, length) se comporte de manière étrange, il retournera vide si la longueur est supérieure à la longueur de la chaîne. string.substring (start, end) fonctionne comme prévu, c'est-à-dire qu'il retournera la chaîne jusqu'à sa fin s'il n'y a pas assez de caractères pour la fin donnée!
centic le

1
Utilisez string.substr. Il n'a pas de comportement étrange, malgré le commentaire précédent
Gibolt

.substring(from, to)prend des indices . .substr (from, length) ne le fait pas, De plus .substr () avait une incohérence dans IE lorsque le premier argument est négatif.
Bob Stein

47

Copier le commentaire de Will dans une réponse, car je l'ai trouvé utile:

var string = "this is a string";
var length = 20;
var trimmedString = string.length > length ? 
                    string.substring(0, length - 3) + "..." : 
                    string;

Merci Will.

Et un jsfiddle pour tous ceux qui se soucient https://jsfiddle.net/t354gw7e/ :)


1
Inutile d'utiliser string.substring(0, length)dans le cas else, puisque la chaîne est garantie d'être <= 20 caractères à ce stade, utilisez simplement string.
Nick Sweeting

15

Je suggère d'utiliser une extension pour la netteté du code. Notez que l'extension d'un prototype d'objet interne peut potentiellement perturber les bibliothèques qui en dépendent.

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

Et utilisez-le comme:

var stringObject= 'this is a verrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyylllooooooooooooonggggggggggggsssssssssssssttttttttttrrrrrrrrriiiiiiiiiiinnnnnnnnnnnnggggggggg';
stringObject.trimEllip(25)

5
Pourquoi pas? Parce que vous écrasez le prototype d'un objet standard .trim(). Cela peut provoquer un comportement inattendu dans d'autres bibliothèques et outils que vous pouvez utiliser.
Oleg Berman

1
c'est ce dont j'avais besoin
naneri


2

Un peu tard ... j'ai dû répondre. C'est la manière la plus simple.

// JavaScript
function fixedSize_JS(value, size) {
  return value.padEnd(size).substring(0, size);
}

// JavaScript (Alt)
var fixedSize_JSAlt = function(value, size) {
  return value.padEnd(size).substring(0, size);
}

// Prototype (preferred)
String.prototype.fixedSize = function(size) {
  return this.padEnd(size).substring(0, size);
}

// Overloaded Prototype
function fixedSize(value, size) {
  return value.fixedSize(size);
}

// usage
console.log('Old school JS -> "' + fixedSize_JS('test (30 characters)', 30) + '"');
console.log('Semi-Old school JS -> "' + fixedSize_JSAlt('test (10 characters)', 10) + '"');
console.log('Prototypes (Preferred) -> "' + 'test (25 characters)'.fixedSize(25) + '"');
console.log('Overloaded Prototype (Legacy support) -> "' + fixedSize('test (15 characters)', 15) + '"');

Pas à pas. .padEnd - Garantit la longueur de la chaîne

"La méthode padEnd () remplit la chaîne actuelle avec une chaîne donnée (répétée, si nécessaire) afin que la chaîne résultante atteigne une longueur donnée. Le remplissage est appliqué à partir de la fin (à droite) de la chaîne actuelle. La source de cet interactif exemple est stocké dans un référentiel GitHub. " source: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...

.substring - limite la longueur dont vous avez besoin

Si vous choisissez d'ajouter des ellipses, ajoutez-les à la sortie.

J'ai donné 4 exemples d'utilisations courantes de JavaScript. Je recommande vivement d'utiliser le prototype String avec surcharge pour le support hérité. Cela facilite grandement la mise en œuvre et le changement par la suite.


salut! Il est bon d'inclure également des explications sur ce qui se passe avec votre code. Étant donné à quel point votre solution est similaire à la réponse acceptée, peut-être un petit détail sur ce que padEndfait.
Mattie

Ma solution est beaucoup plus propre et plus standardisée et elle présente de multiples usages. La méthode padEnd () remplit la chaîne actuelle avec une chaîne donnée (répétée, si nécessaire) afin que la chaîne résultante atteigne une longueur donnée. Le remplissage est appliqué à partir de la fin (à droite) de la chaîne actuelle. La source de cet exemple interactif est stockée dans un référentiel GitHub. source: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Matthew Egan

1
Je ne conteste pas la qualité de votre réponse. Juste une suggestion pour l'améliorer. Votre explication est excellente - modifiez votre réponse et mettez-la là-dedans!
Mattie

Salut Matt, j'aime ta réponse. C'est dommage que vous répondiez à une question un peu différente. Il a demandé à l'origine de couper une chaîne, pas une longueur de chaîne fixe de retour.
Jakub Kriz

0
    let trimString = function (string, length) {
      return string.length > length ? 
             string.substring(0, length) + '...' :
             string;
    };

Cas d'utilisation,

let string = 'How to trim a string to N chars in Javascript';

trimString(string, 20);

//How to trim a string...

-1

Je pense que vous devriez utiliser ce code :-)

    // sample string
            const param= "Hi you know anybody like pizaa";

         // You can change limit parameter(up to you)
         const checkTitle = (str, limit = 17) => {
      var newTitle = [];
      if (param.length >= limit) {
        param.split(" ").reduce((acc, cur) => {
          if (acc + cur.length <= limit) {
            newTitle.push(cur);
          }
          return acc + cur.length;
        }, 0);
        return `${newTitle.join(" ")} ...`;
      }
      return param;
    };
    console.log(checkTitle(str));

// result : Hi you know anybody ...

1
Je suis curieux de savoir pourquoi vous avez ajouté cette réponse. La question a déjà une réponse acceptée et plusieurs autres réponses raisonnables, qui sont toutes plus simples que cela. Ou votre ":-)" était-il destiné à en faire une blague?
Scott Sauyet le

Notez que la réponse acceptée est également la réponse la mieux notée. Je pense que vous essayez de résoudre un problème différent ici. (Et je n'avais pas remarqué cela en commentant plus tôt.) Ce n'est pas que ce soit un problème improbable, mais au final, il n'est que légèrement lié à la question posée. Le vôtre a également l'étrange effet qu'avec l'entrée donnée, votre chaîne de sortie comporte des 23caractères longs, plus longs que le 17paramètre par défaut plus les 4caractères du suffixe " ...". Cela semble étrange.
Scott Sauyet

Je pense également que cela pourrait utiliser une implémentation plus simple .
Scott Sauyet
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.