javascript - 为什么从数据属性中获取值会影响文本

Question

我正在为某些语法而苦苦挣扎，主要是为什么 data-attribute(HTML5) 会以这种方式影响文本。

请考虑这个符合预期的例子

<div id="s"></div>    

<script>

var ele = document.getElementById("s");
var txt = "this is it \n and done";
ele.innerText = txt;

</script>

结果是由于 \n，我在 HTML 中看到了 2 行。这是预期的

任务意味着我需要改变我们的工作方式

<div id="s" data-txt="this is it\nand done"></div>

<script>

var ele = document.getElementById("s");
var txt = ele.getAttribute("data-txt"); 
ele.innerText = txt;

</script>

请注意，我们现在使用的是 data-txt 的数据属性。问题是逐字呈现文本，这意味着我看到 1 行:this is it\nand done

https://jsfiddle.net/he4ydvva/

我什至不能使用 replace (ele.getAttribute("data-txt").replace('\n','blah');) 的事实表明，虽然我看到\n, 计算机正在读取不同的东西(可能是 charcode 值或类似的)

为什么会发生这种情况，我该如何预防？

编辑

我看过How can I insert new line/carriage returns into an element.textContent?但这还不够，因为我需要字符串存在于 data-txt 中并连接为 "this is "+ String.fromCharCode(13) + " is not valid for HTML5

Answer 1

您混淆了 HTML 和 JavaScript。

\n 是一个 JavaScript 字符。 data-* 属性是 HTML。要在 HTML 中插入换行符，您应该使用 HTML 实体 (换行符)或 (回车)或他们的组合。

HTML 不理解 \n、\r 等。

另请注意，

<div>This is a line \n Another one</div>

这不会插入换行符，但下面的代码会:

<div>This is a line &#10; Another one</div>

查看 HTML entities 的完整列表