スマートな方法は、JavaScriptを使用して長い文字列を短縮する



Answers

これはFirefoxの場合のみ必要であることに注意してください。

他のすべてブラウザはCSSソリューションをサポートしていますサポートテーブル参照):

p {
    white-space: nowrap;
    width: 100%;                   /* IE6 needs any width */
    overflow: hidden;              /* "overflow" value must be different from  visible"*/ 
    -o-text-overflow: ellipsis;    /* Opera < 11*/
    text-overflow:    ellipsis;    /* IE, Safari (WebKit), Opera >= 11, FF > 6 */
}

皮肉なことに、私はMozilla MDCからコードスニペットを入手しています。

Question

JavaScriptを使用して文字列を短くするための洗練されたソリューション/ライブラリを持っている人は誰ですか?

if(string.length > 25) {
    string = string.substring(0,24)+"...";
}



私はKooilncの解決策を支持した。 本当に素敵なコンパクトなソリューション。 私が取り組んでいる1つの小さなエッジケースがあります。 誰かが本当に長い文字シーケンスを何らかの理由で入力した場合、それは切り詰められません:

function truncate(str, n, useWordBoundary) {
    var singular, tooLong = str.length > n;
    useWordBoundary = useWordBoundary || true;

    // Edge case where someone enters a ridiculously long string.
    str = tooLong ? str.substr(0, n-1) : str;

    singular = (str.search(/\s/) === -1) ? true : false;
    if(!singular) {
      str = useWordBoundary && tooLong ? str.substr(0, str.lastIndexOf(' ')) : str;
    }

    return  tooLong ? str + '&hellip;' : str;
}



最近のJavascriptフレームワーク( JQueryPrototype etc )では、これを処理するStringにユーティリティ機能が追加されています。

プロトタイプの例を次に示します。

'Some random text'.truncate(10);
// -> 'Some ra...'

これはあなたが他の人に対処/保守してもらいたい機能のようです。 私は、より多くのコードを書くのではなく、フレームワークがそれを処理するようにしたいと思います。




ここに私の解決策がありますが、これには他の提案よりもいくつか改善があります:

String.prototype.truncate = function(){
    var re = this.match(/^.{0,25}[\S]*/);
    var l = re[0].length;
    var re = re[0].replace(/\s$/,'');
    if(l < this.length)
        re = re + "&hellip;";
    return re;
}

// "This is a short string".truncate();
"This is a short string"

// "Thisstringismuchlongerthan25characters".truncate();
"Thisstringismuchlongerthan25characters"

// "This string is much longer than 25 characters and has spaces".truncate();
"This string is much longer&hellip;"

それ:

  • 25文字後の最初のスペースを切り捨てる
  • JavaScript Stringオブジェクトを拡張するので、任意の文字列で使用できます(およびチェーンされている)。
  • 切り捨てが後続のスペースになる場合は文字列をトリミングします。
  • 切り捨てられた文字列が25文字より長い場合は、Unicode hellipエンティティ(省略符号)を追加します。



この関数は、スペースと単語の部分も切り捨てます(例:Mother into Moth ...)

String.prototype.truc= function (length) {
        return this.length>length ? this.substring(0, length) + '&hellip;' : this;
};

使用法:

"this is long length text".trunc(10);
"1234567890".trunc(5);

出力:

これはロ...

12345 ...




現代のブラウザすべて 、テキストの行が利用可能な幅を超えた場合、省略記号を自動的に追加するためのシンプルなCSSソリューションをサポートするようになりました。

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

(これは、何らかの効果を持たせるために何らかの方法で要素の幅を制限する必要があることに注意してください)。

https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/基づいていhttps://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

このアプローチは、文字の数に基づいて制限されないことに留意されたい。 また、複数の行のテキストを許可する必要がある場合は、機能しませ




ファイル名には番号が付いていることがあります。インデックスは先頭または末尾にある場合があります。 だから私は文字列の中心から短くしたい:

function stringTruncateFromCenter(str, maxLength) {
    const midChar = "…";      // character to insert into the center of the result
    var left, right;

    if (str.length <= maxLength) return str;

    // length of beginning part      
    left = Math.ceil(maxLength / 2);

    // start index of ending part   
    right = str.length - Math.floor(maxLength / 2) + 1;   

    return str.substr(0, left) + midChar + str.substring(right);
}

ここでは、UTF-8で1バイト以上の埋め込み文字を使用したことに注意してください。




次のコードを使用する

 function trancateTitle (title) {
    var length = 10;
    if (title.length > length) {
       title = title.substring(0, length)+'...';
    }
    return title;
}



Links