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

ダウンロードはこちら

  関連記事

IE6でclearfixのためにoverflow:hidden指定するときの注意事項

要素をfloatしたときに、その親要素に overflow:hidden; を設定することは良くあると思います。その際は、Int…

Zemanta Related Posts Thumbnail
新機能で検索結果をカスタマイズ:ウェブ検索でもスター機能

Gooogleの検索結果が変わりましたね。 検索結果の上位に 「○○ のスター付き検索結果」 という項目が追加されています。 G…

HTML5_logo_and_wordmark.svg
HTML5で廃止予定の要素と属性

ブログなどを使って投稿すると、自動的に挿入されてしまうタグが多数ありますね。 現在でも推奨はされていないが、頻繁に使われているタ…

no image
ホームページ作成用語集:Flash

Adobe Flash、略してFlash。 アドビシステムズ (Adobe Systems) が開発した、動画などのリッチコンテ…

IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester

ホームページを公開するときに大切なのが、複数のブラウザで表示を確認すること。 Internet ExplorerFirefoxG…

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

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

no image
知らなくて損していませんか?

今日は、とっても暖かくて気持ちのいい一日でしたね。やっぱり寒いより暑い方が好きな白鳥です。 ★毎回好評の《初心者向けホームページ…

no image
tableレイアウトとCSSレイアウト

この業界にお世話になってから10年が経ちますが、HTMLのコーディング方法は、かなり変化してきました。 最初は、tableタグを…

Zemanta Related Posts Thumbnail
SEO対策するキーワードの選び方?メインキーワード編(2)

―知っておきたいSEO対策の基礎9 目次1 最初にコア用語を見つける2 前記事 最初にコア用語を見つける ブレインストーミングと…

CMS
★工務店さんのウェブサイトは施工事例がとっても大切。

日々、現場で作業をしていて施工事例はたっぷりあるけれど、自社サイトに最新事例をアップできていない。そんな会社様も多いと思います。…