ソーシャル・マーケティング協会 代表理事 白鳥友康の公式ブログ。Facebook、Twitter、YouTube、LINEなど、ソーシャルメディアを活用、集客する方法を無料でお届け。

ソーシャル★マーケティングの教科書 改訂版

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万円で提供していた【ソーシャル・マーケティング認定コンサルタント養成講座】のエッセンスを凝縮した動画を無料プレゼントしています。

ダウンロードはこちら

  関連記事

no image
facebookファンページの投稿をTwitterへのツイートに連動

facebookのほうが文字数が多いので、若干、使いにくいかもしれませんが、やりたい人はこちらを参考にどぞ。 《参考記事》NPO…

HTML5のcanvasでランキング描画 – まつぼっくりんご

こうゆうのは後々使うときありますね。canvasはアイディア次第でいろいろと。 HTML5のcanvasでランキング描画 &#8…

Zemanta Related Posts Thumbnail
商品画像を拡大して魅せる

この拡大の方法はちょっと面白いかもhttp://www.cecile.co.jp/detail/3/CTCV1E000005/

no image
★4/18 ホームページ更新 共同作業会

ホームページを公開して、実際に更新を始めてみると思うように修正できないことが多いですよね。 そんなときはメールやホームページから…

2015-12-09 02.12.13
WebデザイナーにおすすめのiPhoneアプリ21

こりゃ便利! 助かるなぁ。 WebデザイナーにおすすめのiPhoneアプリ21 | Webクリエイターボックス http://w&hellip;

Zemanta Related Posts Thumbnail
★プロのウェブデザイナーに直接質問できるチャンスです

最近、熱帯魚を飼い始めた白鳥です(笑) 水草と熱帯魚を入れた水槽を見るとアルファ波が出て集中力がアップするそうですよ。 さて、ホ…

no image
「Firefox 4」は2010年後半にリリース予定

Firefoxの最新版がいよいよリリースみたいです。 今回のバージョンアップでは「HTML5以降のWeb標準技術への対応」をする…

no image
なぜカカクコムの最安店に注文が殺到しないのか

「最安値ではなくてもアマゾンで購入する」 ここに消費者の興味深い心理が含まれていますね。 「利用者は未知のショップに個人情報を登…

tour_1
jQueryを使ってサイトツアーを作る方法

これはいつか使いそう。 というか、必ず使いたい! jQueryを使ってサイトツアーを作る方法 – IDEA*IDEA…

Zemanta Related Posts Thumbnail
マウスオーバーの魅せ方

中央に三つならんでいる写真にマウスオーバーすると・・・ Ajaxをうまく活用してますね?jQuery使用のようです。