タイトル属性の二重引用符をエスケープする方法


195

アンカーのタイトル属性に二重引用符を含む文字列を使用しようとしています。これまでのところ、私はこれらを試しました:

<a href=".." title="Some \"text\"">Some text</a>
<!-- The title looks like `Some \` --!>

そして

<a href=".." title="Some &quot;text&quot;">Some text</a>
<!-- The title looks like `Some ` --!>

単一引用符の使用はオプションではないことに注意してください。


18
@Haimは質問を読んで…「単一引用符はオプションではない」と書いてあります。
Nils Riedemann、2009

2
@harpax-なぜ単一引用符が選択肢にならないのか気になっただけですか?
Bert F

3
単一引用符は有効なhtmlではありません。
スカイフット

1
2番目の例は完全に機能するはずです。どのブラウザで問題が発生していますか?
Olly Hodgson

1
@harpax:「単一引用符はオプションではない」という要件を明確にする必要があるかもしれません。「 'the'文字列内」の一重引用符はオプションではない(ユーザーに表示される)とは思いませんが、Haimが上で示したように一重引用符と二重引用符を反転するだけで問題ありません。
Christian.K

回答:


284

このバリアント-

<a title="Some &quot;text&quot;">Hover me</a>

正しく、期待どおりに機能します-レンダリングされたページに通常の引用符が表示されます。


うん。<a href="#" title="Foo &quot;Bar&quot;">Testing</a>そして<a href="#" title="Smart quotes &#8221;Bar&#8220;">Testing too</a>私のために働きます。
Olly Hodgson

5
@Maris:まあ...&quot;を作成すると、レンダリングされたページに通常の引用符が表示されません。(Firefox、Chrome)。どうして?
Krzysztof Trzos 2013年

@マリス、ここで同じ問題。テキスト「&quot;」を参照してください ユーザーが要素の上にマウスを置くと、IEとChromeの両方に表示されます。
rstackhouse 2013

属性内に埋め込まれたhtmlコンテンツで驚くほど機能しました(JavaScriptが編集可能なテキストエリアを作成するため):data-editable-note="<?php echo str_replace('"', '&quot;', $note); ?>"><?php echo mark::up($note); ?></div>
WEBjuju

23

次に、archive.orgのキャッシュページから取得し HTMLエスケープ文字のスニペットを示します。

&#060   |   less than sign  <       
&#064   |   at sign @       
&#093   |   right bracket   ]       
&#123   |   left curly brace    {       
&#125   |   right curly brace   }       
&#133   |   ellipsis    …       
&#135   |   double dagger   ‡       
&#146   |   right single quote  ’       
&#148   |   right double quote  ”       
&#150   |   short dash  –       
&#153   |   trademark   ™       
&#162   |   cent sign   ¢       
&#165   |   yen sign    ¥       
&#169   |   copyright sign  ©       
&#172   |   logical not sign    ¬       
&#176   |   degree sign °       
&#178   |   superscript 2   ²       
&#185   |   superscript 1   ¹       
&#188   |   fraction 1/4    ¼       
&#190   |   fraction 3/4    ¾       
&#247   |   division sign   ÷       
&#8221  |   right double quote  ”       
&#062   |   greater than sign   >   
&#091   |   left bracket    [   
&#096   |   back apostrophe `   
&#124   |   vertical bar    |   
&#126   |   tilde   ~   
&#134   |   dagger  †   
&#145   |   left single quote   ‘       
&#147   |   left double quote   “   
&#149   |   bullet  •   
&#151   |   longer dash —   
&#161   |   inverted exclamation point  ¡   
&#163   |   pound sign  £   
&#166   |   broken vertical bar ¦   
&#171   |   double left than sign   «   
&#174   |   registered trademark sign   ®   
&#177   |   plus or minus sign  ±   
&#179   |   superscript 3   ³   
&#187   |   double greater-than sign    »   
&#189   |   fraction 1/2    ½   
&#191   |   inverted question mark  ¿   
&#8220  |   left double quote   “   
&#8212  |   dash    —   

9

&#34;代わりにエスケープコードを使用することもでき&quot;ます。


3

使用するの&quot;がその方法です。2番目のコードスニペットを試しましたが、FirefoxとInternet Explorerの両方で動作します。


2

HTMLエスケープ文字リストのどの文字でも機能しますが、Javaプロジェクトでも同じ問題が発生しました。私が使用StringEscapeUtils.escapeHTML("Testing \" <br> <p>")してタイトルでした<a href=".." title="Test&quot; &lt;br&gt; &lt;p&gt;">Testing</a>

StringEscapeUtilsをに変更し、StringEscapeUtils.escapeJavascript("Testing \" <br> <p>")すべてのブラウザで機能するようにした場合にのみ機能しました。


私の意見では最良の解決策
Mohammed Rafeeq 2014年

Javaを使用している場合は問題ありませんが、元の照会者がHTMLを要求しているため、おそらくこれはオプションではありません。
Paul

1

一重引用符を使用しても機能しない状況が少なくとも1つあります。それは、JavaScriptから「オンザフライ」でマークアップを作成する場合です。文字列を含めるには一重引用符を使用し、マークアップ内のプロパティにはその値に二重引用符を付けることができます。


1

おそらく、JavaScriptを使用してクロスブラウザーの問題を解決できます。別のエスケープメカニズムを使用しています。

(reference-to-the-tag).title = "Some \"text\"";

HTML、JavaScript、CSSの機能が厳密に分離されているわけではありませんが、現在のユーザーが望んでいる方法とは異なりますが、誰を幸せにする必要がありますか?知らないユーザーや技術者?


目的の結果がはるかに簡単な方法で達成できる場合の過剰。
Paul

-3

このPHPコードを使用して、特殊文字をリストできます...

<table border="1"><?php for($i=33;$i<9000;$i++)echo "<tr><td>&#38;#$i;<td>&#".$i.";"; ?></table>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.