Question

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

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

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

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

如果某种形式的.replace()是答案，则需要在.data()读取值之前完成 - 可能是在整个<body>中应用它？

像[{1}}这样的正常反斜杠转义也不起作用。

理想情况下，这将具有兼顾两者的灵活性：

<abbr title="te\'st">WTF</abbr> 和 data-example="..."

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

更新 - 更多上下文：

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

data-example='...'

Answer 1

无法绕过它，您必须正确地转义值，否则无法正确解析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代码中的字符。

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

Answer 2

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

E.g。 HTML：

<p class="example" data-which="1">a</p>

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

与以下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);

<a id="popup" href="#" data-message="%7B%22title%22:%22Print%22,%22message%22:%22Printing%20not%20yet%20implemented%22%7D" />

Answer 4

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

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

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

通过jQuery取消它，这是通过快速Google找到的东西：http://www.naveen.com.au/javascript/jquery/encode-or-decode-html-entities-with-jquery/289

Answer 5

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

诀窍是逃避它两次。

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

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

<div id="esc"></div>
<textarea id="escinput" placeholder="Enter text"></textarea>
<script>
    $("#escinput").bind("change paste keyup", function(){
        $("#esc").text($(this).val().replace(/\n/g,'\\n'));
        $("#esc").text($("#esc").html().replace(/"/g, '&quot;'));
    });            
</script>

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

您可以在此处进行测试：http://jsfiddle.net/SplicePHP/n6HFq/

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

<script>
    var attr = $("#idOfElement").data('attribute');
    var decoded = $('<textarea/>').html(attr).val();
</script>

Answer 6

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

<div id="text" data-message="Stanley Kubrick's Oranges">Hello</div>

<script>
    var message = "Stanley Kubrick\\'s Oranges";
    $("#text[data-message='"+message+"']").fadeOut("slow");
</script>

Fiddle

Answer 7

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

Answer 8

Stack Overflow的新手，所以我没有足够的代表投票，但我想澄清解决方案，因为我误解了@Guffa接受的答案，我被搞砸了。

我对HTML5数据属性中的转义/特殊字符有类似的疑问。问题/解决方案：Escape/Special Characters from user input to HTML5 data-attributes using URL Encode/Decode

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

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

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

Answer 9

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

<p class="example" data-oweb="<?=str_replace('\'', '\\\'', $var)?>">Content</p>
<script>
  var example = $('.example').data("example");
  DoSomething(example);
</script>

这样做：

<p class="example">Content</p>
<script>
  var example = '<?=str_replace('\'', '\\\'', $var)?>';
  DoSomething(example); 
</script>

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

中

<p class="example">Content</p>
<script>
  window.MyDataValues={};
  window.MyDataValues.Example = '<?=str_replace('\'', '\\\'', $var)?>';
</script>

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

<p id="example" data-oweb>Content</p>
<script>
    document.getElementById("example");
    element.dataset.oweb = '<?=str_replace('\'', '\\\'', $var)?>';
</script>

Answer 10

使用btoa方法设置数据，使用atob方法获取数据：

 $(document).data("test2",btoa('She said "<abbr title="What The F***">WTF<\/abbr>" on last nights show.">'))

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

 var stringer = 'She said "<abbr title="What The F***">WTF<\/abbr>" on last nights show.">'

 $(document).data("test2",stringer);

<强>参考

HTML5 Living Standard, Web application APIs: Base64 utility methods

Answer 11

如果使用的是Lodash，则可以使用_.escape()和_.unescape()。它将字符串中的字符“＆”，“ <”，“>”，“”和“”转换为它们相应的HTML实体。

参考：https://lodash.com/docs/#escape

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

11 个答案: