2018-05-14

PHPとjquery、それぞれでテキスト文字数省略

web wordpress

PHP、jqueryを使ったhtml上のテキストに文字数を設定して省略する処理。

どちらも使いそうで使わない感じの処理ですけど、まぁたまに必要になったりするんで。

PHPではこう書いてる

PHPではmb_substr()を使ってテキストの文字数を指定して呼び出すことができます。

僕がよくwordpressなんかで記事一覧でthe_content()の文字数を処理する時はこんな感じです↓

<?php  // 文字数の上限設定する場合
$content_str = strip_tags( $post->post_content ); // テキスト取得
$content_str = preg_replace("/(\015\012)|(\015)|(\012)/", "", $content_str); // 改行を削除
$content_str = preg_replace('!\s+!', " ", $content_str); // スペースを削除
$content_str = preg_replace("/&[a-zA-Z]{1,5};/", " ", $content_str); // 半角英字に変換
$content_str = preg_replace("/&#[0-9]{1,5};/", " ", $content_str); // 半角数字に変換
$len_c = mb_strlen($content_str); // コンテンツ文字数
$len_c_max = 80; // 上限文字数
$extention = '･･･'; // 末尾に付ける文字
if($len_c>$len_c_max) {
    $content_str = mb_substr($content_str,0,$len_c_max); // 文字抜き出し
    $content_str = $content_str.$extention; // 末尾に付与
};
?>

みたいな感じのをjqueryでもやってみよう。

jqueryではこんな感じ

これを作ったきっかけはあんまり覚えていないんですけど、wordpressではなくjsで処理したいってことになって作ったような気がします。

動的に読み込んだテキストとかはPHPじゃ読み込めないですもんね。多分その時です。

/*==========================
    テキスト文字数省略
==========================*/

textNum($("#object"), 80, "…"); //(オブジェクト, 文字数, 省略した際のテキスト挿入)

function textNum($Elm, cutFig, afTxt){
    $Elm.each(function(){
        var txtLng = $(this).text().length;
        var txtCut = $(this).text().substr(0, (cutFig))
 
        if(cutFig < txtLng) {
            $(this).html(txtCut + afTxt).css({visibility: "visible"});
        } else if(cutFig >= txtLng) {
            $(this).css({visibility: "visible"});
        }
    });
}

関数化してしまえば簡単にいろんなところで使えるようになります。

このtextNum($("#object"), 80, "…");書き方を見てもらえたらわかると思いますが、
textNum($Elm, cutFig, afTxt)でいう
$Eleが文字数省略処理をするelementを指定
cutFigが省略する文字数の指定
afTxtが省略した後のテキストの指定
3点が引数の役割です。

substr(0, (cutFig))が全部解決してくれる感じですね。

さっきも言いましたが、wordpressのような記事の一覧などを使うページなんかで使われる処理だと思います。

この関数ですが、処理の説明でお世話になったのが以下の記事です。

black-flag.net

先人の知恵はとても偉大です。

こちらの記事の方で詳しい処理の説明をしてくださっています。
とてもわかりやすいので是非に一瞥いただければと。