Escape Quotes В атрибуте данных HTML5 с использованием Javascript

Ответ 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 show.">

Вы не можете использовать обратную косую черту для пропуска символов, потому что это не код Javascript. Вы используете HTML-объекты для удаления символов в HTML-коде.

Если вы не можете контролировать, как данные вводятся, то вы ввернуты. Вам просто нужно найти способ взять под свой контроль.

Ответ 2

Если они должны быть 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 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.

Ответ 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" />

Ответ 4

Для правильного html вам нужно избежать неприятных символов. Я бы избежал их с объектами HTML. Это означает, что любой инструмент, используемый для ввода этой информации, должен был бы правильно их хранить и/или инструмент, извлекающий их на задней панели, должен был бы избежать их.

Затем, если вы хотите использовать их в своем JS, вам нужно будет запустить некоторые функции поиска и замены, чтобы преобразовать символы обратно в HTML и кавычки.

Большинство базовых языков-разработчиков имеют своего рода функциональность "htmlescape/unescape", поэтому это не должно быть трудно.

Чтобы отменить его через jQuery, здесь что-то найдено через быстрый Google: http://www.naveen.com.au/javascript/jquery/encode-or-decode-html-entities-with-jquery/289

Ответ 5

Вот простой инструмент, который я создал, вы можете использовать для кодирования html:

Хитрость заключается в том, чтобы избежать его дважды.

Я добавил дополнительную замену \n, чтобы сохранить многострочный текст, поскольку он отбрасывается текстом().

Кроме того, вам нужно избежать кавычек, чтобы сделать его безопасным для атрибута данных.

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

Ответ 6

Новое для, поэтому у меня недостаточно голосов, чтобы проголосовать, но я хотел прояснить решение, поскольку я неверно истолковал принятый ответ @Guffa, что я был ввернут.

У меня был аналогичный вопрос об escape/специальных символах в атрибутах данных HTML5. Вопрос/решение: Escape/Special Characters от пользовательского ввода к атрибутам данных HTML5 с использованием кодирования/декодирования URL

Dan Smith предоставил решение, которое я использовал с encodeURI()/decodeURI(). Тем не менее, я отклонил его изначально, потому что он был настолько далек только с 1 репутацией.

Любые ответы с ручным экранированием персонажей становятся беспорядочными и трудоемкими.

Любые ответы с методом escape() теперь устарели. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape

Ответ 7

Мне нравится хранить данные в 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>

Или, если использование находится в удаленном script, которое вы управляете, сохраните значения (значения) в глобальном:

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

Или, если вы не можете управлять удаленным script, и информация должна быть сохранена как атрибут данных, вы можете установить его с помощью javascript после того, как вы выясните способ нацеливания абзаца:

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

Ответ 8

Это немного сложно, но вы можете выбрать dom-объекты с атрибутами data, содержащими одинарные кавычки. Трюк \\'

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

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

Fiddle

Ответ 9

Используйте метод 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, API веб-приложений: утилиты Base64