勉強したことのメモ

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でユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法

GETパラメータを取得し、その内容をページ上に表示したいケースがあった。また、A ...

jQueryで対象の要素をまとめて親要素で囲む方法

あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースが ...

adblock(広告削除)設定している場合はページを表示させない

iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...

jQueryで偶数or奇数行に任意のClassを付与する方法

tableタグの1行目を除く偶数もしくは奇数行のtrタグに任意にClassを指定 ...

tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)

テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...