聊天场景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'