我想用JavaScript截断一个动态加载的字符串。这是一个url,所以没有空格,我显然不关心单词的边界,只关心字符。

以下是我得到的答案:

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

当前回答

要将字符串截断为特定长度,请在JavaScript中使用以下单线性箭头函数:

const truncate = (str, len) => str.slice?.(0, len);
    
console.log(truncate("Hello, World!", 5));
// Expected Output: Hello

上面的函数使用string .prototype.slice方法,该方法获取字符串的一个块,并将其作为一个新字符串返回,而不改变原始字符串。

其他回答

使用substring方法:

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

在你的例子中:

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

是的,子字符串。你不需要做Math.min;索引比字符串长度长的子字符串以原始长度结束。

But!

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

这是一个错误。如果文件。推荐人有一个撇号?或者在HTML中具有特殊意义的各种其他字符。在最坏的情况下,引用器中的攻击者代码可能会将JavaScript注入您的页面,这是一个XSS安全漏洞。

虽然可以手动转义路径名中的字符来阻止这种情况发生,但这有点麻烦。你最好使用DOM方法,而不是摆弄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);
}

逻辑如下

得到字符串的长度 如果大于阈值,则获取 子字符串并以省略号或其他符号结束 否则,返回输入字符串 函数truncateString(str: string, num: number, end: string = '…'){ 返回str.length > num ?str.slice(0, num) + end: str; }

以防你想按单词截断。

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

一行ES6解决方案

如果字符串长度超过给定长度,它还会添加一个结束字符串,而不仅仅是截断字符串。

const limit = (string, length, end = "...") => {
    return string.length < length ? string : string.substring(0, length) + end
}

limit('Hello world', 5) // Hello...