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。它有一个非常聪明的截断方法。

来自documentation：

截断一个字符串。除非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

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

function truncateString(str, num) {


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

Answer 6

是的，substring很棒：

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

Answer 7

更新的ES6版本

const truncateString = (string, maxLength = 50) => {
  if (!string) return null;
  const showDots = string.length > maxLength;
  return `${string.substring(0, maxLength)}${showDots ? '...' : ''}`;
};

truncateString('what up', 4); // returns 'what...'

Answer 8

var str = "Anything you type in.";
str.substring(0, 5) + "..." //you can type any amount of length you want

Answer 9

如果您想按单词截断。

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

Answer 10

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>

截断字符串直接JavaScript

10 个答案: