Tronquer une chaîne de droite JavaScript

Je tiens à tronquer un chargé dynamiquement chaîne à l'aide de droites JavaScript. C'est une url, donc il n'y a pas d'espaces, et je ne se soucient pas des frontières de mot, juste des personnages.

Voici ce que j'ai:

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

Quel rôle voulez-vous de les tronquer? Votre exemple ne pas transmettre l'intention très bien.
oh ok - j'ai envie de tronquer l'URL à un certain nombre de caractères, de sorte que lorsque j'ai mis le innerHTML de "foo" cela ne peut pas s'écouler hors de la div s'il est trop long.
*mais - le innerHTML, pas le var chemin lui-même.
Pourquoi ne pas simplement utiliser le css pour masquer le dépassement de la div? overflow: hidden
Parce que ce serait une mauvaise pratique de l'INTERFACE utilisateur-sage - si l'utilisateur s'attend à voir l'url qu'ils vient de partir (document.référent), et je suis le raccourcir, je tiens à indiquer qu'ils ne sont que de voir une partie de l'url, et qu'il n'y avait pas une erreur. A côté de cela, la méthode que vous proposez serait cut les caractères de la moitié, qui aurait l'air horrible.
vous devez utiliser les css

InformationsquelleAutor Bob | 2009-08-19

javascript truncate

302

Utiliser le sous-chaîne méthode:
```
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>"
```
- de l'ornière-roh, ne semble pas être le travail dans safari4!
- Si vous voulez une sous-chaîne à partir de 0, alors la fonction substr permettra de faire exactement la même chose avec moins de 3 caractères 😉
- substr se comportent bizarre si la chaîne est plus courte que la length - retours à vide
- Si votre "chaîne" est un nombre, vous devez également insérer .toString(). pour la convertir en une chaîne de caractères qui substring() peut gérer.
InformationsquelleAutor Larsenal
15

oui, sous-chaîne. Vous n'avez pas besoin de faire des Maths.min; sous-chaîne avec une plus l'indice que la longueur de la chaîne se termine à la longueur d'origine.

Mais!
```
document.getElementById("foo").innerHTML = "<a href='" + pathname +"'>" + pathname +"</a>"
```
Ce qui est une erreur. Que faire si le document.référent a une apostrophe dans? Ou divers autres caractères qui ont une signification particulière en HTML. Dans le pire des cas, attaquant de code dans le référent pourrait injecter du code JavaScript dans votre page, ce qui est une faille de sécurité XSS.

Alors qu'il est possible d'échapper les caractères dans le chemin d'accès manuellement pour arrêter ce qui se passe, c'est un peu de douleur. Il est préférable d'utiliser les méthodes du DOM que de bricoler avec innerHTML chaînes.
```
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 suis confus, comment est-ce que votre solution d'éviter le trou de sécurité?
- Lorsque vous utilisez les méthodes du DOM comme " createTextNode’ et ‘.href=...", vous êtes directement réglage du réel sous-jacent en clair de la valeur. Lorsque vous êtes à l'écriture de code HTML, soit dans un fichier HTML ou via innerHTML, vous devez obéir HTML échapper à des règles. Ainsi, tandis que ‘createTextNode('A<B&C')’ est très bien, avec innerHTML que vous auriez à dire ‘innerHTML= 'Un<B&C".
InformationsquelleAutor bobince
11

Pensé que je pourrais donner Sugar.js une mention. Il a une troncature de la méthode qui est assez intelligent.

De la la documentation:

Tronque une chaîne de caractères. À moins que split est vrai, truncate ne se fend pas les mots, et au lieu
jeter le mot où la troncature s'est produite.

Exemple:
```
'just sittin on the dock of the bay'.truncate(20)
```
De sortie:
```
just sitting on...
```
- Sugar is a Javascript library that extends native objects... L'extension native des objets en JavaScript est généralement considéré comme une Mauvaise Idée™.
InformationsquelleAutor Brian

Code suivant tronque une chaîne et ne se fend pas les mots, et au lieu de jeter la parole où la troncature s'est produite. Totalement basé sur Sugar.js source.

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

Ce serait sympa d'ajouter des "..." si la suite!!! = = str;

InformationsquelleAutor Beto Frega

Voici une méthode que vous pouvez utiliser. C'est la réponse pour l'un de FreeCodeCamp Défis:

function truncateString(str, num) {


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

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

InformationsquelleAutor Arnaud Anato

dans le cas où vous souhaitez tronquer un mot.

JS:

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

InformationsquelleAutor Fhulufhelo Mokhomi

Vous devez vous connecter pour publier un commentaire.