Добавление атрибута данных (со специальными символами) в элемент dom с помощью jquery

Question

Я пытаюсь добавить атрибут данных в элемент HTML.Атрибут данных (data-description) может содержать специальные символы, такие как апостроп.

InsertHtml = InsertHtml + '<tr id="DashboardRow0" data-description=\'' + JSON.stringify(data[0])+ '\'><td>' + </td></tr>';
htmlElement.append(InsertHtml);

Код для доступа к этим данным приведен ниже ...

var $row = $("#DashboardRow0");
var jsonData = eval('(' + $row.attr('data-description') + ')');

Но проблема в том...Если в данных JSON.stringify(data[0]) есть один апостроф ... браузер заменяет его на ", эффективно завершающий строку.

Есть ли известное решение для добавления атрибутов данных со специальными символами в узлы?

Answer 1

попытаться экранировать данные перед строкой

data[0].myProblemField = escape(data[0].myProblemField)
JSON.stringify(data[0])

или лучше

 for(var prop in data[0]) if(typeof(data[0][prop]) == "string") 
   data[0][prop] = escape(data[0][prop]);

, а затем

var jsonData = eval('(' + $row.attr('data-description') + ')');
jsonData.myProblemField = unescape(data[0].myProblemField)

Answer 2

Не совсем уверен, поможет ли это вам (т. Е. Все ли это происходит в одном и том же документе), но рассматривали ли вы возможность использования jQuery .data()?Этих проблем не будет, так как данные хранятся в виде переменной.

Answer 3

Если вы напишите в html

<tr id="some &quot; "><td>...</td></tr>

Вы получите

<tr id="some " "><td>...</td></tr>

в браузере.