Создайте массив из одного атрибута данных HTML5.

У меня есть этот HTML:

<section id="SSID" data-texts="'Text1', 'Text2', 'Text3'"></section>

Я хочу создать переменную Array в jQuery, и мой код jQuery:

$(document).ready(function() {
    var Selection = $("#SSID").data("texts");
    var Texts = [ Selection ];

    console.log(Texts.length);
});

Для моего примера ожидаемый результат:

Texts[0] = 'Text1'
Texts[1] = 'Text2'
Texts[2] = 'Text3'

...и что длина массива Texts равна 3.

Однако я вижу, что длина Texts равна 1 и вся строка загружается в Texts[0]:

Texts[0] = "'Text1', 'Text2', 'Text3'"

Я думаю, что моя проблема вызвана символами " (кавычки). Как можно преодолеть эту проблему и достичь моей цели?


javascript arrays html jquery custom-data-attribute
person Phoenix    schedule 01.03.2014    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Вы можете использовать JSON.parse()

HTML:

<section id="SSID" data-texts='"Text1", "Text2", "Text3"'></section>

JQUERY:

var Selection = JSON.parse('[' + $("#SSID").data("texts") + ']');

Демонстрация скрипта

or

HTML:

<section id="SSID" data-texts='"Text1", "Text2", "Text3"'></section>

JQUERY:

var Selection = JSON.parse($("#SSID").data("texts"));

К сведению: но было бы лучше сохранить фактический JSON в качестве значения атрибута данных. Например: data-texts='["Text1", "Text2", "Text3"]' и проанализируйте его напрямую.

ОБНОВЛЕНИЕ: или вы можете сделать это с помощью Array#map и String#split метод.

var Selection = $("#SSID").data("texts").split(',').map(JSON.parse);

console.log(Selection);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="SSID" data-texts='"Text1", "Text2", "Text3"'></section>

person Pranav C Balan    schedule 01.03.2014
comment
Есть ли способ использовать формат data-texts=" 'a', 'b', 'c' " вместо data-texts=' "a", "b", "c" '? - person Phoenix; 01.03.2014
comment
@Phoenix Обратите внимание, что это технически худшее решение. Используйте фактический JSON, а не какую-то строку с добавленными вручную квадратными скобками. - person Tomalak; 01.03.2014

arrow_upward
17
arrow_downward

Атрибуты data- могут содержать JSON.

jQuery автоматически проанализирует их для вас, если они синтаксически допустимы.

<section id="SSID" data-texts='["Text1", "Text2", "Text3"]'></section>

а также

$(function() {
    var texts = $("#SSID").data("texts");

    console.log(texts.length);  // logs "3"
});

См.: http://jsfiddle.net/5mtre/.

Совет по безопасности: вы должны правильно закодировать JSON на сервере.

Это означает, что вам нужно выполнить кодирование JSON и кодирование HTML, показанное здесь в качестве примера с использованием PHP:

<section id="SSID" data-texts="<?=htmlspecialchars(json_encode($data), ENT_QUOTES, 'UTF-8')?>"></section>
person Tomalak    schedule 01.03.2014
comment
Вы также должны добавить флаги и кодировку, см. этот ответ. Исправлена ​​моя проблема stackoverflow.com/a/8832570/1643487 - person Timo002; 18.05.2016
comment
@Tim Просто для справки, можете ли вы пролить свет на обстоятельства, при которых пропуск ENT_QUOTES, 'UTF-8' приведет к неправильным результатам? - person Tomalak; 18.05.2016
comment
когда у вас есть один qoute в ваших данных JSON, например: data-texts='["Text1", "'Text2", "Text3"]'. Это сломается на 'Text2. - person Timo002; 18.05.2016
comment
Вы также можете просто сделать json_encode($data, JSON_HEX_QUOT), чтобы изменить кавычки на &quot;. - person Nicholas Ruunu; 23.09.2016
comment
@Николас Нет, этого недостаточно. Все, что это делает, это кодирует сам JSON по-другому. {"key": "value with \"quotes\"..."} становится {"key": "value with \u0022quotes\u0022..."}, что технически одно и то же. Но строка JSON по-прежнему будет содержать незакодированные <, >, & и ", и это нарушит HTML. Предотвращение поломки HTML — это весь смысл htmlspecialchars(). Общий совет: не пытайтесь умничать в таких вещах. Всегда используйте правильные функции. Строгий код для используемого вами носителя, слой за слоем, в данном случае: Raw Data -> JSON -> HTML. - person Tomalak; 23.09.2016
comment
@Tomalak, у меня работает, но у вас могут быть другие требования: jsbin.com/tuwazotono/ редактировать?html,js,вывод - person Nicholas Ruunu; 26.09.2016
comment
@NicholasRuunu Это работает, потому что современные парсеры HTML невероятно снисходительны и умны в понимании ужасно сломанного ввода. Не позволяйте этому одурачить вас, думая, что <div data-test="Something > something&Else < <tag>"> не будет ужасно поврежденным вводом. Это. Не производите такого рода вещи. И не делайте никаких обобщений, основанных на моих работах. Это либо правильно - либо нет. А этого материала нет. - person Tomalak; 26.09.2016
comment
@Tomalak, хорошо, для меня это абсолютно верно. Содержимое в кавычках представляет собой строку, и вы должны иметь возможность поместить туда любую строку, и она не должна преобразовываться в теги. - person Nicholas Ruunu; 27.09.2016
comment
Хорошо, для меня это абсолютно правильно. - Это потому, что вам не хватает фундаментальных знаний о том, как работает HTML. Кроме того, все это не является вопросом личных мнений. - person Tomalak; 27.09.2016
comment
@Tomalak, хорошо, ты просто грубишь. Значения атрибутов данных — это строки, см.: developer.mozilla.org /en-US/docs/Web/Guide/HTML/ Не могли бы вы указать мне на место в спецификации HTML, где сказано иначе? - person Nicholas Ruunu; 28.09.2016