JavaScriptでマルチバイト文字列を決まった長さで省略する方法
投稿日時：
最終更新日時：2015/03/16 20:03
この記事は約 2 分で読めます。
大丈夫、あなたなら出来る！
ソーシャル・マーケティング協会 代表理事の白鳥友康です。
ブログの「続きを読む」みたいなことを、JavaScriptで実現する方法です。
デザインの都合でエリアに入力できる文字数が決まっていて
マルチバイトで○文字分みたいな切り出しをしたい場合があります。
でもマルチバイトとシングルバイトが混合している文字列の場合、
JavaScriptだと、これがなにげに難しかったりしますね。
そんなときはに役立つサンプルスクリプトです。
/**
文字列を省略する
@arg text 省略する文字列
@arg len 半角文字数で指定
@arg truncation 省略時の文字列
*/
function substr(text, len, truncation) {
var count = 0;
var str = '';
for (i=0; i
n = escape(text.charAt(i));
if (n.length < 4) count++; else count+=2;
if (count>len) {return str+truncation;}
str += text.charAt(i);
}
return text;
}
無料プレゼント
【Web担当者向け】SNS集客の全体像を55分で把握できる動画
受講料50万円で提供していた【ソーシャル・マーケティング認定コンサルタント養成講座】のエッセンスを凝縮した動画を無料プレゼントしています。
関連記事
-
-
本当の自己紹介
◆とあるセミナーにプチ講師として話しをする機会があり 自己紹介を見直しています。 そもそも自己紹介とは何なのか？ ということ…
-
-
本に出会う本屋
ボッサブックスhttp://www.bossabooks.jp/ メタファーを使ったインターフェイスは良くあるし、この手のものは…
-
-
リンクに良く使われている「>>」記号をHTMLで表示する方法
リンクの部分に「»」という記号を「>>」のように2文字ではなく、1文字で表示したい。 そんなときには。 …
-
-
IEの独占が崩れてきた
Net Applicationsの調査によると2010年5月の時点でIEのシェアが６割を切ったようです。 Firefox、Chr…
-
-
★工務店さんのウェブサイトは施工事例がとっても大切。
日々、現場で作業をしていて施工事例はたっぷりあるけれど、自社サイトに最新事例をアップできていない。そんな会社様も多いと思います。…
-
-
マウスオーバーの魅せ方
中央に三つならんでいる写真にマウスオーバーすると･･･ Ajaxをうまく活用してますね?ｊQuery使用のようです。
-
-
ホームページ作成用語集：GIFファイル（ジフファイル）
画像形式のひとつ。256色まで色を制限することでファイルサイズを小さくすることができる。 この特性から、写真など色数が多い画像に…
-
-
HTML5のcanvasでランキング描画 – まつぼっくりんご
こうゆうのは後々使うときありますね。canvasはアイディア次第でいろいろと。 HTML5のcanvasでランキング描画 …
-
-
HTML5で廃止予定の要素と属性
ブログなどを使って投稿すると、自動的に挿入されてしまうタグが多数ありますね。 現在でも推奨はされていないが、頻繁に使われているタ…
-
-
一億円の価値がある輪ゴム
写真をご覧ください。はい。ただの輪ゴムです（笑） 一億円で売っている輪ゴムではなく、一億円の価値を生み出す輪ゴムです。 では、な…