Webサイトのトップページで表示するお知らせ情報など、レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。
そんな際にjQueryを使って文字列を任意の文字数でカットして、末尾に「…」などの追記情報（これも任意の文字列）を追加するやり方をシンプルなスクリプトで実装する方法をご紹介してみます。
【テキストのみ】
jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法
まずは実装するHTMLソースが下記のような構成だったとします。
◆HTML <ul> <li>このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。</li> <li>これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。</li> <li>このダミーテキストは文字数カット用です。</li> </ul>
そしてこの＜li＞リスト一つ一つの文字列をみて、特定の文字数でカットさせます。
CSS側ではページロードの際に、一瞬長い文字列が表示されてしまわぬよう、カットさせる要素はあらかじめ非表示の状態にしておきます。
◆CSS
ul li {
visibility: hidden;
}
そして実際に文字列をカットさせるスクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
var $setElm = $('ul li');
var cutFigure = '30'; // カットする文字数
var afterTxt = ' …'; // 文字カット後に表示するテキスト
$setElm.each(function(){
var textLength = $(this).text().length;
var textTrim = $(this).text().substr(0,(cutFigure))
if(cutFigure < textLength) {
$(this).html(textTrim + afterTxt).css({visibility:'visible'});
} else if(cutFigure >= textLength) {
$(this).css({visibility:'visible'});
}
});
});
</script>
サンプルでは文字数30文字以上になったら、末尾に「 …」をつける形にしてあります。
これらを実行させると以下のような感じになります。
リストの文字数が30文字以上になった場合のみ、末尾に「…」をつけた形でカットされます。
（30文字以下だったらそのまま表示）
スクリプト開始部分にある
————————-
var $setElm = $(‘ul li’);
var cutFigure = ’30’;
var afterTxt = ‘ …’;
————————-
は上から
————————-
・文字数カットを対象にする要素（クラス名などでも可）
・カットする文字数
・カット後に表示するテキスト
————————-
となっているので、これらの値を変更することでもろもろ調整が可能になっています。
実際にWebページ上でこの動作を実装する場合は、リンクテキストに対して行うことが多くなるかと思いますが、その場合のサンプルも紹介してみます。
【リンクテキスト】
jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法
まずは実装するHTMLソースが下記のような構成だったとします。
◆HTML <ul> <li><a href="#">このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。</a></li> <li><a href="#">これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。これは文字数カット用のダミーテキストです。</a></li> <li><a href="#">このダミーテキストは文字数カット用です。</a></li> </ul>
CSS側では同様にカットさせるリンク要素をあらかじめ非表示の状態にしておきます。
◆CSS
ul li a {
visibility: hidden;
}
そしてリンク＜a＞タグを対象に文字列をカットさせるスクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
var $setElm = $('ul li a');
var cutFigure = '30'; // カットする文字数
var afterTxt = ' …'; // 文字カット後に表示するテキスト
$setElm.each(function(){
var textLength = $(this).text().length;
var textTrim = $(this).text().substr(0,(cutFigure))
if(cutFigure < textLength) {
$(this).html(textTrim + afterTxt).css({visibility:'visible'});
} else if(cutFigure >= textLength) {
$(this).css({visibility:'visible'});
}
});
});
</script>
これらを実行させると以下のような感じになります。
スクリプト部分に関しては
————————-
var $setElm = $(‘ul li a’);
————————-
文字数カットを対象をリンク＜a＞タグに変更しただけで、他の部分についてはテキストのみの場合とまったく同じです。
この様なやり方でさまざまなテキスト要素に対して、長い文字列を任意の文字数でカットすることが簡単にできます。
jQueryで長い文字列を特定の文字数でカットする場合にぜひ。。。