Javascript / jQueryにて特定の要素内の文字数が〇文字以上の場合に丸める方法

サイトの特定の要素内の文字数が〇文字以上の場合に「コンテンツコンテ……」のように丸めたかった。こういった処理はPHPで行うことが多いんだけど、そのサイトはASPを利用しておりPHPが使用不可だった。そのためJavascript / jQueryで対応する方法を以下にメモ。

対応方法

ソースコード

<div id="contents">
    substring()メソッドはstringの一部、開始インデックスから終了インデックスの手前まで、または終了インデックスが指定されなかった場合は文字列の最後までを返します。
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
//JavaScriptの場合
const contents = document.querySelector(`#contents`);
contents.textContent = contents.textContent.replace(/\s+/g, '').substring(0, 50) + '……';

//jQueryの場合
$(function(){
    const contents = $(`#contents`).text();
    $(`#contents`).text(contents.replace(/\s+/g, '').substring(0, 50) + '……');
});
</script>

出力結果

以下が出力される筈。

substring()メソッドはstringの一部、開始インデックスから終了インデックスの手前まで、……

解説等

「replace(/\s+/g, '')」で改行や空白を削除 → 「substring(0, 50)」で0～50文字目までを取得 → 末尾に「……」をつけて要素内に出力という形になる。

尚、このまま使おうとすると50文字未満の場合でも「……」が追加されるため「contents.textContent.length」で文字数をカウントし、〇文字以上の場合は丸める処理を入れると良さそう(バニラJSの場合)。

リファレンス

substring

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substring