勉強したことのメモ

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

  関連記事

jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方

divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

jQueryにて指定した要素を検索条件から除外するnot()の利用方法

あるソースコードを拝見しているとjQueryでnot()という使ったことの無いメ ...

jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

セレクトメニューにサジェスト機能をつける方法(select2)

formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...