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/

我甚至无法使用替换（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) + "对HTML5无效

Answer 1

这是你应该使用的：

ele = document.getElementById("t");
txt = ele.getAttribute("data-txt").replace(/\\n/g,'<br>'); 
ele.innerHTML = txt;

说明： \ char是一个转义字符，因此要指定一个新行，您需要使用两个\\，以便第一个转义第二个含义。然后将第二个作为普通字符处理，并与n一起读作\n 此外，您必须将其替换为<br>，因为浏览器不会尊重CRLF字符。

以下是关于jsfiddle的示例：https://jsfiddle.net/4eurrzgx/

＆＃13;

    
    var ele = document.getElementById("s");
    var txt = "this is it \n and done";
    ele.innerText = txt;
    
    
    ele = document.getElementById("t");
    txt = ele.getAttribute("data-txt").replace(/\\n/,'<br>'); 
    ele.innerHTML = txt;

＆＃13;

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

＆＃13;

Answer 2

您将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 
 Another one</div>

查看HTML entities
的完整列表

为什么从data-attribute获取值会影响文本

2 个答案: