Tronca una stringa direttamente JavaScript


167

Vorrei troncare una stringa caricata dinamicamente usando JavaScript dritto. È un url, quindi non ci sono spazi, e ovviamente non mi importa dei confini delle parole, solo dei personaggi.

Ecco cosa ho ottenuto:

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

1
Quale parte vuoi troncare? Il tuo esempio non trasmette molto bene l'intento.
Larsenal,

1
oh ok- Voglio troncare l'URL con una certa quantità di caratteri, in modo che quando imposto l'HTML interno di "pippo" non uscirà dal div se è troppo lungo.
Bob,

1
* ma- solo il metodo HTML interno, non il nome percorso var stesso.
Bob,

1
Perché non usare semplicemente CSS per nascondere l'overflow del div? trabocco: nascosto
Samuel

2
@Samuel Perché sarebbe una cattiva pratica UI-saggia- se l'utente si aspetta di vedere l'URL da cui è appena arrivato (document.referrer), e lo accorciamo, voglio indicare loro che stanno vedendo solo una porzione dell'URL e che non si è verificato un errore. A parte questo, il metodo che proponi taglierebbe i personaggi a metà e apparirebbe orribile.
Bob,

Risposte:


334

Utilizzare il metodo di sottostringa :

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

Quindi nel tuo caso:

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

1
Se vuoi una sottostringa a partire da 0, la funzione substr farà esattamente la stessa cosa con 3 caratteri in meno;)
jackocnr

1
substr si comporta in modo strano se la stringa è più corta di length- restituisce vuoto
RozzA

Se la tua "stringa" è un numero, devi anche inserirlo .toString().per convertirlo in una stringa che substring()può essere gestita.
not2qubit


16

sì, sottostringa. Non è necessario eseguire un Math.min; sottostringa con un indice più lungo della lunghezza della stringa termina alla lunghezza originale.

Ma!

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

Questo è un errore. E se document.referrer avesse un apostrofo? O vari altri personaggi che hanno un significato speciale in HTML. Nel peggiore dei casi, il codice attaccante nel referrer potrebbe inserire JavaScript nella tua pagina, che è una falla di sicurezza XSS.

Mentre è possibile sfuggire manualmente ai personaggi nel percorso per impedire che ciò accada, è un po 'una seccatura. Stai meglio usando i metodi DOM che giocherellare con le stringhe 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);
}

sono confuso, in che modo la tua soluzione evita il problema della sicurezza?
Bob,

10
Quando si utilizzano metodi DOM come 'createTextNode' e '.href = ...', si imposta direttamente il valore di testo reale sottostante. Quando si scrive HTML, in un file HTML o tramite innerHTML, è necessario rispettare le regole di escape HTML. Quindi, mentre 'createTextNode (' A <B&C ')' va bene, con innerHTML dovresti dire 'innerHTML =' A & lt; B & amp; C ''.
Bobince,

11

Ho pensato di menzionare Sugar.js . Ha un metodo troncato che è piuttosto intelligente.

Dalla documentazione :

Tronca una stringa. A meno che la divisione non sia vera, il troncamento non suddividerà le parole in alto e invece scarterà la parola in cui si è verificato il troncamento.

Esempio:

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

Produzione:

just sitting on...

9
Sugar is a Javascript library that extends native objects… L'estensione di oggetti nativi in ​​JavaScript è generalmente considerata una Bad Idea ™.
Jezen Thomas,

@JezenThomas Qualche volta una cattiva idea è l'idea più appropriata.
viditkothari

10

Il codice seguente tronca una stringa e non divide le parole, e invece scarta la parola in cui si è verificato il troncamento. Totalmente basato sulla fonte 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('');
    }

2
Sarebbe bello aggiungere un "..." se il risultato! == str;
Leo Caseiro

9

Ecco un metodo che puoi usare. Questa è la risposta per una delle sfide di FreeCodeCamp:

function truncateString(str, num) {


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

6

Versione ES6 aggiornata

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

questo invoca sempre la sottostringa, anche quando potrebbe non essere necessario ...
Clint Eastwood,

@ClintEastwood buon feedback, ho aggiornato la risposta. Controllare la lunghezza della stringa rispetto alla lunghezza massima significava anche che potevo rimuovere la const e il ternary showDots rendendola più ordinata. Saluti.
Sam Logan,

3

Sì, substringfunziona alla grande:

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

0

nel caso in cui si desideri troncare a parole.

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

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>

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.