2012-02-04 20 views
5

UPDATE:TimWollaがコメントしたように、ブラウザ固有の動作のようです - エスケープされていないバージョンをブラウザ間で確実に正規化する必要がありますか?jQuery .html()が自動的にhref属性をエスケープするのを防ぐには?

HTML:

<div id="test"><a href="#{one}">#{two}</a></div> 

JS:#{two}がいない間のhrefで#{one}が、エスケープされ

$('#test').html() 
=> <a href="#%7Bone%7D">#{two}</a> 

は注意してください。

文字列全体がunescapeよりも良い方法はありますか?

unescape($('#test').html()) 
=> <a href="#{one}">#{two}</a> 

ここでは例です:http://jsfiddle.net/kenn/n8veL/

+3

ブラウザ固有の問題のようです。 Googles v8 Engineではうまく動作します。 – TimWolla

+0

そのアンカーはテンプレートのようです。なぜテンプレートをDOMに解析していますか?テンプレートはソースコード(たとえばSCRIPT要素内)に保存し、JavaScriptで処理します(ブラウザでのみ解析*する*)。 –

+0

ティムウォーラ:ねえ!質問を更新しました... – kenn

答えて

0

とにかく要素にはJavaScriptを介した展開を行ってことするつもりなら、あなたは別の属性に「HREF」テンプレートを置くことができます。

<a href='#dummy' data-href='#{template}'>Hi</a> 

次に、データ属性から展開し、結果を実際の「href」にドロップします。

+1

うんざりしたアイデアのようですが、残念なことに私の場合は、同じテンプレートがいくつかの静的なページのためにサーバー側で共有され、サーバーロジック内のjsの動作が重複していると大変なことになります。 – kenn

+0

ああ、そうだよ。さて、おそらく 'unescape()'以外の良い回避策はありません。 – Pointy

1

まず、質問に対する信頼できる解決策があるかどうかは疑問です。根底にある理由は簡単です:Element.innerHTMLが非標準であり、ブラウザの実装のみに依存するためです。

信頼できるソリューションが必要な場合は、テンプレートの代わりにDOM操作を使用することをおすすめします。

+0

しかし、そのエスケープは "href"属性でのみ行われます。他の属性は同じように影響を受けません。 – Pointy

+0

@Pointy 'href'にURLが含まれていると思われるブラウザ(Firefoxなど)は、それをエスケープするブラウザがあります。そのため、表示されない文字はエスケープされます。しかし、私が言ったように、それはブラウザ固有のものであり、その動作を保証するための基準はありません。 – shinkou

+0

私が試したブラウザはありませんが、 "data-href"属性をエスケープしていません。結局のところ、テンプレートがどこに保持されているかは重要ではありません。もちろん、属性値にはHTMLメタキャラクタの問題が常に存在しますが、単純なテンプレートの場合は機能するはずです。 – Pointy

関連する問題