TopJavaScript > 2006年12月
2006年12月 7日

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

December 7,2006 1:55 AM
Tag:[]
Permalink

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

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

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

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

Windows + IE6/Firefox 2 で実験した限りでは、全角・半角いずれも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].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 cutStringByClassNameAndTagName(className, tagName, size) {
  var elements = document.getElementsByTagName(tagName);
  for (i=0; i < elements.length; i++) {
    if (elements[i].parentNode.className == className) {
      var str = elements[i].innerHTML;
      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>

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

スクリプトを起動するため、2.1~2.4のいずれかの script 要素を 、トリミングしたい文字列の直後、または </body> の直前に追加します。

2.1 要素名+ class 属性名で指定

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

2.2 id 属性名で指定

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

2.3 id 属性名+ 要素名で指定

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

2.4 親要素の class 属性名+ 要素名で指定

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

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

3.サンプル

3.1 要素名+ class 属性名で指定

次の(X)HTMLマークアップ、

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

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

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

とします。

3.2 id 属性名で指定

次の(X)HTMLマークアップ、

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

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

cutStringById('hoge', 5);

とします。

3.3 id 属性名+ 要素名で指定

次の(X)HTMLマークアップ、

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

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

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

とします。

3.4 親要素の class 属性名+ 要素名で指定

次の(X)HTMLマークアップ、

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

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

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

とします。

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

トリミング後の追加文字列を変更するには、冒頭のリスト2 行目を他の文字に変更してください。何も表示させたくない場合は赤色部分を削除してください。

var rest = '...';

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

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

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

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

2008.08.03
cutStringByClassNameAndTagName を追加しました。

Comments [12] | Trackbacks [1]
2006年12月 4日

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

December 4,2006 1:50 AM
Tag:[, ]
Permalink

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 = '...';
Comments [0] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3