encodeURIComponent 不对来自 HTML 数据属性的换行符进行编码

Question

我正在尝试使用 encodeURIComponent 将字符串编码为 URI，我正在检索的数据字符串来自 HTML 中的 data-* 属性，使用 jQuery。

encodeURIComponent 如果我将相同的字符串存储在变量中而不是从 HTML data-* 属性（动态）中检索，则

encodeURIComponent 会按预期工作。

目前尝试的代码：

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

您可以执行与 this SO answer 相反的操作，将 /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>

Answer 2

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.

它不包含换行符。 \ 不是 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>

encodeURIComponent 不对来自 HTML 数据属性的换行符进行编码

encodeURIComponent does not encode line breaks from HTML data attribute

html

javascript

encodeuricomponent