Функция jQuery html() и & nbsp;

Question

У меня есть строка, которая содержит Unicode кодированный неразрывный пробел. Мне нужно сохранить эту строку в скрытом HTML-элементе, чтобы другая функция могла прочитать это значение.

Это выглядит как html() Функция выполняет некоторое преобразование строки. Пример:

  var testString = "string with \xa0 non breaking space";
  $(".export-file-buffer").html(testString);
  var receivedString = $(".export-file-buffer").html();
  console.log(testString);
  console.log(receivedString);

Что я вижу в консоли:

string with   non breaking space
string with   non breaking space

Почему именно это происходит? Не могли бы вы указать мне на документ, который описывает это поведение?

Answer 1

Вместо того, чтобы сделать его отображаемым, если вам просто нужно сохранить ссылку на него в элементе, вы можете использовать data() метод.

var testString = "string with \xa0 non breaking space";
var $target = $('#target');

$target.data('rawData', testString);

console.log($target.data('rawData'));

var fromData = $target.data('rawData');

console.log(
  fromData.split('').map(function(character){
    if (character < ' ' || character > '~' ) {
      return '\\x'+ character.charCodeAt(0).toString(16);
    } else {
      return character;
    }
  }).join('')
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target"></div>

Как видите, значение не преобразуется в  , Причина этого заключается в том, что когда jQuery устанавливает значение для элемента с data() это не помещает это непосредственно в элемент. Скорее, он хранит значение во внутреннем кэше и связывает значение с элементом. Так как значение находится только в памяти javascript, браузер не преобразует его.

Значение по-прежнему выводится на консоль, а не как \xa0 потому что эта шестнадцатеричная кодовая ссылка не является видимым символьным кодом на диаграмме ascii. Я включил небольшой скрипт, который кодирует символы на графике ascii до пробела и после тильды.

Answer 2

Есть несколько способов сохранить строку, которой можно поделиться на html-странице.

1. Используя тип ввода ="скрытый". Здесь вы можете просто сохранить значение в $(". Export-file-buffer"). Val(testString), как вы это сделали для html
2. (менее рекомендуется) Использование глобальной переменной / сохранение в окне. window.export-file-buffer = testString и получить позже вызывая window.export-file-buffer