直接截断字符串 JavaScript

IT技术 javascript truncate
2021-02-28 17:17:32

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

这是我得到的:

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

使用子串方法:

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>"
如果字符串比length-短,则 substr 的行为很奇怪- 返回空
2021-04-24 17:17:32
如果您想要一个从 0 开始的子字符串,那么 substr 函数将执行完全相同的操作,减少 3 个字符;)
2021-04-29 17:17:32
2021-05-02 17:17:32
如果您的“字符串”是一个数字,您还需要插入.toString().以将其转换为substring()可以处理的字符串
2021-05-03 17:17:32

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

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

是的,子串。你不需要做 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);
}
我很困惑,您的解决方案如何避免安全漏洞?
2021-04-24 17:17:32
当您使用像“createTextNode”和“.href=...”这样的 DOM 方法时,您是在直接设置真正的底层明文值。当您在 HTML 文件中或通过 innerHTML 编写 HTML 时,您必须遵守 HTML 转义规则。因此,虽然 'createTextNode('A<B&C')' 很好,但使用 innerHTML 时,您必须说 'innerHTML='A<B&C''。
2021-05-01 17:17:32

以下代码截断一个字符串,不会拆分单词,而是丢弃发生截断的单词。完全基于 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('');
    }
如果结果为 !== str;,那么添加一个 "..." 会很好。
2021-04-27 17:17:32

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

文档

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

例子:

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

输出:

just sitting on...
@JezenThomas 有时坏主意是最合适的主意。
2021-04-24 17:17:32
Sugar is a Javascript library that extends native objects… 在 JavaScript 中扩展本机对象通常被认为是一个坏主意™。
2021-05-16 17:17:32