截断字符串直接JavaScript

Question

我想使用直接JavaScript截断动态加载的字符串.这是一个网址,所以没有空格,我显然不关心字边界,只关注字符.

这是我得到的:

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

Answer 1

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

Answer 2

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

但!

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

这是个错误.如果document.referrer有撇号怎么办？或者在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);
}

Answer 3

以为我会给Sugar.js一个提及.它有一个非常聪明的截断方法.

从文档:

截断一个字符串.除非split为true,否则truncate不会将单词拆分,而是丢弃发生截断的单词.

例:

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

输出:

just sitting on...

Answer 4

下面的代码截断一个字符串,不会将单词拆分,而是丢弃发生截断的单词.完全基于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('');
    }

Answer 5

更新了 ES6 版本

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

// demo the above function
console.log(
  truncateString(prompt("", "This is a test"), 4)
)

Answer 6

这是您可以使用的一种方法。这是FreeCodeCamp挑战之一的答案：

function truncateString(str, num) {


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