Escape-кавычки в атрибуте данных HTML5 с использованием Javascript - PullRequest
Новая
       7

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

29 голосов
/ 31 августа 2011

Я использую 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>

Ответы [ 10 ]

28 голосов
/ 31 августа 2011

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

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

3 голосов
/ 07 марта 2015

Используйте 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" />
3 голосов
/ 31 августа 2011

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

1 голос
/ 16 января 2018

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

1 голос
/ 07 марта 2017

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

1 голос
/ 25 апреля 2014

Вот простой инструмент, который я создал, который вы можете использовать для кодирования 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>
1 голос
/ 31 августа 2011

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

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

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

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

0 голосов
/ 22 декабря 2015

Мне нравится хранить данные непосредственно в 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>
0 голосов
/ 06 мая 2015

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

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

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

Любые ответы с ручным экранированием символов становятся грязными и отнимающими много времени.

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

0 голосов
/ 28 августа 2012

Используйте метод 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);

Ссылки

...