—— 分享前端技术,记录生活点滴

Textarea对换行符的保存和识别以及nbsp等转义字符的识别处理方法

  最近产品提出一个需求,要求 web 端表单中保存的文本可以识别回车换行,同时在对应小程序端的回显要求保留换行格式,同时,小程序内的文本复制粘贴到微信朋友圈等地方可以保留原有格式(主要是换行),方便排版发送。

  web 端保留换行操作,第一时间能想到富文本编辑器,但产品又说,小程序端也需要发送换行文字。鉴于自己还没有踩过并且也不太想踩小程序端使用富文本编辑器的坑,故硬着头皮开始从表单控件文本域标签 textarea 下手,简单处理一下,还是可以完美实现的。

1. 文本域 textarea 保留换行

  实现并不复杂,我将表单文本域信息在提交之前使用JSON.stringify转换,得到的文本就会将输入的回车符转换为\n,我们知道\n, \r, \s等,这些都属于 JS 语言中的转义字符,只要字符能够保存,就有办法转换,然后,我将转换后的文本提交给后台保存,这里后台需要配合的一点是,一般我们都会给接口设置 HTML 以及 JS 语法过滤,但此处我们不要去过滤,这样才便于下一步的处理。小程序端也是同样的操作。

  关于文本的回显,这里我讲我遇到的三种情况:

  • 在 web PC 端使用 Vue + ElementUI

  在 el-input 绑定的 v-model 中,直接使用JSON.parse方法转换字段就可以。

  • 在 web PC + 手机端使用 jQuery

  原以为同样使用 JSON.parse 就可以,但实际发现不可行,最终我想到了 eval 函数,eval 函数确实可以识别\n等,但与之带来的 XSS 攻击的风险,必须重视。如果文本的录入者是 B 端用户或者是我们自己,那就完全不必担心我们会自己害自己,直接用就 OK。

  • 在小程序端使用 Taro + TS

  我在 Text 标签中直接使用JSON.parse(JSON.parse(JSON.stringify(文本)))这样的骚操作来识别回显\n转义字符,至于为什么需要多嵌套一层 JSON 转换,其实都是测试的结果,虽然不那么严谨,但确实奏效。

  关于以上三种情况的实现,还有最为重要的一点,我们需要为回显文本的元素添加一条 CSS 样式:white-space: pre-wrap;,这一点至关重要,有它才可以显示换行。切记。

  由此,识别换行这部分需求得以实现。也许因为框架和场景等差异,大家这样处理后发现仍然无效,请留言咨询,我也将及时更新本文章,方便各位参考。

2. 小程序复制粘贴的问题

  小程序使用 Taro 框架,复制这块使用Taro.setClipboardData方法,其实和原生的wx.setClipboardData是一样的,我们直接将转换好的文本传给此方法,粘贴到微信内,换行得以保留。

  但是问题总在不经意间暴露出来,测试同学发现,从微信中复制来的文字粘贴到小程序端,保存后,小程序端的文字经常会显示 等特殊字符,并且从小程序复制这段文字粘贴到微信中,也会出现,需要去掉。什么原因呢?原因就在于JSON.stringify将转义字符进行字符串化,除 外,还有<>等常用的转义字符,直接将转义字符输出,必然影响体验。

  改动也很简单,首先是小程序端的回显问题,Text 标签有个属性叫做 decode,默认为false,设置为true即可识别转义字符,有同学可能会问,既然decode可以识别转义字符,那换行符不也直接可以识别?道理是对的,但是小程序官方文档对decode的描述并没有显示可以转换\n,也许确实是可以的,但根据经验,只要文档上没写,就不太方便用。回到问题上,其次是复制粘贴到微信的问题,这里我将需要复制的数据进行简单处理:

1
2
3
4
5
6
7
8
9
10
let content = item.content // 这是需要复制的文本
if (content) {
// 将转义字符解码还原
let decodeObj = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' }
content = content.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, item) {
return decodeObj[item]
})
}
content = JSON.parse(JSON.parse(JSON.stringify(content))) // 这里识别转义字符\n,原样输出到剪切板
Taro.setClipboardData({ data: content }).then(res => { }) // 复制方法

  由此,复制显示的问题也得以解决。

  以上便是本次分享的内容,希望对你有所帮助,感谢关注阿晋的网络日志。

支付宝打赏 微信打赏

如果觉得我的文章对您有用,请随意赞赏 :)

留言