前端处理\n换行符

前言

在开发 xbot 和 ebot(是我们的智能聊天机器人)的过程中,websocket 返回的信息中有些会包含 \n 换行符。要知道在 HTML 中,是无法识别 \n 换行符的,究其原因是因为 \n是 js 中的换行,而 html 中的换行是<br />

解决

那么如何让 \n 的换行起效果呢,解决办法其实很多。

方法一 innerText

在目前的 HTML 标准下, innerText 会把 \n 替换为 <br>

举个栗子

1
2
3
4
let a = "\n 1";
let ele = document.createElement("div");
ele.innerText = a;
console.log(ele); //<div><br> 1</div>

方法二 使用 css

我们可以使用 css 属性 white-space来设置。white-space 属性详解

该属性有 6 个值。其中我们可以使用 pre、pre-wrap、pre-line 等值来实现换行

normal

连续的空白符会被合并,换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。

nowrap

和 normal 一样,连续的空白符会被合并。但文本内的换行无效。

pre

连续的空白符会被保留。在遇到换行符或者
元素时才会换行。

pre-wrap

连续的空白符会被保留。在遇到换行符或者
元素,或者需要为了填充「行框盒子(line boxes)」时才会换行。

pre-line

连续的空白符会被合并。在遇到换行符或者
元素,或者需要为了填充「行框盒子(line boxes)」时会换行。
break-spaces
与 pre-wrap 的行为相同,除了:

  • 任何保留的空白序列总是占用空间,包括在行尾。
  • 每个保留的空格字符后都存在换行机会,包括空格字符之间。
  • 这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容大小和最大内容大小)。

相比于 innerText 方法,使用 css 处理明显更方便和简单。