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

2019年5月19日

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

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

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

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

[index.html]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="index.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <!-- カットしたい要素のクラスにcutTextを記載 -->
    <p class="cutText">あああああカットされた</p>

    <script src="index.js"></script>
</body>
</html>

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

スポンサーリンク