TopJavaScript > JavaScript で文字をトリミングする(改善版)
2006年12月 7日

JavaScript で文字をトリミングする(改善版)

Posted at December 7,2006 1:55 AM
Category:[JavaScript]
Tag:[]

JavaScript で文字をトリミングするJavaScript を用いてエントリータイトル等の文字をトリミング(指定した文字数だけ表示する)するカスタマイズです。前回の「JavaScript で文字をトリミングする」は文字数だけでトリミングしたものですが、今回の改善版はバイト数で計算します。全角はそのまま1文字として数え、半角英数は2文字(2バイト)を1文字としてカウントします。

左のスクリーンショットが5文字でトリミングしたサンプルです。上は全角のみなので5文字でトリミングし、下は半角を含むので計7文字でトリミングしています。

さらにスクリプトを修正すれば、特定の半角文字("M"とか"W"のような幅の広い文字)を全角として数えることも可能と思われます。完璧に横幅を揃えることはできませんが、かなり精度の良いトリミングができると思います。

今回も「id 属性名」と「要素名+ class 属性名」で指定したタグの中に記述された文字列をトリミングする、JavaScript を書いてみました。

Windows + IE6/Firefox 2 で実験した限りでは、全角・半角いずれも1文字で計算してトリミングしてくれるようですが、コードに不具合等ありましたらお知らせください。

1.スクリプトの追加

リスト 1.1 のリストを </head> の直前に追加します。外部ファイルでも構いません。

<script type="text/javascript">
var rest = '...';
function cutStringById(id, size) {
  var str = document.getElementById(id).innerHTML;
  if(str.length > size){
    document.getElementById(id).innerHTML = str.substring(0, size) + rest;
  }
}
 
function cutStringByTagNameAndClassName(tagName, className, size) {
  var elements = document.getElementsByTagName(tagName);
  for (i=0; i < elements.length; i++) {
    if (elements[i].getAttribute('class') == className ||
      elements[i].getAttribute('className') == className) {
      var str = elements[i].innerHTML;
      elements[i].innerHTML = trim(str,size);
    }
  }
}
 
function cutStringByIdAndTagName(id, tagName, size) {
  var element = document.getElementById(id);
  var elements = element.getElementsByTagName(tagName);
  for (i=0; i < elements.length; i++) {
    var str = elements[i].innerHTML;
    if(str.length > size){
      elements[i].innerHTML = trim(str,size);
    }
  }
}
 
function trim(str, size) {
  if(str.length > size){
    var cutstring = str.substring(0, size);
    var byte = countByte(cutstring);
    var tmp = "";
    if (byte < size*2) {
       for(k=0; k < (size*2-byte)*2; k++){
         tmp = str.substring(0,size + k);
         if (countByte(tmp) >= size*2) {
           break;
         }
       }
    }
    if(tmp){
      return tmp + rest;
    } else {
      return str.substring(0, size) + rest;
    }
  } else {
    return str;
  }
}
 
function countByte(str) {
  var byte = 0;
  for (j=0; j < str.length; j++) {
    str.charCodeAt(j) < 0x100 ? byte++ : byte += 2;
  }
  return byte;
}
</script>
リスト 1.1 トリミング用スクリプト

2.スクリプトを起動する

リスト 2.1 またはリスト 2.2 のいずれかを 、トリミングしたい文字列の直後、または </body> の直前に追加します。

要素名+ class 属性名で指定

<script type="text/javascript">
cutStringByTagNameAndClassName('[要素名]', '[class 属性名]', トリミングサイズ);
</script>
リスト 2.1 要素名+ class 属性名で指定

id 属性名で指定

<script type="text/javascript">
cutStringById('[id 属性名]', トリミングサイズ);
</script>
リスト 2.2 id 属性名で指定

id 属性名+ 要素名で指定

<script type="text/javascript">
cutStringByIdAndTagName('[id 属性名]', '[要素名]', トリミングサイズ);
</script>
リスト 2.3 id 属性名 + 要素名で指定

具体的な起動方法は3項をご覧ください。

3.サンプル

リスト 3.1 のようにHTMLマークアップされた文字列

<a href="http://domain.com/" class="hoge">文字をトリミングする</a>
リスト 3.1 サンプル1

の「文字をトリミングする」の文字を先頭から 5 文字だけ表示(「文字をトリ...」にする)する場合は、リスト 2.1 を利用し、その赤色部分を、

cutStringByTagNameAndClassName('a', 'hoge', 5);
リスト 3.2 サンプル2

とします。

リスト 3.3 のようにHTMLマークアップされた文字列

<p id="hoge">文字をトリミングする</p>
リスト 3.3 サンプル2

