jquery - なぜ $('
').text(値).text(); HTMLをエスケープしませんか？

Question

html のエンコードとデコードがブラウザーと jQuery でどのように機能するかを理解しようとしています。$('<div/>').text(myString)関数が < と > およびその他のいくつかの文字を適切な html エンティティにエンコードすることを理解しています。したがって

"<a>" =>"&le,a&gt;"

しかし、次のように text() に別の呼び出しを適用するとどうなるでしょうか。

$('<div/>').text(myString).text()

これとは対照的に、これは文字列をもう一度デコードするようです:

$('<div/>').text(myString).html()

何故ですか？text() の 2 回目の呼び出しで html エンコーディングが破壊されるのはなぜですか? おそらく、どのコンテキストがどのようにエスケープされているかについての私のメンタルモデルは間違っています。ありがとうございました。

score 2 · Accepted Answer

jQueryを使用して要素またはノードのテキストを取得するに.text()は、DOMプロパティ.textContentまたは.innerText（ブラウザ/バージョンに応じて）jQueryの内部で使用し、ブラウザが返すものをすべて返します。

.text()定義上、HTMLを返すことは想定されていません。要素またはノードのテキストコンテンツのみを返すことになっています。子ノード（HTMLなど）がある場合.text()は、テキストノードの連結を返し、HTMLノードを除外します。

呼び出し.text(someText)てテキストを渡すと、jQueryは次のことを行います。

return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );

ここでは、テキストを受け取り、それを引数としてcreateTextNodeに渡すため、テキストはブラウザに直接渡され、単一のテキストノードに送られ、HTMLとして解釈されないことがわかります。

jquery - なぜ $('').text(値).text(); HTMLをエスケープしませんか？