encodeURIComponent не кодирует разрывы строк из атрибута данных HTML

Question

Я пытаюсь кодировать строку в URI, используя encodeURIComponent, строка данных, которую я извлекаю из атрибута data-* в HTML, используя jQuery.

encodeURIComponent, работает как ожидалось если я храню ту же строку в переменной и не извлекаю ее из атрибута HTML data-* (динамически).

Код, пробованный до сих пор:

var xDynamic = $(".some_class").attr("data-string");
var xDirect ="Some random String. \nString in a new line.";


console.log(encodeURIComponent(xDynamic));
console.log(encodeURIComponent(xDirect));

.some_class {
  margin-top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="some_class" data-string='Some random String. \nString in a new line.'>
  <strong>Note:</strong> Watch console here for <b>'%5Cn'</b> (no idea why) instead of <b>'%0A'</b>(expected) in encoded URI.
</div>

Проблема, с которой я сталкиваюсь:

Я пытаюсь получить строку из HTML data атрибут и далее используя encodeURIComponent поверх него. Здесь строка включает разрыв строки после текста «Some random String». Что, возможно, должно дать мне правильный вывод с преобразованием \n в %0A, вместо этого он работает не так, как ожидалось, и преобразуется в %5Cn.

, который прекрасно работает с тем же строковым значением, если я храню его в переменная (здесь var xDirect) и она преобразует \n в %0A

Прикрепленное ниже изображение выделяет то же самое:

---

---

Я не уверен, что мне здесь не хватает, запросите, может ли кто-нибудь помочь мне здесь.

Answer 1

Я пытаюсь получить строку из HTML атрибута данных и далее с помощью encodeURIComponent поверх него. Здесь строка включает разрыв строки после текста «Some random String». Что, возможно, должно дать мне правильный вывод с преобразованием \ n в% 0A, вместо этого он не работает должным образом и преобразуется в% 5Cn.

Он не содержит разрыв строки , \ не является escape-символом в HTML. Это просто \. \ преобразуется в %5C, а n - это просто n.

. Он отлично работает, если вы используете ссылку на символ новой строки:

var xDynamic =$(".some_class").attr("data-string");
var xDirect ="Some random String. \nString in a new line.";


console.log(encodeURIComponent(xDynamic));
console.log(encodeURIComponent(xDirect));

.some_class {
  margin-top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="some_class" data-string='Some random String. &#13;String in a new line.'>
  <strong>Note:</strong> Watch console here for <b>'%5Cn'</b> (no idea why) instead of <b>'%0A'</b>(expected) in encoded URI.
</div>

Вы также можете закодировать значение в атрибуте данных как JSON:

var xDynamic = JSON.parse($(".some_class").attr("data-string"));
var xDirect ="Some random String. \nString in a new line.";


console.log(encodeURIComponent(xDynamic));
console.log(encodeURIComponent(xDirect));

.some_class {
  margin-top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="some_class" data-string='"Some random String. \nString in a new line."'>
  <strong>Note:</strong> Watch console here for <b>'%5Cn'</b> (no idea why) instead of <b>'%0A'</b>(expected) in encoded URI.
</div>

Answer 2

Вы можете сделать противоположный этот ответ SO , чтобы заменить строковую версию /n символом новой строки. Пример:

var xDynamic = $(".some_class").attr("data-string").replace(/\\n/g, "\n");
var xDirect ="Some random String. \nString in a new line.";

console.log("xDynamic: " + encodeURIComponent(xDynamic));
console.log("xDirect: " + encodeURIComponent(xDirect));

.some_class {
  margin-top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="some_class" data-string="Some random String. \nString in a new line.">
  <strong>Note:</strong> Watch console here for <b>'%5Cn'</b> (no idea why) instead of <b>'%0A'</b>(expected) in encoded URI.
</div>