[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的錯