改行に手こずりました
phpファイルにて。
やりたかったことは、文字列の特定の箇所で改行することでした。
$text = "あいうえおかきくけこ"
を、ブラウザ上で
あいうえお かきくけこ
と表示させたいというものです。
改行させるためには改行コード！
$text = "あいうえお" . "\n" . "かきくけこ"
にすればいいのかと思い、下記の「2バイト文字を含む場合」を参考にさせていただいて書きました。
PHPで文字列の指定した位置に文字列を挿入する方法 - Qiita
preg_replace("/^.{0,5}+\K/us", "\n", $text)
第一引数部分よく分かっていません...！
そしてブラウザで確認すると...
そうです、改行されていませんでした。
使い方を間違えました。
改行コードとは
そもそも\nとは何でしょうか。
「\n、\r = 改行コード」と思っていましたが、違いました。
改行コード とは、ワードプロセッサ（ワープロ専用機）やコンピュータなどで、改行を表す制御文字である。日本では「改行コード」と総称する事が一般的。
制御文字の一種でした。
改行コードはLF、CR+LF、CRのことをいいます。
名前の由来について詳しく書かれています。
改行コードとそれにまつわるタイプライターのお話 | 株式会社グランフェアズ
タイプライターがかわいい。
「CR（キャリッジリターン）＝先頭へ戻る」
「LF（ラインフィード）＝行送り」
が視覚的によく分かりました。
サクラエディタの改行コードごとの矢印表示も納得です。
ソース上の改行は改行コード
改行コードをソース上で示したものが \n、\r、\r\n
という理解で私は落ち着きました。
ここでいう「ソース」とは、Chromeでウェブページを右クリックしたときの「ページのソースを表示」を選択したときのコードです。
「改行コードをソース上で示したもの」は\文字というエスケープシーケンスで表されています。
コンピュータシステムにおいて、通常の文字列では表せない特殊な文字や機能を、規定された特別な文字の並びにより表したもの。
Atomを使っていると忘れがちなのですが、前述したとおり、サクラエディタなどでは、改行のマークとして矢印が表示されます。
それが\n、\r、\r\nの代わりになっているのではないかと思いました。
「改行」を分けて考える
※色々読み漁ってもズバリな文章を見つけられなかったので半分推測です。
- enter（return）キー
\n、\r、\r\n<br>
これら3つの改行の働きを整理します。
enter（return）キー
テキストエディタにてenterキーを押すと改行されます。
改行される部分には、目には見えませんが、改行という制御コードが入っていると思われます。
htmlのコードを書いたときのタグの改行はページのソースに反映されます。
テキストの途中で改行させたくてenterキーを押しても、改行が反映されるのはページのソースです。
\n、\r、\r\n
phpで扱っている文字列などで意図的にソース上の改行をさせたい場合は \n を使います。
使うときは "\n" と、ダブルクォートで囲まないとそのまま文字として出てきてしまいますので注意です。
echo "あいう\nえお"; // OK echo 'あいう' . "\n" . 'えお'; // OK echo 'あいう\nえお'; // NG
使い所はソースコードを見やすくできる、ということ以外分かっておりません...。
<br>
ブラウザの表示上で改行させたい場合は <br> を使います。
こちらにまとまっています。
ブラウザで見やすくする！PHPで改行処理を行う方法 | TechAcademyマガジン
便利な nl2br() 関数と pre タグ
改行関連で覚えておきたいものを挙げます。
nl2br()
文字列内の \n、\r、\r\nを <br> に変換するphpの関数です。
$text = "あいう\nえお\nかきくけこ"; echo nl2br($text);
出力結果：
あいう えお かきくけこ
となります。
preタグ
<pre>～</pre>で囲まれた範囲のソースは 半角スペース・改行などがそのまま表示されるため、 <pre>タグは、HTMLソースやプログラムのソースコードをそのまま表示します。
「pre ＝ preformatted text」略で、日本語では「フォーマット（整形）済みのテキスト」という意味らしいので、ソースのまま表示させることができます。
下記のように 配列に対してvar_dump で表示させるときに使うと
$array = ["りんご", "みかん", "もも"]; echo "<pre>"; var_dump($array); echo "</pre>";
出力結果：
array(3) {
[0]=>
string(9) "りんご"
[1]=>
string(9) "みかん"
[2]=>
string(6) "もも"
}
配列が見やすくブラウザに表示されて便利なので無心で使っていました。
このときしか使わない pre タグ...ありがたいです。
デベロッパーツールの「Elements」と「ページのソース」の違い
かねてから少し違うと思っていたのでついでに調べてみました。
Chrome:デベロッパーツールのElementsでは、HTMLの特殊文字は実体参照・コード参照ではなく、実際の字として表示される - Dr.ウーパのコンピュータ備忘録
Chrome のデベロッパーツールの Elements では、Web ページの現在表示している状態の HTML (DOM エレメントツリー)を見ることができます。 DOMエレメントツリーは、”Web ページの現在表示している状態の HTML”であり、Web ページのソースコードを表示したものとは異なります。
そして、HTMLの特殊文字については、ソースコードに実体参照、コード参照で書くと、Elemrntsでは、ブラウザに実際に表示されている文字と同じように表示されます。
| ソースコード | Elements | ブラウザ |
|---|---|---|
| ♥ | ♥ | ♥ |
| ♥（※やってはいけない） | ♥ | ♥ |
ソースコードに「♥」と書くのはやってはいけない、と言われていますが、問題なく表示されたりするのは、ブラウザが気を利かせて解釈してくれるのでしょうか。
ソースコードに実体参照で書くと、Google検索結果のスニペットにも実体参照で出てきたりしたような...。
また別の機会に調べたいと思います。
最後に
同じ境遇の方がいらっしゃいました。嬉しい！
