富文本编辑器空格与普通输入框空格的区别

在做富文本编辑器的时候发现一个关于空格的问题.

问题背景

我们的场景是这样的:
用户在web上编辑内容,然后前端把用户输入的内容传给后端,后端把这个内容通过短信发出去.

在这个过程中我发现了一个问题:
我们发现,web上输入的空格发出去短信后在一部分手机上显示成了?,于是开始排查问题.

问题发现

经过排查,我的结论是这样的:
我们发现富文本里面输入的空格与在textarea input等控件里面输入的空格不一样.
以微博的富文本编辑器为例,在里面输入的空格是这样的:

保存的也是这样的

这里可以思考一下,为什么富文本的空格要使用 代替用户输入的空格
那是因为,html里面如果有多个连续的空格的话,最终展示只能展示成一个空格.所以,要想展示多个连续的空格的话,只能用 来代替.

而在textarea里面输入的空格是这样的

保存的时候这样的

这里其实会引发一个问题:
如果在input或者textarea等输入的控件里面输入多个连续的空格,而展示的时候如果不做特殊处理的话,那么多个连续空格最终会展示成一个空格.

其实这个问题是花了点时间才发现是这么个问题的,因为在前端控制台看到传给后端的确实是空格,后来复制到可以显示空格的编辑器里面才发现,传的不是空格

如图第一行展示的,是富文本编辑器输出的空格,第二行展示的是普通的空格.
第一行的空格encodeURI之后值为%C2%A0,就是 .
而我们常见的空格encodeURI之后值为%20.

问题解决

知道了问题是什么,那就好解决了,在我们的场景里面,在向后端保存富文本信息的时候把里面的 空格替换为普通空格,这样后端在发送短信的时候取到的说就是我们常见的空格.
而前端从后端获取到富文本信息需要展示的时候,就把后端返回的数据中的富文本中的常规空格转化为 就行了.

参考文档

• 请问这是什么字符“'%C2%A0'”？