前后端“换行”踩的坑

wwq图书世界 2020-02-29

展开全文

前言

最近遇到这样一个需求：
需要在页面中显示一段第三方文本信息。这些文本完全由第三方自己定义，我们负责显示在页面即可，第三方要求这些文本需要换行显示即可。

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

1.使用``换行

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

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

结果如下：

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

2.使用`\n`换行

这种方式用起来比较坑，所以本文章的重点就是这一部分。
因为之前知道 alert 弹框中要实现换行，只能通过\n的方式，而不能通过的方式。

(1) alert 弹框使用``换行结果

示例：

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

结果为：

可以看到，通过的方式并没法实现换行。

(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属性就解决啦~~