ホーム > HTMLを作成するときの細かい注意点

2015/04/09-04/18

HTML, 改行を表す文字コード

HTMLファイルやテキストファイルの改行文字コードの話です。
目次
  1. 先に要点:HTML ソーステキストの改行コード
  2. 改行文字, CR(carridge return), LF(line feed)
  3. サンプル
  4. いろいろ

先に要点:HTML ソーステキストの改行コード

HTML のソーステキストの改行コードは CR+LF、LF どちらでも構いません。
一応、LF 推奨という話もあります。

改行文字, CR(carridge return), LF(line feed)

テキストファイルで改行を表す文字コードには CR (carridge return, キャリッジリターン)と LF (line feed, ラインフィード) の2種類があります。 古くはタイプライターの時代までさかのぼり、 昔の慣習が現在のテキストファイルの改行にも残っています。

資料:改行コード
1)    2)     3)   説明
0x0D  CR     \r   キャリッジリターン。
0x0A  LF     \n   ラインフィード。行送り。

1) 文字コード、16進数 (HEX) の値
2) 略記でよく使われる表記
3) JavaScript の文字列で記述するときの表記

テキストファイルの改行コードは OS によっても異なります。 JavaScript などプログラムで処理するときにしばしば面倒な話になります。

改行
CR+LF : Windows や昔の MS-DOS のテキストファイル。電子メール、HTTP のリクエストヘッダー, レスポンスヘッダーなど
LF    : Unix, Linux, Mac OS X 以降のテキストファイル。
CR    : 昔の Mac (OS9まで)のテキストファイル。

例えば、Windows のメモ帳でテキストファイルを保存した場合は 改行コードは CR と LF の2文字になっています。

Windows のメモ帳で保存したテキストファイルをバイナリエディタで表示

改行コードは 0x0D (CR), 0x0A(LF)

適当なホームページの HTML ファイルを保存してメモ帳で開いたときに、 テキストの改行が反映されず1行で表示されるものがよく出てきます。 これは、改行コードが CR+LF ではなくて LF になっているためです。 Windows 用のテキストエディタでも LF のみの改行を認識できるものであれば正しく表示されます。

サンプル

サンプル

参考:HTML の &xxx; 表記

HTML でときどき出てくる表記
  &quote; や < のような表記と同じように 10進数や16進数で文字を表記できる。
  改行やタブなどは HTML で使うことはめったにない。

◎例
  10進数  16進数  1)    説明
  
   
  \r    CR   復帰
  
   
  \n    LF   行送り,改行
       \t    TAB  タブ
         \x20  スペース、半角の空白文字
  &   &  \x26  &    アンパサンド
  A   A  \x41  A    普通の文字

  1)JavaScript の文字列でエスケープで表記する場合
    普通の文字やスペースは参考程度。通常エスケープする必要がない。

◎資料
  文字参照
  スペース (文字)

JavaScript の文字列のエスケープ表記

◎JavaScript の文字列
・\ を文字として使う場合はエスケープし忘れに注意。\\ にすること。

  var s1 = "あうい\\123";   // \\ は \ を表す。
  var s2 = "あうい\n123";   // \n は改行を表す。
  var s3 = "あうい\r\n123"; // \r\n も改行を表す。
  var s4 = "name1\tvalue1";    // \t はタブを表す。
  var s5 = "name1\x20value1";  // 16進数2桁  \x20 は半角スペースを表す。
  var s6 = "\u3042";           // 16進数4桁  ユニコードの「あ」

◎正規表現
  s.replace(/\r/g, "");       // \rを除去。\rを空文字に置き換える。

  s.replace(/ +/g, "\t");     //連続するスペースをタブ1文字で置換
  s.replace(/\x20+/g, "\t");  //上と同じ。見間違いしないようにスペースを \x20 で明示。

サンプル:TestJS_string_escape01.html

テキストを行で分割

テキストファイルによって改行コードが異なるので、 行で分割する処理が面倒くさくなる。
工事中・・・

・近年のブラウザは、split(正規表現) いけそう説?。
  var array1 = text.split(/\r\n|\r|\n/);

  IE8 ぐらいまで空文字が要素から抜けるバグがあった。
  空行が意味を持つ場合に困る。

◎従来風
  var array1 = text.replace(/\r/g, "").split("\n");

・\r を除去した後で \n で分割。
  正規表現を使わないので昔の IE でも大丈夫。
・\r のみの改行のテキストには対応できない。
  遠い昔の Mac 系のテキストでまれにある。通常、気にせず・・・。

いろいろ

JavaScript 文字処理
目次
gorogoronyan@gmail.com
inserted by FC2 system