Help us understand the problem. What is going on with this article?

ワードプレスのカスタムフィールドで文末の改行を削除する正規表現

More than 1 year has passed since last update.

課題

WordPressサイトの運用では、カスタムフィールドを使ってコーディング知識のない方に入力をしてもらうことがある。

使用しているプラグインは「Advanced custom field」
※参考 WordPressプラグイン「Advanced custom field」の基本的な使い方と用例

テキストタイプのカスタムフィールドでは、改行の反映方法を「フォーマット」から選ぶことができる。

 2018-10-19 13.30.55.png

通常 "Convert new lines into <br /> tags"を選ぶのだが、問題点が一つ。

入力者が文の最後に改行を付け加えてしまうことがあるのだ。Enterキーを余分に押してしまうようだ。

すると、勝手に改行タグが付け加えられるため下部の余白が大きく見えてしまいレイアウトが崩れることになる。

改行が1回ならまだしも、複数回改行が挿入されてしまうと空白が大きくなり見栄えが悪い。

文中の改行タグはそのままに、文末の改行のみ消すコードを考えた。

preg_replace('/(<br \/>\r\n)+$/', '', get_field('xxx', x));

実際はこんな感じで書く。

<p class="hoge"><?php echo preg_replace('/(<br \/>\r\n)+$/', 'a', get_field('xxx', x)); ?></p>

正規表現の解説

phpの関数 preg_replace を使っている。

第一引数 → 正規表現で置換したい文字列を特定
第二引数 → 置換後の文字列(今回は削除したいので空白)
第三引数 → 置換したい文字列(get_fieldで取得)

第一引数の正規表現の詳細を。

テキストフィールドで挿入される改行は<br />\r\n
単純にbrタグが出力されているのではなく、改行コードもくっついてた。

バックスラッシュが入るとわかりにくいが、本来は<br />改行コードが出力。
<br />の中の/(スラッシュ)が正規表現ではそのまま使えないのでエスケープのために\(バックスラッシュ)を付けて<br \/>

改行コードが\r\n

つまり<br \/>\r\n

これが1回以上繰り返されるので+をつけて(<br \/>\r\n)+

これを文末のみに適用したいので$をつけて(<br \/>\r\n)+$

最後に、正規表現の書き方のということで/で囲う。結果、/(<br \/>\r\n)+$/

感想

正規表現を使うのが久しぶりだったので、良い勉強になりました。

AntEgg
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away