JavaScriptでHTMLのエスケープ処理を行う方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでHTMLのエスケープ処理を行う方法について現役エンジニアが解説しています。エスケープ処理とは改行や、タブなどを文字列中で表現するための方法です。HTMLでは特別な記号を使ってエスケープ処理を実現しています。エスケープシーケンスの一覧を確認しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでHTMLのエスケープ処理を行う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでHTMLのエスケープ処理を行う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

エスケープ処理とは

エスケープ処理とは通常キーボードでは入力できない改行や、タブなどを文字列中で表現するための方法です。

エスケープ処理を使うと通常はコードの一部として解釈されるシングルクォーテーションやダブルクォーテーションを画面に表示できます。

また、文字コードを直接入力し、文字コードに対応した文字を画面に表示できます。
 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

HTMLのエスケープ処理を行う方法

HTMLでは特別な記号を使うことによってエスケープ処理を行います。

エスケープ処理の一覧は以下です。
 

エスケープ処理(エスケープシーケンス)一覧

使用文字 エスケープシーケンス後の意味
\b バックスペース
\t 水平タブ
\v 垂直タブ
\n 改行
\r 復帰
\f 改ページ
\’ シングルクオーテーション
\” ダブルクオーテーション
¥文字
\0 NULL文字
\xXX Latin-1文字(XXは16進数)
\uXXXX Unicode文字(XXXXは16進数)

これらの文字を文字列中に挿入することによって使用文字ごとのエスケープ処理が行えます。
 

実際に書いてみよう

それでは実際に書いてみましょう。

console.log("水平\tタブ");

console.log("垂直\vタブ");

console.log("改行\n改行\n\n改行\n");

console.log("復帰\r");

console.log("改ページ\f");

console.log("\'\'シングル\'\'クォーテーション\'\'");

console.log("\"ダブルクォーテーション\"");

console.log("¥マーク\\");

console.log("null文字\0");

console.log("latin-1文字\x48");

console.log("UNICODE文字\u0040");

以上のようにエスケープ処理を行うことによって文字列中に特殊な文字を記入できます。
 

まとめ

今回のJavaScriptによるエスケープ処理はいかがでしたでしょうか。

Webアプリを作っていくと、特殊な文字列を画面に表示したいことはたくさんあると思います。また、正規表現等と組み合わせることによりさまざまな表現が可能です。

エスケープ処理は様々な場面で活用できますので是非習得しておきましょう。
 

筆者プロフィール

黒木一志(くろきかずし)

TechAcademyジュニアのゲームアプリコースを担当しています黒木です。
現在は会社員としてシステムエンジニアをしております。

会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。

プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。
みなさんにプログラミングの楽しさをお伝え出来たらと思っております。何卒宜しくお願い致します。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。