勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

  jQuery JavaScript

サイトの特定の要素内の文字数が〇文字以上の場合に「コンテンツコンテ……」のように丸めたかった。こういった処理は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

 - jQuery JavaScript

  関連記事

NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

「input type="number"」のテキストボックスを桁数制限且つ半角数値のみ入力可にする方法

「input type="number"」のテキストボックスに対して「2桁まで」 ...

jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...

指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法

指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...