質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

979閲覧

属性の\はいつエスケープされますか?

drl29

総合スコア4

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/09/16 19:33

発生している問題

\を含む属性値を取得すると\がエスケープされていました

\はjavascriptでは特殊な文字で\で\になります
つまりgetAttributeで属性値をjavascriptで取得する際どこかで\を\にエスケープしているのだと考察しました

.

そこから仕様をよみましたがエスケープにあたる工程がみつかりませんでした
https://dom.spec.whatwg.org/#dom-element-getattribute

該当のソースコード

html

1<div id="\hoge"></div>

javascript

1console.log(document.querySelector("div").getAttribute("id")); ->\hoge 2console.log("\hoge"); ->hoge 3//なぜ結果が違う? 4//getAttributeが\をエスケープしている?(仕様からは判断できず・・・)

よろしくお願いします.

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

document.querySelector("div").getAttribute("id") は「\hoge」という文字列を取得します。これは言うまでもなく、idの値が「\hoge」だからです。同様にdocument.querySelector("div").idでも「\hoge」が得られます。

次に、JavaScriptのコード上の "\hoge" から 「hoge」という文字列が得られる理由ですが、ご認識のとおり、 \ は次に続く文字を特殊な文字にするためのキーワードだからです。
たとえば "r" は特殊じゃないただの「r」ですが、 "\r" は特殊文字 CR (Carrige Return) を表しますね。 r の通常効果はただの「r」、特殊効果が CR という感じです。

では \ 自身はどうでしょうか。この文字は、通常効果が「次の文字を特殊にする」で、特殊効果が「次の文字を特殊にするのをやめて、ただの『\』になる」です。
"\r" を例に見ると、次のようになります

  • 1文字目の \ ... 次の文字を特殊にする
  • 2文字目の \ ... 特殊効果で、ただの「\」になった (1文字目のおかげで、次のrを特殊な文字にする効果を失った)
  • 3文字目の r ... 通常効果で、ただの「r」

となり、結果としてただの「\」とただの「r」が連なっただけの「\r」が得られます。

"\hoge" に話を戻しますが、上の例にならうとこんな感じです。

  • \ ... 次の文字を特殊にする
  • h ... 特殊効果を持たないので、ただの「h」が得られる
  • o ... ただの「o」
  • g ... ただの「g」
  • e ... ただの「e」

結果として、「hoge」が得られます。

<div id="\hoge"></div>\hoge がエスケープされない理由ですが、HTMLには「\は次の文字を特殊にする文字である」というようなルールがないからです。


コメントを受けて追記 Sep 17, 2019 9:37 pm

「"\hoge"という文字列をJSで取得すると"\hoge"と解釈されるようになる」という理解でよろしいでしょうか?

これは衝撃の事実なのですが、「文字列」と「文字列リテラル」は別物です。私の回答は意図的に、文字列はカギカッコ、文字列リテラルはダブルクォートで囲って示しています。
「\hoge」という文字列を取得する方法はいくらでもあります。下記の例はいずれも「\hoge」という文字列を取得してコンソールに表示するコードです。

html

1<div id="piyo" data-fuga="\hoge"></div> 2<script> 3 4// 例1 5const ex1 = document.getElementById('piyo').dataset.fuga; 6console.log(ex1); 7 8// 例2 9const ex2 = [92, 104, 111, 103, 101].map(c => String.fromCharCode(c)).join(''); 10console.log(ex2); 11 12// 例3 13const ex3 = '\hoge'; 14console.log(ex3); 15 16</script>

例1は、疑問と提示されたのと同様ですね。IDに入れるのは不適とのyoorwmさんのアドバイスを受けて、datasetに変えています。yoorwmさん、ありがとうございます。
例2は、文字コードから文字列を生成する String.fromCharCode() メソッドを使って、結果を連結しています。
例3は、文字列リテラルから文字列を生成しています。

「文字列リテラル」は文字列を生成するための記法であって文字列そのものではありません。例1と例2はそれぞれの結果として文字列を生成しているのであって、文字列リテラル "\hoge" に変換されているわけではありません。

投稿2019/09/16 20:05

編集2019/09/17 12:37
thyda.eiqau

総合スコア2982

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoorwm

2019/09/17 01:20

直接は関係無いけど追加で。 https://w3g.jp/xhtml/dic/id > ID名に使用可能な文字種は半角アルファベット(a-z|A-Z)、半角数字(0-9)、ハイフン(-)、アンダースコア(_)、コロン(:)、ピリオド(.)のみに制限されています。
drl29

2019/09/17 11:59

ご回答ありがとうございます >...は「\hoge」という文字列を取得します。 >HTMLには「\は次の文字を特殊にする文字である」というようなルールがないからです。 ということは、「"\hoge"という文字列をJSで取得すると"\hoge"と解釈されるようになる」という理解でよろしいでしょうか? そのまま文字列を取得するなら"\hoge"をJSで取得したとき"hoge"になると思ったのですが・・・
thyda.eiqau

2019/09/17 12:08

「"\hoge"という文字列をJSで取得すると"\hoge"と解釈されるようになる」という理解でよろしいでしょうか? これは違うと思いますね。"\hoge"と解釈されたから「\hoge」があるのではなく、文字列は「\hoge」なのです。文字列「\hoge」を表す文字列リテラルが"\hoge"です
guest

0

HTMLの中では\は特殊文字じゃないので、そのまま普通の文字として扱われて、
JavaScriptの文字列リテラルの中では\は特殊文字なので、\hhになったということでしょう。

投稿2019/09/17 01:36

otn

総合スコア84423

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

drl29

2019/09/17 12:00

ご回答ありがとうございます >・・・なったということでしょう。 私もそう考えているですが、文字列リテラルでは"\hoge" -> "hoge"なのに文字列(を返す関数)では"\hoge" -> "\hoge"となることの理由がわかりません
otn

2019/09/17 12:10

> 文字列リテラルでは"\hoge" -> "hoge" リテラルの"\hoge"はhogeという文字列ですよ。 リテラルの"\n"が\nという文字列じゃなくて改行文字なのと同じことです。 > 文字列(を返す関数)では"\hoge" -> "\hoge"となることの理由がわかりません \hogeという文字列を出力すると出力の仕方によってはエスケープされ、\hogeになります。 出力の仕方によっては\hogeのままです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問