【javaScript・jQuery】特定の文字数で文字列をカットしたい

2018年12月20日2019年7月17日JavaScript,jQuery

webサイトを作成する際に、ある文字数以上は表示せずに末尾に「…」と追加して表示したいときとかありますよね！

そんなときのソースコードは以下です。

５文字以上の部分はカットして「…」と表示しています。

サンプルの例で言うと、
「あああああカットされた」→「あああああ …」
となります。

[index.html]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- カットしたい要素のクラスにcutTextを記載 -->
<p class="cutText">あああああカットされた</p>
<script src="index.js"></script>

[index.js]

$(function () {
    // 文字数カット処理-------

    var $setElm = $('.cutText');　// cutTextとついたクラスの要素を取得
    var cutFigure = '5'; // カットする文字数
    var afterTxt = ' ...'; // 文字カット後に表示するテキスト

    $setElm.each(function () {　// cutTextとついたクラスのすべての要素に対して文字カットの処理を行う
        var textLength = $(this).text().length; // 各要素の長さを取得
        var textTrim = $(this).text().substr(0, (cutFigure))

        if (cutFigure < textLength) { $(this).html(textTrim + afterTxt).css({ visibility: 'visible' }); } else if (cutFigure >= textLength) {
            // cssで初期表示は非表示にしているので、カット処理後に表示する
            $(this).css({
                visibility: 'visible'
            });
        }
    })
});

[index.css]

/* ロード時に一瞬全文表示されるのを防ぐため */
.cutText {
visibility: hidden;
}