输入内容中,【换行】的展示

113 阅读1分钟

聊天场景1

用户于输入框中输入的内容

// task 后没有空格,直接是换行
task
1.first

发给 server 的数据,是字符串 'task\n1.first'.length 长度为 12
说明字符串中的换行符 \n 算一个字符。

server 将这个字符串发送给其他 client 后。客户端此字符串写入 div 标签以展示时,显示为:

task 1.first

怎么把这个【换行】展现出来?

方式一

用 < pre > 标签来展示

方式二

给容器加上 white-space: pre-line;

方式三

将 \n 替换成 < br > 标签

// 'task\n1.first'
var str2 = str1.replace(/\n/gm,"<br/>");

// 替换成了 'task<br/>1.first'

======
问:字符串 'task\n1.first' 用正则来进行匹配,为什么不是 /\\n/gm  ?
因为这个 \n 是个换行符,上面也讲明了,这个 \n 的length 是 1

/\\n/gm  匹配的是字符串的 '\n' , .length 长度为2

再当作 innerHTML 注入
比如:
<div dangerouslySetInnerHTML={{__html: HTMLMarkup}} />

场景2

用户于输入框中输入的内容

// task后的 \n 是用户输入的内容
task\n1.first

发给 server 的数据,是字符串 'task\\n1.first'.length 长度为 13

正常来说,这种就不是换行。
应该把用户的输入原原本本的展示出来,就显示为 task\n1.first

但若需求就是要显示为【换行】,怎么做?
此时,上面的 「方法一」、「方法二」 都是不行的。因为这个字符串中本身就没有【换行】。
只能采用「方法三」。

// 'task\\n1.first'
var str2 = str1.replace(/\\n/gm,"<br/>");

// 同样是替换成了 'task<br/>1.first'