[TOC] >[success] # textarea中换行、回车、空格的识别与处理 附上[关于textarea中换行、回车、空格的识别与处理]([https://www.cnblogs.com/zjhr/p/5704125.html](https://www.cnblogs.com/zjhr/p/5704125.html)) ~~~ 在工作中有一种需求是，展示详情页面的文字时候，要按照当初新增时候在文本域中的格式来展示（'就是说空格回车都要展示'） ~~~ <br/> >[success] ## 原生写法 html部分： ~~~ <textarea id="test_new_line" cols="30" rows="10"></textarea> <input type="button" id="submit" value="提交"/> <div id="result"></div> ~~~ js部分： ~~~ // 按钮 let btn = document.getElementById("submit") // 文本域 let textarea = document.getElementById("test_new_line") // 点击按钮 btn.onclick = function(){ let newString = textarea .value.replace(/\n/g, '_@').replace(/\r/g, '_#') newString = newString.replace(/_#_@/g, '<br/>') // IE7-8 newString = newString.replace(/_@/g, '<br/>') // IE9、FF、chrome newString = newString.replace(/\s/g, '&nbsp;') // 空格处理 // 往div上赋值 document.getElementById("result").innerHTML = newString } ~~~ <br/> >[success] ## vue写法 html部分： ~~~ <el-table :data="diseaseScaleData"> <el-table-column label="定量描述"> <template slot-scope="scope"> <p v-html="textFormat(scope.row.quantitativeDesc)"></p> </template> </el-table-column> </el-table> ~~~ js部分： ~~~ methods: { textFormat(val){ // 格式化文字展示文本域格式文字 if(val){ let newString = val.replace(/\n/g, '_@').replace(/\r/g, '_#') newString = newString.replace(/_#_@/g, '<br/>') // IE7-8 newString = newString.replace(/_@/g, '<br/>') // IE9、FF、chrome newString = newString.replace(/\s/g, '&nbsp;') // 空格处理 return newString } } } ~~~ textFormat方法里面一定要判断是否有这个值，如果没有这个值得话就会报replace的错