javascripthtmlencodeuricomponent

encodeURIComponent does not encode line breaks from HTML data attribute

I am trying to encode String to URI using encodeURIComponent, the data string I am retrieving is from the data-* attribute in HTML using jQuery.

encodeURIComponent works as expected if I am storing the same string in a variable and not retrieving from HTML data-* attribute (dynamically).

Code tried so far:

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>

The issue I am facing:

I am trying to get string from HTML data attribute and further using encodeURIComponent over it. Here string includes line break, after text "Some random String." Which should possibly give me correct output with converting \n to %0A instead it does not work as expected and converts to %5Cn.

Which works completely fine with same string value if I am storing it in a variable (here var xDirect) and it converts \n to %0A

Attached below picture highlights same:

enter image description here

I am not sure what am I missing here, request if any can help me here.

Solution

  • I am trying to get string from HTML data attribute and further using encodeURIComponent over it. Here string includes line break, after text "Some random String." Which should possibly give me correct output with converting \n to %0A instead it does not work as expected and converts to %5Cn.

    It doesn't contain a line break. \ is not an escape character in HTML. It is just a \. The \ gets converted to %5C and the n is just an n.

    It works fine if you use a new line character reference:

    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>

    You could also encode the value in the data attribute as 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>