Правильная обработка текста, который был отправлен через JSON при возврате html-строки и вставке ее в атрибут tittle

#javascript #json #string #datatable #datatables

#javascript #json #строка #datatable #таблицы данных

Вопрос:

у меня есть следующий текст (с новыми строками).

 "☢☢☢☢2222def l2 ❤ ☀ ☆ ☂ ☻ ♞ ☯ ☭ ☢ € → ~`!@#$%^amp;*()_ -={}[]\|:;"'<>?,./  1 ❤ ☀ ☆ ☂ ☻ ♞ ☯ ☭ ☢ € → ~`!@#$%^amp;*()_ -={}[]\|:;"'<>?,./  2 ❤ ☀ ☆ ☂ ☻ ♞ ☯ ☭ ☢ € → ~`!@#$%^amp;*()_ -={}[]\|:;"'<>?,./def l2 ❤ ☀ ☆ ☂ ☻ ♞ ☯ ☭ ☢ € → ~`!@#$%^amp;*()_ -={}[]\|:;"'<>?,./  1 ❤ ☀ ☆ ☂ ☻ ♞ ☯ ☭ ☢ € → ~`!@#$%^amp;*()_ -={}[]\|:;"'<>?,./  2 ❤ ☀ ☆ ☂ ☻ ♞ ☯ ☭ ☢ € → ~`!@#$%^amp;*()_ -={}[]\|:;"'<>?,./"

122434 *()_ -={}[]\|:;"'<>?,./def l2 ❤ ☀ ☆ ☂ ☻ ♞ ☯ ☭ ☢ € → ~`!@#$%^amp;*()_ -={}[]\|:;"'<>?,./  1 ❤ ☀ ☆ ☂ ☻ ♞ ☯ ☭ ☢ € → ~`!@#$%^amp;*()_ -={}[]\|:;"'<>?,./  2 ❤ ☀ ☆ ☂ ☻ ♞ ☯ ☭ ☢ € → ~`!@#$%^amp;*()_ -={}[]\|:;"'<>?,./"
  

Я использую datatbles.js и там при заполнении ячеек у меня есть функция, которая возвращает html-строку

 return '<span title="TEXT"></span>'
  

Когда я делаю это

 return '<span title="' text '"></span>'
  

Или это

 return '<span title="' JSON.stringify(text) '"></span>'
  

Это нарушает мой возвращенный элемент.

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

Спасибо!

Комментарии:

1. Как это «ломается»? Нарушает ли символ ‘ это?

2. Существуют такие вещи, как одинарные и двойные кавычки, квадратные, фигурные и угловые скобки и другие подобные символы и знаки препинания, которые могут интерпретироваться как HTML-маркеры вместо обычного текста. Вам нужно будет экранировать эти символы в соответствии с этой спецификацией .

3. @Abion47 Спасибо, это помогло!

Ответ №1:

Если вы выполняете конкатенацию строк, вам придется беспокоиться обо всех деталях кодирования в HTML. Вместо передачи HTML-строк, создавайте элементы DOM с функциями JavaScript:

 var span = document.createElement("span");
span.innerText = text;
return span;
  

Затем вызывающий должен использовать appendChild() для добавления этого элемента туда, где это необходимо, вместо присвоения его innerHTML .

Комментарии:

1. Это просто привело бы к появлению столбцов, содержащих текст [object HTMLSpanElement]

2. Вы не вводите возвращаемое значение в innerHTML , вы используете appendChild для добавления его в качестве элемента DOM.

3. Я понимаю вашу точку зрения, но таблицы данных ожидают строку (обрабатывает значения из обратного вызова рендеринга как строки)… Вы могли бы использовать return span.outerHTML , но это, похоже, разрушает разметку в data / text (т.Е. если текст является <p>something</p> )