直接截断字符串 JavaScript答案

【问题标题】：Truncate a string straight JavaScript直接截断字符串 JavaScript
【发布时间】：2010-11-21 01:15:19
【问题描述】：

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

这是我得到的：

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

【问题讨论】：

您要截断哪一部分？您的示例没有很好地传达意图。
哦好的-我想截断一定数量的字符的URL，这样当我设置“foo”的innerHTML时，如果它太长就不会流出div。
*但只是 innerHTML，而不是 var 路径名本身。
为什么不直接用css来隐藏div的溢出呢？溢出：隐藏
@Samuel 因为 UI 方面的做法很糟糕 - 如果用户希望看到他们刚刚来自的 url（document.referrer），并且我正在缩短它，我想指出他们只看到网址的一部分，并且没有错误。除此之外，您提出的方法会将字符切成两半，这看起来很可怕。

标签： javascript truncate

【解决方案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>"

【讨论】：

如果你想要一个从 0 开始的子字符串，那么 substr 函数将做同样的事情，少 3 个字符 ;)
如果字符串比 length 短，substr 的行为会很奇怪 - 返回空
如果您的“字符串”是一个数字，您还需要插入.toString(). 将其转换为substring() 可以处理的字符串。
MDN docs are better than W3schools

【解决方案2】：

是的，子字符串。你不需要做一个 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);
}

【讨论】：

我很困惑，您的解决方案如何避免安全漏洞？
当你使用诸如‘createTextNode’和‘.href=...’之类的DOM方法时，你直接设置了真正的底层明文值。当您在 HTML 文件中或通过 innerHTML 编写 HTML 时，您必须遵守 HTML 转义规则。因此，虽然‘createTextNode('A

【解决方案3】：

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

来自documentation：

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

例子：

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

输出：

just sitting on...

【讨论】：

Sugar is a Javascript library that extends native objects... 在 JavaScript 中扩展原生对象通常被认为是个坏主意。
@JezenThomas 有时坏主意是最合适的主意。

【解决方案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('');
    }

【讨论】：

如果结果 !== str; 添加一个“...”会很好

【解决方案5】：

是的，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;
};

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

如果你想按单词截断。

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

【讨论】：

【解决方案8】：

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>

【讨论】：

【解决方案9】：

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

【讨论】：

这总是调用子字符串，即使它可能没有必要......
@ClintEastwood 很好的反馈，我已经更新了答案。检查字符串长度与最大长度也意味着我可以删除 showDots const 和 ternary 使其更整洁。干杯。

【解决方案10】：

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

【讨论】：

即使在没有发生截断的情况下也会附加一个省略号。

【解决方案11】：

如果您想通过限制（符号）截断，但是您不想为非长文本（例如帖子标题）删减单词（保留最后一个单词）：

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) + '...';
}

【讨论】：