の「文字をトリミングする」の文字を先頭から 5 文字だけ表示(「文字をトリ...」にする)する場合は、リスト 2.2 を用い、その赤色部分を

cutStringById('hoge', 5);
リスト 3.4 サンプル2

とします。

4.トリミング後の追加文字列を変更する

リスト 1.1 の 2 行目(リスト 4.1 の赤色部分)を他の文字に変更してください。何も表示させたくない場合は赤色部分を削除してください。

var rest = '...';
リスト 4.1 トリミング後の文字列

5.特定の半角文字のバイト数を変更する

1項のスクリプトに青色のような行を追加します(間違ってたらすいません)。赤色部分は "0xXX" という、16進数を設定します。

function countByte(str) {
  var byte = 0;
  for (j=0; j < str.length; j++) {
    str.charCodeAt(j) < 0x100 ? byte++ : byte += 2;
    if(str.charCodeAt(j) == [該当文字の16進数]) byte++;
  }
  return byte;
}
リスト 5.1 特定の半角英数を全角文字と同じカウントにする

charCodeAt は指定した文字の Unicode を返却する関数です。JavaScript 1.2 と 1.3 で振る舞いが異なるようです。

2006.12.28 追記
id 属性名+要素名で検索できるコードを、リスト1.1 およびリスト2.3 に追加しました。

2007.02.15 追記
トリミング文字列が短い場合に正常に表示されない不具合を修正しました。

Posted by yujiro
関連記事
人気エントリー
トラックバックURL


トラックバック

サイドバーの文字数を制限する from OKANOWEB.NET
小粋空間さんのJavaScript で文字をトリミングするを参考に、私のブログの... [続きを読む]

Tracked on March 29, 2007 5:29 PM
コメント

以前質問したことを覚えて下すってたんですね。
ありがとうごさいます。
募金したいんですけどやり方がわからず、四苦八苦してます。

できればやり方を教えて頂けるとありがたいです。

[1] Posted by きくみ : December 27, 2006 12:21 AM

>きくみさん
こんにちは。
ご連絡ありがとうございました。
募金(ドネーションですね)の方法につきましては別途エントリーしたいと思います。
なお、本カスタマイズはHTMLタグの構造によってスクリプトを修正する必要があります。具体的にトリミングしたい部分を言って頂ければ、それに合うスクリプトを作成致します。
それではよろしくお願い致します。

[2] Posted by yujiro : December 27, 2006 12:36 PM

サイドバーの新着記事のタイトル(記事タイトル)を11?12文字(全角)で表示して、その後を
”。。。”としたく思ってます。

募金金額500円くらいしか出せないのですがいいですか?

[3] Posted by きくみ : December 27, 2006 11:58 PM

>きくみさん
こんにちは。
とりあえずご要望の機能をリスト1.1 とリスト2.3 に追加しましたのでお試しください。
リスト2.3 は下記のようにするとうまくできると思います。

<script type="text/javascript">
<!--
cutStringByIdAndTagName('最新記事list', 'a', 17);
//-->
</script>

ご寄付の有無や金額はご自由です。
それではよろしくお願い致します。

[4] Posted by yujiro : December 28, 2006 7:21 PM

指定した文字数以下のものが検出されるとその文字列がundefinedとなってしまいますがどのようにすればうまく表示されますでしょうか?

[5] Posted by oss : February 14, 2007 3:00 AM

>ossさん
こんにちは。
ご質問の件ですが、リスト1.1 を修正致しましたのでご確認頂ければ幸いです。
それではよろしくお願い致します。

[6] Posted by yujiro : February 15, 2007 3:03 PM

はじめまして。
おォっと思い使わせていただこうとテストしてみましたが。
指定しているフォントサイズが反映されなくなりました。
以上です。

[7] Posted by りか : February 20, 2008 5:36 PM

>りかさん
こんにちは。
情報ありがとうございました。
ではでは!

[8] Posted by yujiro Author Profile Page : February 21, 2008 12:05 AM

こんばんは。
フォントサイズの件ですが、FireFox2では指定した文字サイズで表示されるのですが、IE7だと最大サイズになってしまいます。
では、ご報告まで

by りか

[9] Posted by りか : February 21, 2008 2:35 AM

>りかさん
こんばんは。
たびたびのご連絡、ありがとうございました!

[10] Posted by yujiro Author Profile Page : February 21, 2008 11:11 PM
コメントする

*必須



お知らせ:2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

太字 イタリック アンダーライン ハイパーリンク 引用

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)

Now loading...
Entry Trackbacks
サイドバーの文字数を制限する
 [OKANOWEB.NET] 03/29 17:29
Entries of this Category
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!