Экранирование кавычек в атрибуте данных HTML5 с использованием Javascript

Нет никакого способа обойти это, вы должны правильно экранировать значения, иначе 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.

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

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

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

Я добавил дополнительную замену \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>

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

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

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

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

Поскольку я использую атрибут data для передачи некоторых данных вместе с элементом html из PHP в JavaScript, я просто использую base64_encode на бэкэнде, а затем на стороне клиента использую base64Decode(input) для возврата данных. Таким образом, я избегаю любой беглой оргии. Код JavasScript, который я использую, находится здесь http://www.webtoolkit.info/javascript_base64.html#.Wl3tl6jiZjE

Это немного сложно, но вы можете выбирать объекты 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>

Скрипка

Если вы используете Lodash, вы можете использовать _.escape() и _.unescape(). Он преобразует символы "&", "‹", ">", '"' и "'" в строке в соответствующие им объекты 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 Living Standard, API веб-приложений: служебные методы Base64