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

Escape Quotes In HTML5 Data Attribute Using Javascript

本文关键字：转义 数据属性 Javascript HTML5 使用      更新时间：2023-09-26

我使用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> ?

正常的反斜杠转义如<abbr title="te''st">WTF</abbr>也不工作。

理想情况下，这可以灵活地同时工作:

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>

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

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

使用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" />

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

如果它们必须是带有"和'之类的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元素。

要使它成为合适的html，您必须转义麻烦的字符。我会用HTML实体对它们进行转义。这意味着无论使用什么工具来输入这些信息，都必须正确地存储它们，并且/或者在后端检索它们的工具必须对它们进行转义。

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

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

要通过jQuery消除转义，这里是通过快速谷歌找到的东西:http://www.naveen.com.au/javascript/jquery/encode-or-decode-html-entities-with-jquery/289

这是我创建的一个简单的工具，您可以使用它来编码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>

您是否尝试过使用单引号为您的数据?

: 

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

根据这个答案，这里有一个可能的解决方案:

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标记，所以它被用来完成这项工作。

这有点棘手，但您可以选择包含单引号的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

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

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

使用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生活标准，Web应用api: Base64实用方法
相关文章：