htmlタグを削除や表示文字数制限してHPのTOPニュースなどで記事内容の概要を表示する

実現すること

HPによくあるTOPニュースで記事内容の概要が書かれている。

↓こんな感じで内容が長いと「...」とかなるところ

今回はこれを表示できるようにしたい。

モデルの状態とか対策なしの場合の状況

Articleモデルのcontentカラムにhtml文で記事内容を保存しています。

irb(main)> article.content
=> "<p><img aaa.jpg\" /></p>\n\n<p>テスト１テスト１テスト１テスト１テスト１テスト１テスト１テスト１テスト１テスト１テスト１テスト１テスト１テスト１テスト１テスト１テスト１テスト１テスト１テスト１テスト１</p>\n"

なのでこのまま表示させると

↑まあこうなりますよね

方法

まずはHTMLタグを消しちゃいましょう

strip_tagsメソッドを使えば消えるらしい！

strip_tags('html文')

今回はArticleモデルのcontentを引数にします

strip_tags(article.content)

↑↑こんな感じ。

すると、、、、

HTMLタグを消すことができました。

次は文字数制限です。
これはヘルパーメソッドのtruncateメソッドを使います。

truncate('文字制限したい文書')

デフォルトは30字の制限なので、記事の概要を載せるには短すぎるかなと感じたので今回はオプションで80字以内にしておきます。

truncate('文字制限したい文書',length: '文字数')

使ってみます。

truncate(strip_tags(article.content),length: 80)

文字制限できました！

ちなみにに:omissionオプションを使えば省略された文字列の後ろにつける文字列が変更できます。

truncate('文字制限したい文書',omission: '(使いたい文字)')

細かい仕上げ

html文で内容によっては複数の空白行いれるとタグを上記の方法でhtmlタグを消しても半角スペースが残ってしまい、このまま表示してしまうと半角を含めた記事概要が表示されてしまいます。

irb(main)> article.content 
=> "<p>&nbsp;</p>\n\n<p>&nbsp;</p>\n\n<p>&nbsp;</p>\n\n<p>&nbsp;</p>\n\n<p>&nbsp;</p>\n\n<p>&nbsp;</p>\n\n<p>&nbsp;</p>\</p>\n\n<p>&nbsp;</p>\n..."

改行が複数含まれたcontent

どのように表示されるかと言うと、、、

空白が含まれてしまっています。

ディベロッパーツールで覗くと、、、

半角が残ってますね

これを最後に消して見栄えをよくして終わりにしようと思います。

gsubメソッドを使って半角スペースを検索してそれを全て「""」に置換したら全部消せそうです。

str.gsub(pattern, replacement)

先ほど文字制限のために書いたコードに足します。

truncate(strip_tags(article.content).gsub("\u00A0", ""),length: 80)

\u00A0は&nbspの文字コード

消せました！！

最後に使い回し用にヘルパーメソッドにして定義しときます

#記事内容のHTMLタグと空白を除去する
    def article_content(article)
        truncate(strip_tags(article.content).gsub("\u00A0", ""),length: 80)
    end