208

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

这是我得到的：

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

13 回答 13

394

使用子字符串方法：

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>"
于 2009-08-19T17:45:54.083 回答
25

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

function truncateString(str, num) {
  if (str.length > num) {
    return str.slice(0, num) + "...";
  } else {
    return str;
  }
}
于 2018-12-05T17:36:17.913 回答
18

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

但！

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

这是个错误。如果 document.referrer 中有撇号怎么办？或在 HTML 中具有特殊含义的各种其他字符。在最坏的情况下，referrer 中的攻击者代码可能会将 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);
}
于 2009-08-19T18:28:53.747 回答
13

下面的代码会截断一个字符串并且不会拆分单词，而是丢弃发生截断的单词。完全基于 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('');
    }
于 2015-10-27T22:40:47.977 回答
11

更新 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)
)

于 2019-08-28T08:37:40.213 回答
10

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

从文档中：

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

例子：

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

输出：

just sitting on...
于 2012-03-28T21:07:40.277 回答
3

是的，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;
};
于 2018-09-27T11:41:03.733 回答
1

如果您想按单词截断。

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

于 2019-06-26T07:34:15.187 回答
1 
var str = "Anything you type in.";
str.substring(0, 5) + "..." //you can type any amount of length you want
于 2021-01-25T19:57:57.543 回答
1

除了 substring 方法，我为此目的找到了一个不错的小 JS 库。

它在 vanilla javascript 中有多种有用的方法来截断字符串。

按字符截断：

var pathname = 'this/is/thepathname';
document.getElementById("foo").innerHTML = "<a class='link' href='" + pathname +"'>" + pathname +"</a>"

// call the plugin - character truncation only needs a one line init
new Cuttr('.link', { length: 10 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/cuttr/1.3.2/cuttr.min.js"></script>

<div id="foo"></div>

只需添加一个class并a初始化插件。

多行文本剪辑也是可能的。github 页面上的cuttr.js 文档
中提到了更多选项，例如单词或句子截断。

于 2022-03-04T13:04:50.730 回答
0 

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>

于 2019-08-14T14:55:31.103 回答
0

如果您想通过限制（符号）截断，但您不想为非长文本（例如帖子标题）剪切单词（保持最后一个单词完整）：

trancWord(str, limit) {
    str = str.split(' ');
    let summ = 0
    for (let [index, value]  of str.entries()) {
        summ  += value.length
        if (summ > limit) {
            let cutTolimit = str.slice(0, index);
            return str.slice(0, index).join(' ') + ' ' + '...';
        }
    }
    return str.join(' ');
}

对于长字符串（一些长的帖子文本 - Vue-3 用作过滤器）：

trancWord  (str, max){
        if (str.length <= max) { return str; }
        let subString = str.substr(0, max);
        return (str ? subString.substr(0, subString.lastIndexOf(' ')) : subString) + '...';
}
于 2022-01-24T14:21:55.823 回答
0

您可以借助内部 JavaScript 方法修复此方法

const truncate = (text, len) => {
  if (text.length > len && text.length > 0) {
    return `${text.split(" ").slice(0, len).join(" ")} ...`;
  } else {
    return text;
  }
};

于 2022-03-04T13:19:10.383 回答