javascript - jQueryのattr（）関数はhtmlをhtml特殊文字で分割しますか？

Question

次のコードを見てください。

http://jsfiddle.net/htdTg/2/

<最初のリンクには、html特殊文字とそれに続く「！」を含むtitle属性があります。（実際にどの文字が続くかは関係ありません）。jQueryのattr（）関数を使用してそのtitle属性の値を取得すると、htmlが壊れます（次のテキストも欠落している限り、「<」文字が出力されないことがわかります。

2番目のリンクでの唯一の違いは、後にスペースを追加した<ことです。これで、期待どおりに機能します。

それはjQueryのバグだと思いますか、それとも私は何かを理解していませんか？

PS。私が何か奇妙なことをしていると思うなら、それはツールチッププラグインからのコードの一部にすぎません。

HTML：

<a href="#" title="<div style='color:red'>This is the less than sign: &lt;! Now you know it?</div>">This is a link</a><br>
<a href="#" title="<div style='color:red'>This is the less than sign: &lt; ! Now you know it?</div>">This is a link</a><br>​

jQuery：

$('a').each(function() {
    $('body').append($(this).attr('title')); });

// just to exclude that it's append() function's fault :)
$('body').append("<div style='color:red'>This is the less than sign: &lt;! Now you know it?</div>");​

Answer 1

これはかなり面白いです。title属性に含めることができるテキストを調べたところ、参照には次のように書かれています。

ユーザーエージェントは、属性値を次のように解釈する必要があります。

1. 文字エンティティを文字に置き換え、
2. 改行を無視し、
3. 各キャリッジリターンまたはタブを1つのスペースに置き換えます。

どうやら、これは予想される動作です。<ブラウザによって解析され<ています。ブラウザはjQueryによってHTMLとして解釈される可能性があります。

アンパサンドもエスケープする必要があります。

<

デモ： http： //jsfiddle.net/htdTg/9/

さらに優れたデモ：http：//jsfiddle.net/PsZeY/6/

Answer 2

なぜそれが起こっているのですか？

これは、&lt;! Now you know it? </div>に変換されるために発生しています<! Now you know it? </div-->

<!HTML標準によると、コメント構造>の開始と終了です。これはコメントではなくコメント構造であることに注意してください。したがって、browwerは、終了区切り文字を取得しない限り、残りをコメントとして変換します。>

W3Cから

<!-- this is a comment -->
<!-- and so is this one,
    which occupies more than one line -->

マークアップ宣言のopendelimiter（<!）とコメントのopen delimiter（ ）の間に空白は使用できませんが--、コメントのclose delimiter（--）とマークアップ宣言のclose delimiter（ ">"）の間に空白を入れることはできます。---一般的なエラーは、コメント内にハイフン（）の文字列を含めることです。著者は、コメント内に2つ以上の隣接するハイフンを入れないようにする必要があります。

ここにも

SGMLでのコメント宣言の構文は次のとおりです。

 comment declaration =
    MDO ("<!"), (comment, ( s | comment )* )?, MDC (">")
 comment =
    COM ("--"), SGML character*, COM ("--")

それを解決する方法は？

あなたはすでにそれを知っています。&を置き換えるために使用し&ます。したがって、<!の代わりに記述し<!ます。これにより、コメント構造のオープニングでは<なく、body要素に追加されます。<!

Answer 3

この場合...

title="<div style='color:red'>This is the less than sign: &lt;! Now you know it?</div>"

<!HTMLコメントの開始点であるに変換さ<!れ、ブラウザウィンドウに表示されない理由が正確に示されます。

いずれの場合も、属性内にHTMLエンティティを含めるべきではありません。代わりにこれを使用してください...

title="<div style='color:red'>This is the less than sign: <! Now you know it?</div>"

http://jsfiddle.net/htdTg/5/

HTMLエンティティを保持する場合は、を使用<div>して処理され<div>ます。または、<div>実際にはブラウザウィンドウでレンダリングされます。 <div>

参照： http： //jsfiddle.net/htdTg/8/

したがって、ブラウザに実際にを表示させたい場合は<!、次を使用します。&lt!

Answer 4

質問をしているだけなのか、実際に問題の解決策を探しているのかはわかりません。後者の場合、奇妙なことに、これはうまく機能しているようです。<

更新されたコード：

HTML：

<a href="#" title="<div style='color:red'>This is the less than sign: &amp;lt;! Now you know it?</div>">This is a link</a><br>
<a href="#" title="<div style='color:red'>This is the less than sign: &amp;lt; ! Now you know it?</div>">This is a link</a><br>​

jQuery：

$('a').each(function() {
    $('body').append($(this).attr('title')); });

// just to exclude that it's append() function's fault :)
$('body').append("<div style='color:red'>This is the less than sign: &lt;! Now you know it?</div>");​

更新されたフィドル：http：//jsfiddle.net/htdTg/3/

Answer 5

テキストが欠落していないという問題は、コメントが開始される<!のと同じで<!あるためにコメントが付けられることです<!--（理由はわかりません）html。

HTMLを調べると、次のように表示されます。

<div style='color:red'>This is the less than sign: <!-- Now you know it? --></div>
<div style='color:red'>This is the less than sign: < ! Now you know it?</div> 

Answer 6

本当に悪いことは何もありません。

問題は、属性内のhtmlをエンコードする必要があることです。はすでに<asをエンコードして<おり、これはとして読み取られることを意味します<。

したがって、エンコードされたものではなく、.attr() 純粋な文字を返します。<

表示されない理由は.append、htmlが含まれていると判断した場合にhtmlを解析しようとするためです。<!テキストを検索し、htmlコメントと見なします。 実際、これはブラウザによって直接行われます。

---

あなたが見れば

var e = document.createElement('div');
e.innerHTML = '<!';
console.log(e.innerHTML);

<!に設定した後のdivの内部HTMLが。であることがわかります<!---->。

これが、ブラウザがこのコードを解釈する方法です。jQueryとは何の関係もありません。