如何在 ID-Attribute 中存储 HTML-Markup？答案

【问题标题】：How to store HTML-Markup in the ID-Attribute?如何在 ID-Attribute 中存储 HTML-Markup？
【发布时间】：2012-06-19 20:53:27
【问题描述】：

我需要为每个链接动态显示一些带有 Java 脚本 (jQuery) 的文本。问题是文本也被格式化为 HTML，所以这会在后面的视图中造成一些问题。现在我将它存储在 ID 属性中，这是可行的，但只是没有嵌入的 HTML。

<?php
...
$desc = '<p style="color: red">some <span>data</span></p>';
echo '<a href="#" id="' . $desc . '">' . $key . '</a>';
?>

Ajax 请求是不允许的。有没有一种简单的方法可以达到这个目标？

【问题讨论】：

答案很简单：不要这样做。 HTML 标记包含大量不允许在 ID 中使用的内容。
这是对id属性的严重滥用

标签： javascript html store

【解决方案1】：

id 属性是最不适合的地方之一（必须是唯一的，不能包含所有字符）。改用 data- 属性（在 HTML5 中引入，但也适用于旧浏览器且不使用 HTML5 文档类型）：

<a href="#" data-desc="....">

如果你使用 jQuery，你可以通过 .data('desc') 访问它，在纯 JavaScript 中最便携的方式是使用 .getAttribute('data-desc')。如果您不需要支持旧版浏览器，您可以通过.dataset.desc 属性访问该值。

在任何情况下，您都需要确保在属性中插入动态数据时不会出现任何中断。为此目的使用htmlspecialchars()：

$desc = '<p style="color: red">some <span>data</span></p>';
echo '<a href="#" data-desc="' . htmlspecialchars($desc) . '">' . $key . '</a>';

【讨论】：

+1。 <body onload="..."> 呢？我觉得更糟的是……:)
唯一的小问题可能是他是否需要在 HTML5 以下进行验证
这是一个人为的问题。例如，添加 Facebook OpenGraph 标签也会导致您的 HTML 无效。
好的，使用 htmlspecialchars() 我将分解 HTML。但是如何用 Java-Script 将其转换回来？
不需要这样做。该函数对字符进行转义，因此在检索属性时，您将获得正确的数据，就像它们在转义之前一样。

【解决方案2】：

其他的cmets是绝对正确的。不要这样做。在id 属性中放置除某种标识符之外的任何内容都是不合适的。

话虽如此，我想我会让您知道您的代码失败的原因。您需要在您的数据上使用htmlspecialchars()，然后再尝试按您的意图使用它。这样，HTML 就不会被解释为 HTML……所有的 HTML 实体都将被转换为，因此您的属性值被解释为文本。 &lt; 变成 &lt;，&gt; 变成 &gt; 等等。如果您稍后提取值（使用 jQuery 或其他），您将获得预期的文本。

【讨论】：