Forkort en streng direkte i JavaScript

Jeg vil gjerne forkorte en dynamisk lastet streng ved hjelp av ren JavaScript. Det er en URL, så det er ingen mellomrom, og jeg bryr meg åpenbart ikke om ordgrenser, bare tegn.

Her er det jeg fikk:

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

Svar #1

Bruk substring-metoden:

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

Så i ditt tilfelle:

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

Svar #2

Her er en metode du kan bruke. Dette er svaret for en av FreeCodeCamp-utfordringene:

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

Svar #3

Oppdatert ES6-versjon

const truncateString = (string = '', maxLength = 50) => 
  string.length > maxLength 
    ? `${string.substring(0, maxLength)}…`
    : string

// demo the above function
alert(truncateString('Hello World', 4));

Svar #4

ja, substring. Du trenger ikke å bruke Math.min; substring med en lengre indeks enn lengden på strengen ender på den opprinnelige lengden.

Men!

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

Dette er en feil. Hva om document.referrer hadde en apostrof i seg? Eller ulike andre tegn som har spesiell betydning i HTML. I verste fall kan angriperkode i refereren injisere JavaScript på siden din, noe som utgjør et XSS-sikkerhetshull.

Selv om det er mulig å unnslippe tegnene i banen manuelt for å stoppe dette fra å skje, er det litt plagsomt. Du har det bedre med å bruke DOM-metoder enn å fikle med innerHTML-strenger.

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

Svar #5

Følgende kode trunkerer en streng og vil ikke dele opp ord, men kaste bort ordet der trunkeringen skjedde. Helt basert på Sugar.js-kildekode.

function truncateOnWord(str, limit) {
        var trimmable = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u180E\0\1\2\3\4\5\6\7\8\9\A\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('');
    }

Svar #6

Trodde jeg skulle nevne Sugar.js. Den har en truncate-metode som er ganske smart.

Fra dokumentasjonen:

Trunker en streng. Med mindre split er sann, vil trunkering ikke dele opp ord, og i stedet kaste ordet der trunkeringen skjedde.

Eksempel :

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

Utdata :

just sitting on...

Relaterte artikler