勉強したことのメモ

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でHTMLの特定要素をループ時に逆順で処理する方法

jQueryでリスト(li)タグ等の特定要素をeach()でループ処理する場合、 ...

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

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

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

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

jQueryからAjax経由でPHPにリクエストしCookieを操作する方法

先日PHPでCookie保存時にHttpOnly / Secure属性を設定する ...

セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法

セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...