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
関連記事
-
-
スマホ対応のjQueryのカラーピッカープラグイン「excolor」の利用方法
以前の記事でカラーピッカープラグインのことを書いたけどスマホでは使えない。なので ...
-
-
ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法
formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...
-
-
jQueryでループを抜けようと(breakしようと)するとエラーになる際の対応方法
jQueryでループを抜けようと(breakしようと)すると「Uncaught ...
-
-
jQueryプラグインの作成
面白そうだったのでメモ。 ■参考サイト http://www.entacl.in ...
-
-
セレクトメニューにサジェスト機能をつける方法(select2)
formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...