TopJavaScript > JavaScript で文字をトリミングする
2006年12月 4日

JavaScript で文字をトリミングする

Posted at December 4,2006 1:50 AM
Category:[JavaScript]
Tag:[, ]

JavaScript で文字をトリミングするJavaScript を用いてエントリータイトル等の文字をトリミング(指定した文字数だけ表示する)するカスタマイズです。

以前、「Movable Type のようなトリミングを、他のブログで実現できないでしょうか」というご質問の回答です。大変遅くなりましたが、このエントリーで回答に替えさせて頂きます。

ここでは文字数でトリミングする方法を紹介していますが、半角・全角が混在している場合のサイズを調整したい場合は、下記のエントリーを参照ください。

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

とりあえず「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;
      if(str.length > size){
        elements[i].innerHTML = str.substring(0, size) + rest;
      }
    }
  }
}
</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 属性名で指定

具体的な起動方法は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 トリミング後の文字列
Posted by yujiro
関連記事
人気エントリー
トラックバックURL


トラックバック

Javascriptの読まれるタイミングと実行のタイミング from nakawake.oops!
こんにちは、なかわけです。 昨日、仕事で発見した(というか仲間と話してて見つけた... [続きを読む]

Tracked on February 11, 2007 2:42 AM
コメントする

*必須



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

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

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

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

Now loading...
Entry Trackbacks
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!