HTMLを表示・プレビューする方法
HTMLを入力してソースまたはプレビューを選ぶと、エスケープ表現と、空でない入力の文字数・セグメント数を確認できます。入力を省略した場合も空の内容として処理されます。
HTMLの内容を文字列として確認する場面
HTMLのタグを含む文字列を、解釈させずに内容として確認したいときに使える方法です。入力欄へHTMLを指定すると、ソースモードでは入力内容のエスケープ表現を確認できます。プレビューモードでは、入力したHTMLとエスケープ表現の両方が結果に含まれるため、元の文字列と表示用の表現を照らし合わせられます。結果には、空でない入力に対する文字数と、改行で区切られたセグメント数も含まれます。ここでのプレビューは、ブラウザーでHTMLを描画したり実行したりする機能ではなく、入力された文字列の表現を確認するためのものです。
入力とモードを選んで結果を見る手順
- HTML入力欄に確認したい文字列を入力します。入力を省略することもでき、その場合は空の値として扱われます。
- モードを選びます。エスケープ表現だけを見る場合はソースを、入力したHTMLとそのエスケープ表現を一緒に見る場合はプレビューを選択します。モードを指定しなければ、ソースとして扱われます。
- 実行して結果を確認します。入力が空なら、空の内容として正常に処理されます。空でない入力では、選択したソースまたはプレビューに応じた内容に加えて、文字数と改行で区切られたセグメント数が返ります。
- タグを文字列として読み取りたいときはエスケープ表現を確認し、入力元との対応も調べたいときはプレビューに含まれる二つの表現を見比べます。対応していないモードを指定するとエラーになるため、モードを手入力する場合はソースまたはプレビューを指定してください。
返された表現とカウントの読み方
結果の確認では、まず選んだモードが目的に合っているかを見ます。ソースの結果に含まれるエスケープ表現は、入力されたHTMLを別の表現で読めるようにしたものです。プレビューでは、入力されたHTMLそのものとエスケープ表現が返るため、二つの内容の対応を確認できます。文字数は入力全体の長さを把握する値で、セグメント数は改行で分かれたまとまりの数を示します。空の入力は正常に扱われますが、空でない入力を対象とする内容表示やカウントとは結果の扱いが異なります。期待した内容が見えない場合は、入力の有無とモードの選択を見直し、それでも別のモード値を指定しているなら対応する選択肢に戻します。
使用例
入力元のHTMLとタグを含むエスケープ表現の対応を確認するため、2行に分けた短い内容をプレビューで調べます。
「
東京
」を1行目、「駅」を2行目に置いたHTMLを入力し、プレビューモードを選択して実行します。結果には、プレビューで指定したHTMLとエスケープ表現が含まれ、空でない入力について文字数と改行で区切られたセグメント数も示されます。
制限事項
- プレビューが返すのは入力HTMLとエスケープ表現であり、ブラウザーによる描画やHTMLの実行結果ではありません。
よくある間違い
- ソースやプレビュー以外のモード値を入力するとエラーになります。モードを空欄にするか、対応するソースまたはプレビューを選んで再実行してください。
よくある質問
HTMLを入力しなくても使えますか？
入力欄を空のまま実行できます。その場合は空の値として正常に処理され、空の内容が扱われます。
プレビューモードはHTMLをブラウザーに表示しますか？
プレビューでは、指定したHTMLとエスケープ表現の両方が結果に含まれます。したがって、ブラウザーでの描画結果やHTMLの実行結果を確認する用途とは異なります。
モードを省略した場合や別の値を選んだ場合はどうなりますか？
モードを省略するとソースとして扱われます。ソースとプレビュー以外の値を指定した場合はエラーになります。