web-dev-qa-db-fra.com

Tronquer une chaîne directement JavaScript

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

Voici ce que j'ai eu:

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

Utilisez la méthode 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>"
306
Larsenal

oui, sous-chaîne. Vous n'avez pas besoin de faire un Math.min; La sous-chaîne dont l'index est 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 dedans? Ou divers autres caractères ayant une signification particulière en HTML. Dans le pire des cas, le code de l'attaquant dans le référent pourrait injecter JavaScript dans votre page, ce qui constitue un trou dans la sécurité XSS.

Bien qu'il soit possible d'échapper manuellement aux caractères de pathname pour empêcher cela, c'est un peu pénible. Vous feriez mieux d'utiliser des méthodes DOM que de manipuler des chaînes innerHML.

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

Je pensais donner Sugar.js une mention. Il a une méthode tronquée qui est très intelligente.

De la documentation :

Tronque une chaîne. À moins que split soit vrai, tronquer ne divisera pas les mots, mais jettera le mot où la troncature s'est produite.

Exemple:

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

Sortie:

just sitting on...
11
Brian

Le code suivant tronque une chaîne et ne divise pas les mots, mais supprime 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('');
    }
9
Beto Frega

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

function truncateString(str, num) {


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

Oui, substring fonctionne 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;
};
3
Arnaud Anato

au cas où vous voudriez tronquer par Word.

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);
0
Fhulufhelo Mokhomi
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>
0
sadeq alshaar

version ES6 mise à jour

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

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