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

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

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

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

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

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

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

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

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

1.スクリプトの追加

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

リスト 1.1 トリミング用スクリプト

<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>

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

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

要素名+ class 属性名で指定

リスト 2.1 要素名+ class 属性名で指定

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

id 属性名で指定

リスト 2.2 id 属性名で指定

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

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

3.サンプル

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

リスト 3.1 サンプル1

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

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

リスト 3.2 サンプル2

cutStringByTagNameAndClassName('a', 'hoge', 5);

とします。

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

リスト 3.3 サンプル2

<p id="hoge">文字をトリミングする</p>

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

リスト 3.4 サンプル2

cutStringById('hoge', 5);

とします。

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

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

リスト 4.1 トリミング後の文字列

var rest = '...';
関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

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

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

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

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

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