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

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() 是答案，那么需要在 < 读取值之前完成它code>.data()——也许可以将其应用到整个？

像 WTF 这样的普通反斜杠转义也不起作用。

理想情况下，这可以灵活地与两者一起使用：

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

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

更新 - 更多背景信息：

我正在为 responsejs.com 处理此问题。实际应用可能是只为超过一定宽度的浏览器加载侧边栏（并在浏览器而不是 PHP 中处理此问题）。以 WordPress 为例，侧边栏可以包含小部件、图像等。PHP 标签内的引​​号不是问题，因为它们在到达浏览器之前会被解析为 HTML。例子：

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

        data-oweb=' 

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

        '
    >

    optional default markup for mobile and no-js browsers here

</aside>

Answer 1

没有办法解决这个问题，你必须正确转义这些值，否则 HTML 无法被正确解析。解析后你不能使用Javascript来纠正代码，因为那样它就已经失败了。

正确 HTML 编码的示例是：

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

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

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

Answer 2

使用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 3

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

Answer 4

如果它们必须是带有 " 和 ' 之类的 HTML 字符串，为什么不为它们创建单独的 HTML 元素：http://jsfiddle.net/N7XXu/。

例如 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 5

为了使其成为正确的 html，您必须转义麻烦的字符。我会用 HTML 实体来逃避它们。这意味着无论使用什么工具来输入这些信息都必须正确存储它们和/或在后端检索它们的工具必须转义它们。

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

大多数后端开发语言都有某种“htmlescape/unescape”功能，因此这应该不难。

要通过 jQuery 取消转义，可以通过快速 Google 找到以下内容：

Answer 6

这是我创建的一个简单工具，您可以使用它来编码 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, '"'));
    });            
</script>

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

您可以在这里测试它： http://jsfiddle.net/SplicePHP/n6HFq/

将其解码回来html 只需使用：

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

Answer 7

您是否尝试过对数据使用单引号？

像这样：

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

Answer 8

正如这个答案所建议的那样，这是一个可能的解决方案：

var popup = $('#placeholder');
popup.html(`
<div data-message="${encodeURI("i could be what ever you need \' \" i will escape ! ")}" >
</div>
`);

console.log(decodeURI(popup.find('div').data("message")));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="placeholder">
</div>

这里的关键是 :

wierdText = decodeURI(someText))

和 :

someText = encodeURI(wierdText)

是反向函数，可以保存您需要的任何字符串，而不会导致它被解释为 html 或 html 属性，因为它用于内联 href 标签，它是为了完成这项工作而设计的。

Answer 9

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

<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 10

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

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

Answer 11

使用 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);

References

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