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

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

我知道使用像"这样的字符代码 在data属性值中可以使上述工作，但我不能总是控制值的输入方式。 另外，我需要能够在标记中使用HTML标记，如下所示：

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

如果某种forms的.replace()是答案，那么它需要在.data()读取值之前完成 – 可以通过在整个应用它吗？

正常的反斜杠转义如WTF也不起作用。

理想情况下，这将具有以下两种方式的灵活性：

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

但是，如果只有一种可能，那么我至少可以用这种方式。 想法？

更新 – 更多上下文：

我正在为responsejs.com工作 。 实际应用可能只是为某个宽度以上的浏览器加载侧边栏（并在浏览器而不是PHP中处理）。 例如，在WordPress的情况下，侧边栏可能包含小部件，图像等.PHP标签中的引号是非问题b / c它们在到达浏览器之前被解析为HTML。 例：

 <aside id="primary" class="sidebar" data-oweb='  ' > optional default markup for mobile and no-js browsers here  

Answer 1

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

使用适当的HTML编码的示例将是：

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

如果你无法控制数据的输入方式，那你就搞砸了。 你只需找到一种方法来控制它。

Answer 2

如果它们必须是带有" and '和诸如此类的HTML字符串，为什么不为它们制作单独的HTML元素： http ： //jsfiddle.net/N7XXu/ 。

例如HTML：

 
a
 
She said "WTF" on last night's show. 

结合以下JavaScript：

 $('.example').each(function() { var correspondingElem = $('.example-data[data-which="' + $(this).data('which') + '"]'); $(this).data('example', correspondingElem.html()); }); alert($('.example').data('example')); 

当然，隐藏.example-data元素。

Answer 3

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

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

Answer 4

因为它是正确的HTML，你必须逃避麻烦的角色。 我用HTML实体逃脱它们。 这意味着无论使用什么工具输入这些信息都必须正确存储它们和/或在后端检索它们的工具必须逃避它们。

然后，如果你想在你的JS中使用它们，你必须运行一些查找和替换函数来将字符转换回HTML和引号。

大多数后端开发语言都有某种“htmlescape / unescape”function，所以这不应该很难。

要通过jQuery来解决这个问题，可以通过快速的Google找到它： http ： //www.naveen.com.au/javascript/jquery/encode-or-decode-html-entities-with-jquery/289

Answer 5

这是我创建的一个简单工具，可用于编码html：

诀窍是逃避它两次。

我添加了一个额外的\ n替换来保留多行文本，因为它被text（）丢弃。

此外，您需要转义引号以使其对数据属性安全。

这应该创建一个数据属性安全字符串。

你可以在这里测试一下： http ： //jsfiddle.net/SplicePHP/n6HFq/

要将其解码回html，只需使用：

Answer 6

Stack Overflow的新function因此我没有足够的重复点来投票，但我想澄清解决方案，因为我误解了@Guffa接受的答案，我被搞砸了。

关于HTML5数据属性中的转义/特殊字符我有一个​​类似的问题。 问题/解决方案： 使用URL编码/解码从用户输入转换为HTML5数据属性的转义/特殊字符

Dan Smith提供了我使用encodeURI（）/ decodeURI（）的解决方案。 但是，我最初驳回了它，因为它只有1个重复点。

手动转义字符的任何答案都会变得混乱和耗时。

现在不推荐使用escape（）方法的任何答案。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape

Answer 7

我喜欢直接在javascript中存储数据。 而不是这个：

 
Content
  

做这个：

 
Content
  

或者，如果用法位于您控制的远程脚本中，请将值存储在全局中：

 
Content
  

或者，如果您无法控制远程脚本，并且必须将信息存储为数据属性，则可以在找到定位段落的方法后使用javascript进行设置：

 
Content
  

Answer 8

这有点棘手但您可以选择dom对象及其包含单引号的data属性。 诀窍是\\'

 
Hello
  

小提琴

Answer 9

当我使用data属性将一些数据与PHP中的html元素一起传输到JavaScript时，我只在后端使用base64_encode ，然后在客户端使用base64Decode(input)来获取数据。 这样我就可以避免任何逃避狂欢。 我使用的JavasScript代码位于http://www.webtoolkit.info/

Answer 10

使用btoa方法设置数据和atob方法来获取它：

  $(document).data("test2",btoa('She said "WTF<\/abbr>" on last nights show.">')) 

或者简单地将字符串取消引用为变量：

  var stringer = 'She said "WTF<\/abbr>" on last nights show.">' $(document).data("test2",stringer); 

参考

• HTML5 Living Standard，Web应用程序API：Base64实用程序方法