江门市建设工程备案网站,国产做性直播视频网站,在网上做效果图网站,海南省住房和建设厅网站首页需求#xff1a; 后端返回的字符串中带有br换行符#xff0c;前端需要处理行内及行尾的换行符。具体需求可分为以下两个#xff1a;
若是字符串末尾有换行符#xff0c;需要去掉。若是字符串内有换行符#xff0c;有两种需求#xff1a;①将换行符转换成逗号或其它符号 后端返回的字符串中带有br换行符前端需要处理行内及行尾的换行符。具体需求可分为以下两个
若是字符串末尾有换行符需要去掉。若是字符串内有换行符有两种需求①将换行符转换成逗号或其它符号②识别br符实现换行的效果。
整理一下则会变成以下两个问题
需要一个方法对字符串进行处理去掉字符串末尾的换行符并将行内的换行符换成我们指定的字符。识别换行符实现换行的效果
一、首先去掉字符串末尾的 br 符并将行内的换行符替换成指定的字符
封装了一个方法如下
// 输入字符串如果字符串末尾有br,去掉字符串内如果有br,可选去掉或不去掉。若去掉则需要传第二个字符串替换的字符串。
var removeBr function(originStr, replaceStraaa) {var str originStr;// 去除字符串前后空格str str.replace(/(^\s*)|(\s*$)/g, );// 去掉末尾的br符号str str.replace(/(br)*$/g, );if(replaceStr ! aaa) {str str.replace(/br/g, replaceStr);}return str;
}
export default removeBr;应用的时候将该方法直接引入对应的文件中
// 页面引用
templatediv{{ str1}}div{{ handleBr(str1) }}/div/div
/template
// 定义方法
script
// 获取br字符处理方法--(removeBr为方法对应的文件名字from后面跟的是removeBr.js文件所在位置)
import removeBr from /util/removeBr.js;
export default {data(){return {str1: 第三方监测D.004.2-TE04标br工程测量D.004.2-TE03标br质量检测D.004.2-TE02标br质量检测D.004.2-TE01标br,}},methods: {handleBr(str){return removeBr(str, ,);},},
}
/script 效果如下 到此已经完成了一个需求。
二、只去掉字符串末尾的 br 符行内的换行符展示换行效果
这种只需要在上面的基础上进行改进然后再利用v-html。
在vue中在页面上的字符串展示并不会识别字符串中的标签等元素为了识别到字符串中的标签需要使用v-html指令。
// 页面引用
templatediv{{ str1}}div{{ handleBr(str1) }}/div // 变逗号div v-htmlhandleBr(str1)/div // 识别标签/div
/template// 同时方法也需要改造一下
methods: {handleBr(str, tStr ){if(tStr ) {return removeBr(str);} else {return removeBr(str, tStr);}},
},效果如下 到此所有的需求已满足。
