Webエンジニアのメモ帳

技術的な話を中心に書いています。

【Thymeleaf】改行コードをhtmlの改行タグに変換する

技術メモ

Webサイトなどで、DBから取得したデータをそのまま表示することを考えます。

このとき、DBでは改行コードが\nや\rで保存されていることもあるかと思いますが、これをそのままhtmlで出力させても改行は行われません。

htmlでは改行は<br>で表されるからですね。

ビューにThyemeleafを使っている場合は、この改行コードから改行タグへの変換が簡単にできるので、その方法を説明します。

build.gradle

build.gradleを使っている場合は、dependenciesに依存ライブラリを記述していると思いますが、ここにthymeleaf-extras-nl2brを追記してください。

dependencies {
  implementation 'com.github.bufferings:thymeleaf-extras-nl2br:1.0.0'
}

pom.xmlなどを使っている場合も同様です。

Nl2brDialectを@Bean登録する

Nl2brDialectクラスのインスタンスを@Bean登録します。

import com.github.bufferings.thymeleaf.extras.nl2br.dialect.Nl2brDialect;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;

@Component
public class SampleConfig {
  @Bean
  public Nl2brDialect dialect() {
    return new Nl2brDialect();
  }
}

ビューの修正

まず、htmlファイルの冒頭に以下を記述します。

<html xmlns:th="http://www.thymeleaf.org" xmlns:nl2br="https://github.com/bufferings/thymeleaf-extras-nl2br">

つぎに、上で定義したnl2brを使うよう修正します。

たとえばコントローラー層からtextという変数を受け取っていて、それを表示したい場合は、以下のように記述します。

<p nl2br:text="${text}"></p>

このように書くことで、textに\nや\rなどの改行コードが含まれていたとしても、<br>に変換されて表示されます。