一定の文字列を省略して[...]にするスクリプト[jQuery]

一定の文字列を省略して[...]にするというよくありそうなものですが、某プロジェクトの追加要件で挙がって書いたのですが、結局その要件は取り下げとなり、不要のスクリプトとなりました。せっかく書いたのでソースだけ公開します。

XMLから読み込む場合

もともとの要件はXMLを読みこんで一定の文字列を省略するというものだったので、XMLの読み込みのスクリプトを書きます。

ちなみに読み込んだときのHTMLは下記のようになるようにしています。

<dl>
<dt>日付</dt>
<dd><a href="ブログへのリンク">ブログのタイトル</a></dd>
</dl>

jQuery

jQuery(function($) {
	$.ajax({
		url: 'feed.xml',
		dataType: 'xml',
		cache: false,
		success : function(data){
			$("column",data).each(function(i){
				if( i == 4 ){ return false; }
				var title = $(this).find('title').text();
				var url = $(this).find('url').text();
				var date = $(this).find('date').text();
				var img = $(this).find('thumbnail').text();
				$('#feedHere').append('<dl class="blogText"><dt>' +date+ '</dt><dd><a href="' +url+ '">' +title+ '</a></dd></dl>');
				
				//あとでここに追加します。
			});
		},
		error : function(){
			$('#feedHere').append('<p>XMLファイルの読み込みに失敗しました。</p>');
		}
	});
});

これでXMLを読み込んで表示できるので、[...]にする処理を「//あとでここに追加します。」に追加するだけです。下記のような感じになります。

var blogTitle = [];
var showLength = 20;
for(var i = 0; i < $(".blogText dd").length; i++){
	blogTitle.push($(".blogText dd").eq(i).text());
	for(var j = 0; j < blogTitle.length; j++) {
		if( blogTitle[j].length > showLength){
			$(".blogText dd").eq(j).html('<a href="' +url+ '">' +blogTitle[j].substr(0, showLength) + '...'+'</a>');
		}
	}
}

合体[謎]させると下記のようになります。

jQuery(function($) {
	$.ajax({
		url: 'feed.xml',
		dataType: 'xml',
		cache: false,
		success : function(data){
			$("column",data).each(function(i){
				if( i == 4 ){ return false; }
				var title = $(this).find('title').text();
				var url = $(this).find('url').text();
				var date = $(this).find('date').text();
				var img = $(this).find('thumbnail').text();
				$('#feedHere').append('<dl class="blogText"><dt>' +date+ '</dt><dd><a href="' +url+ '">' +title+ '</a></dd></dl>');
				//[...]にする処理
				var blogTitle = [];
				var showLength = 20;
				for(var i = 0; i < $(".blogText dd").length; i++){
					blogTitle.push($(".blogText dd").eq(i).text());
					for(var j = 0; j < blogTitle.length; j++) {
						if( blogTitle[j].length > showLength){
							$(".blogText dd").eq(j).html('<a href="' +url+ '">' +blogTitle[j].substr(0, showLength) + '...'+'</a>');
						}
					}
				}
			});
		},
		error : function(){
			$('#feedHere').append('<p>XMLファイルの読み込みに失敗しました。</p>');
		}
	});
});

XMLの仕様は今回の仕様に合したものなのですのでご注意ください。

プラグイン化

せっかくなので、ブログタイトルの一定の文字列を処略して[...]にするスクリプトをプラグインにしてみました。ご使用の場合は適当なJSファイルに下記のソースをペーストしてください。

(function($) {
	$.fn.txtChgDot = function(options){
		var setting = $.extend({
			length : 15,
		},options);
		
		this.each(function(){
			var _txtTitle = [];
			var _txtAnchor = [];
			var _showLength = setting.length;
			for(var i = 0; i < $(this).length; i++){
				_txtTitle.push($(this).eq(i).text());
				_txtAnchor.push($(this).find('a').eq(i).attr('href'));
				for(var j = 0; j < _txtTitle.length; j++) {
					if( _txtTitle[j].length > _showLength){
						$(this).eq(j).html('<a href="' +_txtAnchor[j]+ '">' +_txtTitle[j].substr(0, _showLength) + '...'+'</a>');
					}
				}
			}
		});
	};
})(jQuery);

プラグインの実行

本プラグインの実行は以下のように。

$(function(){
	$(セレクタ).txtChgDot();
});

オプション

デフォルトで15文字以降を[...]にしていますので、文字数を変更する場合は下記のように指定してください。

$(function(){
	$(セレクタ).txtChgDot({
			length : 20
		});
});

最後に

せっかく書いたので、コードを晒したわけですが、CSS3でtext-overflowがあるので、活用の場面が少ないかもしれませんね。なんかこうしたほうがいいよーというのがあればコメントください。