媒介

近来碰到如许一个需求：
须要在页面中显现一段第三方文本信息。这些文本完全由第三方本身定义，我们担任显现在页面即可，第三方请求这些文本须要换行显现即可。

我们都晓得在 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个要领都能完成换行。