前端小白爬坑记（一） textarea文本域换行问题记录

2020年10月初正式转行成为一名web前端工程师，但只会简单的HTML及CSS，很幸运的是公司给我自学的机会，在项目中成长。

目前公司就我一个前端，自己只能用薄弱的基础知识在项目中爬坑，这些简单的问题对于技术大佬分分钟钟的就能解决，而我爬了很久才解决，所以记录下这些问题巩固下自己惨不忍睹的基础。

文本域textarea这个坑

在文本域中输入内容，回车换行之后，点击保存按钮时将数据传给后台，浏览器控制台会报Uncaught SyntaxError: Invalid or unexpected token （无效或意外的标记）这样的错误。

这是因为在textarea文本域中输入空格和换行会被转成为特殊字符为/s和/n

所以获取文本域输入的内容时，要先对数据中的回车，空格进行转义，再通过ajax传给后端。

如下代码即可转义：

let newUpdate=$(updateVersion).val().replace(/\n/g,"<br>").replace(//g,"&nbsp");

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

文档帮助：www.w3school.com.cn/jsref/jsref…

通过replace()方法转义之后会将\n转为< br > 传入给后端。

当然了，为了防止用户故意输入特殊字符，在保持数据之前我会进行判断如果内容出现,就提示他不能输入特殊符号\。因为是给公司内部人员使用所以没有考虑这样做是不是友好的问题。

虽然解决了textarea文本域中输入空格和换行会被转成为特殊字符的问题，但是也会冒出新的问题出来。
那就是转成< br > 标签之后存入数据库。在下次修改时，会发现内容显示时并没有换行而是显示出了< br >标签

所以我在获取数据显示时，再次进行转义成\n ，让其在页面显示时换行

如下代码即可转义：

replace(/<br>/g,'\n');

一定记得写/g所有的都转，因为我忘记写/g,第一个换行正确转义了，但其余的依旧是
,所以我怀疑人生了一会。

这样显示的效果是正确的。

希望对大家有所帮助，因为公司就我一个半吊子小白前端，所以面试前端职位时，我只能赶鸭子上架充当面试官。

在面试一年多工作经验的前端工程师时，我问了这个问题，结果就是啥也说不上来。并不是我故意这么问，而是我现有的水平实在没法问别人技术，只能问些项目中的一些细节问题。

在我看来textarea是比较常用的，如果这个问题答不上来我觉得确实是有些不太靠谱。

欢迎技术大佬们指正错误。