说一说“换行”踩的坑

前言

最近遇到这样一个需求：
须要在页面中显示一段第三方文本信息。这些文本彻底由第三方本身定义，咱们负责显示在页面便可，第三方要求这些文本须要换行显示便可。

咱们都知道在 HTML 中，用</br>标签能够实现换行，转义字符\n也能够实现换行。虽然效果同样，可是这两种换行的方式使用起来却不一样。

1.使用</br>换行

这种方式使用起来比较简单，用 jQuery.html( )方法便可。
示例：

var content = '您肯定要删除</br>这行代码吗？';
$('body').html(content);

结果以下：

可是不少时候这种方法用起来比较危险。好比你须要在页面中显示一段第三方文本信息，因为文原本自第三方，颇有可能被插入了恶意的script 脚本，若是用 html( )方法来显示这些文本，那颇有可能被攻击。固然还有一个更加理所固然可是稍微费事的方法，那就是利用正则匹配将全部\n替换为</br>，将全部其余 HTML 特殊字符（如<、>、&等)替换为转义字符串（也称字符实体(Character Entity)），这时候就能够用 $.html( )方法解决了！固然更好的方法应该是经过解析纯文本的方法如 text( )来显示这些文本。

2.使用\n换行

这种方式用起来比较坑，因此本文章的重点就是这一部分。
由于以前知道 alert 弹框中要实现换行，只能经过\n的方式，而不能经过</br>的方式。

(1) alert 弹框使用</br>换行结果

示例：

var content = '您肯定要删除</br>这行代码吗？';
alert(content);

结果为：

能够看到，经过</br>的方式并无法实现换行。

(2) alert 弹框使用\n换行结果

示例：

var content = '您肯定要删除\n这行代码吗？';
alert(content);

结果为：

(3) .innerHTML/ html( )方法中使用\n换行结果

对于大多数HTML元素，不论是原生的 innerHTML属性仍是 jQuery的 html( )方法都不能实现换行。但也有例外，好比下文介绍的textarea,pre元素。
示例：

var content = '您肯定要删除\n这行代码吗？';
//$('body').html(content);
document.getElementsByTagName('body')[0].innerHTML=content;

结果以下：

发现了吗，原本的换行符变成了空格！
我想缘由应该是这样的：在字符串中的\n其实和你在字符串中输入 enter 键换行的效果是同样的，在 HTML 里多于一个空格都按照一个空格显示，因此本来的换行符就变成了一个空格。但其实这个换行符依然在 HTML 中，此时你用 console.log($('body').html( ))查看，你会看到控制台打印出来的字符串是有空行效果的。

(4) innerText/ text( )方法中使用\n换行结果

奇怪的事情发生了，用 jQuery 的 text( )方法没法换行（对于大多数元素结果是如此，但也有例外，好比下文介绍的textarea,pre元素。），但使用原生的 innerText 属性竟然就能实现换行了！
示例1：

var content = '您肯定要删除\n这行代码吗？';
$('body').text(content);

结果以下：

示例2：

var content = '您肯定要删除\n这行代码吗？';
document.getElementsByTagName('body')[0].innerText=content;

结果以下：

顿时以为好开心，终于找到一个经过\n来实现换行的方法了！
但是忽然就开心不起来了，由于 firefox 不支持 innerText 属性，它有另一个对应的属性 textContent，那它是否支持经过\n来换行呢？
示例3：

var content = '您肯定要删除\n这行代码吗？';
document.getElementsByTagName('body')[0].textContent=content;

结果以下：

和示例1同样的结果，仍是不能实现换行。。。。
因此经过 innerText 这种方式只能支持除 firefox 外的浏览器，并非完美的解决方案。

(5) 利用 pre 元素使用\n换行结果

咱们知道pre标签是一个特殊的标签，标签中文本的全部空格和换行符都会被保留。在pre元素上使用 html( )/innerHTML/text( )/innerText等方式，发现都是能够实现换行的。

示例1：

<!--此方法不能实现换行-->
<pre>您肯定要删除\n这行代码吗？</pre>

<!--此方法能够实现换行-->
<pre>您肯定要删除
这行代码吗？</pre>

示例2：

var content = '您肯定要删除\n这行代码吗？';

//如下方法都是能够实现换行的
document.getElementsByTagName('pre')[0].innerHTML=content;
document.getElementsByTagName('pre')[0].innerText=content;
$('pre').html(content);
$('pre').text(content);

(6)利用 textarea 元素使用\n换行结果

报着试一试的态度，我尝试了下经过设置 textarea 元素的 value 属性来实现换行，发现竟然真实现了！因而我还尝试在textarea 元素上使用 html( )/innerHTML/text( )/innerText等方式，发现都是能够实现的！！
示例：

var content = '您肯定要删除\n这行代码吗？';
document.getElementsByTagName('textarea')[0].value=content;//能够实现
document.getElementsByTagName('textarea')[0].innerHTML=content;
document.getElementsByTagName('textarea')[0].innerText=content;
$('textarea').html(content);
$('textarea').text(content);
$('textarea').val(content);

结果以下：

回到开头说的那个需求，由于网页中只须要展现第三方文本信息，因此可使用一个 textarea 来代替本来的 div之类的进行展现。那么问题来了，咱们但愿的是仅展现，并不能被编辑，textarea 元素默认是能够被编辑的，怎么破呢？这个简单，给 textarea 元素加上 readonly属性就解决啦~~

结语

看来在使用\n方式实现换行时，是否能用html()/innerHTML/text()/innerText，取决于在哪一个 HTML 元素上使用这些方法。对于那些会保留纯文本中原有空格、换行符的 HTML 元素如<pre>、<textarea>等，使用这4个方法都能实现换行。