使用 Javascript 转义 HTML5 数据属性中的引号

新手上路,请多包涵

我正在使用 jQuery 的 .data() 来处理自定义 HTML5 数据属性,其中属性的值需要能够包含单引号和双引号:

 <p class="example" data-example="She said "WTF" on last night's show.">

我知道在数据属性值中使用像 &quot; 这样的字符代码可以使上述工作正常进行,但我不能总是控制这些值的输入方式。另外,我需要能够在标记中使用 HTML 标记,如下所示:

 <p class="example" data-example="
She said "<abbr title="What The F***">WTF</abbr>" on last night's show.
">

如果某种形式的 .replace() 是答案,那么它需要在 .data() 读取值之前完成——也许通过将它应用于整个 <body> -29-bcd?

<abbr title="te\'st">WTF</abbr> 这样的普通反斜杠转义也不起作用。

理想情况下,这将具有与两者一起工作的灵活性:

data-example="..."data-example='...'

但如果只有一种可能,那么我至少可以顺其自然。想法?

更新- 更多上下文:

我正在为 responsejs.com 做这件事。这个的实际应用可能是只为超过一定宽度的浏览器加载侧边栏(并在浏览器而不是 PHP 中处理)。以 WordPress 为例,侧边栏可以包含小部件、图像等。PHP 标记中的引号是一个非问题 b/c,它们在到达浏览器之前被解析为 HTML。例子:

 <aside id="primary" class="sidebar"

        data-oweb='

            <?php dynamic_sidebar( 'primary' ); ?>

        '
    >

    optional default markup for mobile and no-js browsers here

</aside>

原文由 ryanve 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 319
2 个回答

没有办法绕过它,您必须正确地转义值,否则 HTML 无法正确解析。你不能在解析后使用 Javascript 来更正代码,因为那样它就已经失败了。

使用正确的 HTML 编码的示例将是:

 <p class="example" data-example="She said &quot;&lt;abbr title=&quot;What The F***&quot;&gt;WTF&lt;/abbr&gt;&quot; on last night's show.">

您不能使用反斜杠来转义字符,因为它不是 Javascript 代码。您使用 HTML 实体来转义 HTML 代码中的字符。

如果您无法控制数据的输入方式,那么您就完蛋了。你只需要找到一种方法来控制它。

原文由 Guffa 发布,翻译遵循 CC BY-SA 3.0 许可协议

使用 encodeURI 转义 JSON 对象中的引号。使用 decodeURI 解析字符串。

 var popup = document.getElementById('popup'),
    msgObj = JSON.parse(decodeURI(popup.dataset.message));

console.log(msgObj);
 <a id="popup" href="#" data-message="%7B%22title%22:%22Print%22,%22message%22:%22Printing%20not%20yet%20implemented%22%7D" />

原文由 Dan Smith 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题