勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

htmlタグが入った内容の文字を丸める

      2014/07/03

phpである文字列が○文字以上だった際、

省略してお尻に「……」をつけたいという場合、

mb_strimwidth($str,開始位置,終了位置,'丸めたあとの文字')

を最近使う。

■リファレンス

http://jp2.php.net/mb_strimwidth

ただ、今日困ったのがhtmlタグが入っている変数を

出力した際にちゃんと文字を丸めてくれない。恐らくタグの部分もカウントされているからっぽい。

で、やりたい事は、

・文字を丸めたい

・aタグやfontタグはほっといて文字列だけ丸めたい

というもの。

悩んだ結果PHPで出力したものをjQueryで読み込んで

指定文字以上なら書き換えるということで解決した。

■ソース

<?php
error_reporting(E_ALL & ~E_NOTICE);
extract($_REQUEST);
$str = '<p><font size="3" color="red"><a href="http://taitan916.hateblo.jp/" target="blank">リンクリンクリンクリンク</a></font></p>';
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transtional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html"/>
<meta cherset = "UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
var str = $('#str').text();
alert(str);
if (str.length > 5) { //丸める対象の文字が5文字以上なら
$('#str').text(str.substring(0,5) + "…"); //丸めて後ろに…を付ける
}
});
</script>
<html lang="ja">
<head>
<title>文字を丸める</title>
</head>
<body>
<h1>文字を丸める</h1>
丸められない。途中でタグがとれて変になる。⇒<?php // echo mb_strimwidth($str,0,5,'…');?><br>
<span id="str"><?php echo $str;?></span>
</body>
</html>

 - jQuery

  関連記事

jquery_logo
POP広告をjQueryで再現する方法

サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...

jquery_logo
jQueryプラグインの作成

面白そうだったのでメモ。 ■参考サイト http://www.entacl.in ...

jquery_logo
jquery.cookie.jsでcookieを取り扱う

機能拡張の依頼があってそのページを見たら jquery.cookie.jsが読み ...

jquery_logo
jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...

jquery_logo
スマホ対応カルーセルスライダーslickの使い方

イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...

jquery_logo
画像をつなぎ合わせて360度ビューの様に見せるjQueryプラグイン

3Dデータではなく、コマ送りになっている2D画像を用いて360度ビューの様に見せ ...

jquery_logo
画像の登録フォームにてjQueryプラグインを用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

jquery_logo
jQueryで画像を遅延ロードする(jquery.lazyload.js)

画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...

jquery_logo
クリップボードの操作

<? /* クリックでクリップボードにコピーする。 http://zxcv ...

jquery_logo
lightboxをファイルアップロードなしで使う(CDN)方法

本番実装時ならともかく、テスト用とかでlightboxみたいによく使うプラグイン ...