在純 JavaScript 中截斷字串

我想用純 JavaScript 截斷一個動態加載的字串。它是一個 URL，所以沒有空格，顯然我不在乎單詞邊界，只在乎字元。

這是我得到的：

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

答案＃1

使用子字串方法：

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

答案＃2

這裡有一種你可以使用的方法。這是其中一個 FreeCodeCamp 挑戰的答案：

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

答案＃3

更新的 ES6 版本

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

// demo the above function
alert(truncateString('Hello World', 4));

答案＃4

是的，substring。你不需要使用 Math.min；當 substring 的索引比字串長度還長時，它會在原本的長度結束。

但是！

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

這是一個錯誤。如果 document.referrer 中有撇號怎麼辦？或者有其他在 HTML 中具有特殊意義的各種字符。在最壞的情況下，來自 referrer 的攻擊者代碼可能會將 JavaScript 注入到你的頁面中，這是一個 XSS 安全漏洞。

雖然可以手動轉義路徑名中的字符來防止這種情況發生，但這有點麻煩。與其擺弄 innerHTML 字串，不如使用 DOM 方法會更好。

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

答案＃5

以下程式碼會截斷字串，但不會拆分單詞，而是在截斷發生的位置丟棄該單詞。完全基於 Sugar.js 的來源。

function truncateOnWord(str, limit) {
        var trimmable = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u180E\0\1\2\3\4\5\6\7\8\9\A\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('');
    }

答案＃6

覺得我應該提一下 Sugar.js。它有一個相當聰明的截斷方法。

摘自文件說明：

截斷字串。除非 split 為 true，否則截斷不會拆分單詞，而是丟棄發生截斷的那個單詞。

範例：

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

輸出：

just sitting on...