从HTML data属性获取的 无法在alert换行？原因与解决方法

我用原生JavaScript做了个简单确认弹窗，想通过HTML的data-confirm属性传递弹窗消息，但输入到属性里的换行符会显示成字面量\n，而直接写在alert()里的相同字符却能正常换行。

以下代码可复现问题：第一个alert无法正确换行，第二个可以。

confirmationElem = document.querySelector(`[data-confirm]`);
confirmationElem.addEventListener('click', get_confirmation);

function get_confirmation(e) {
  confirmationMessage = e.target.getAttribute('data-confirm');
  alert(confirmationMessage);
  alert("Line one\nLine two");
}

<div data-confirm="Line one\nLine two">click for a message</div>

我查了相关帖子，但没找到针对从data属性获取字符串导致该问题的解决方案，现在有两个问题：

1. 为什么两个alert对换行符的显示效果不一样？
2. 怎么让从data属性获取的消息在alert里正确换行？

1. 显示效果不同的原因 #

• 在JavaScript字符串里，\n是转义序列，会被JS引擎解析成一个换行符（ASCII码10的控制字符）。
• 但在HTML属性值里，\n就是两个普通字符：反斜杠（\）和字母n。HTML不会解析这类转义序列，所以通过getAttribute()获取到的是包含这两个字符的字符串，alert自然会把它们当成普通文本显示。

2. 实现正确换行的方法 #

你可以把获取到的字符串里的字面量\n替换成真正的换行符，有几种简单方式：

方法一：使用字符串替换 #

修改get_confirmation函数，用replace()全局替换所有\n字面量：

function get_confirmation(e) {
  confirmationMessage = e.target.getAttribute('data-confirm').replace(/\\n/g, '\n');
  alert(confirmationMessage);
}

这里的正则表达式/\\n/g匹配所有的字面量\n（注意反斜杠需要转义成\\），然后替换为JS的换行符\n。

方法二：在HTML属性里直接用换行（可选） #

如果你不想在JS里处理，也可以在HTML属性里直接用换行符的Unicode编码：

<div data-confirm="Line one&#10;Line two">click for a message</div>


是换行符的HTML实体，这样getAttribute()获取到的就是真正的换行符，不需要额外处理。

内容的提问来源于stack exchange，提问作者Matt