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

Question

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

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。这里的字符串包括换行符，在文本“一些随机字符串”之后。通过将 \n 转换为 %0A 可能会给我正确的输出，而不是按预期工作并转换为 %5Cn。

如果我将相同的字符串值存储在变量中（此处为var xDirect），它完全可以正常工作，并将\n 转换为%0A

附下图高亮相同：

---

---

我不确定我在这里缺少什么，请在此处请求是否有任何帮助。

Answer 1

我正在尝试从 HTML 数据属性中获取字符串，并在其上进一步使用 encodeURIComponent。这里的字符串包括换行符，在文本“一些随机字符串”之后。通过将 \n 转换为 %0A 可能会给我正确的输出，而不是按预期工作并转换为 %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>

您还可以将 data 属性中的值编码为 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

您可以执行与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>