如何在标题属性中转义双引号

Posted 2023-02-16

【中文标题】如何在标题属性中转义双引号

【英文标题】：How to escape double quotes in a title attribute

【发布时间】：2011-04-14 17:52:10

【问题描述】：

我正在尝试在锚的标题属性中使用包含双引号的字符串。到目前为止，我尝试了这些：

<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 ` --!>

请注意，使用单引号不是选项。

【问题讨论】：

@Haim 阅读了这个问题......它说“单引号不是一种选择”。

@harpax - 我只是好奇为什么不能选择单引号？

单引号不是有效的html。

您的第二个示例应该可以完美运行。您在哪个浏览器中看到问题？

@harpax：也许你应该澄清“单引号不是一个选项”的要求。我猜你认为“在'the'字符串内”的单引号不是一个选项（显示给用户），但就像 Haim 上面显示的那样翻转单引号和双引号就可以了。

【参考方案1】：

这是从a cached page on archive.org 中提取的 HTML 转义字符的 sn-p：

&#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

【参考方案2】：

这个变种 -

<a title="Some "text"">Hover me</a>

是正确的，它按预期工作 - 您在呈现的页面中看到正常的引号。

【讨论】：

是的。 <a href="#" title="Foo "Bar"">Testing</a> 和 <a href="#" title="Smart quotes ”Bar“">Testing too</a> 为我工作。

@Maris ：嗯...我在渲染页面中没有看到正常的引号，当我制作 " （火狐，铬）。为什么？

@Maris，同样的问题。见文字“”当用户将鼠标悬停在元素上时，会同时出现在 IE 和 Chrome 中。

惊人地使用嵌入属性中的 html 内容（用于 javascript 生成可编辑的文本区域）：data-editable-note="<?php echo str_replace('"', '"', $note); ?>"><?php echo mark::up($note); ?></div>

【参考方案3】：

也许您可以使用 JavaScript 来解决您的跨浏览器问题。它使用了一种不同的转义机制，你显然已经很熟悉了：

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

它并没有像现在人们希望的那样严格区分 HTML、JavaScript 和 CSS 的功能，但是你需要让谁满意呢？您不认识的用户或技术人员？

【讨论】：

当可以以更直接的方式实现所需的结果时，过度杀伤力。

【参考方案4】：

至少在一种情况下使用单引号是行不通的，那就是如果您正在从 JavaScript “动态”创建标记。您可以使用单引号来包含字符串，然后标记中的任何属性的值都可以使用双引号。

【参考方案5】：

使用" 是一种方法。我尝试了您的第二个代码 sn-p，它可以在 Firefox 和 Internet Explorer 中运行。

【参考方案6】：

也可以使用转义码"代替"。

【参考方案7】：

它可能适用于HTML Escape character list 中的任何字符，但我在Java 项目中遇到了同样的问题。我用了StringEscapeUtils.escapeHTML("Testing \" <br> <p>")，标题是<a href=".." title="Test" <br> <p>">Testing</a>。

仅当我将 StringEscapeUtils 更改为 StringEscapeUtils.escapeJavascript("Testing \" <br> <p>") 时它才对我有效，并且它在每个浏览器中都有效。

【讨论】：

我认为最好的解决方案

如果您使用的是 Java，那很好，但由于最初的询问者要求 HTML，也许这不是一个选项。