目录
- 解析换行符
- 方法一:在展示内容的盒子添加一个样式
- 方法二:可以用replace替换空格和换行
- 方法三:识别换行后 分别加上p标签
- 文本中的URL可跳转
- JS
- Vue
解析换行符
如果使用文本域输入内容, 在输入内容之后,将内容传给后台后,我们再次展示时,发现之前的换行符都没有了 。
方法一:在展示内容的盒子添加一个样式
复制代码
1
2
3
4
5
6
7
8
9
10.textarea { white-space: pre-line; } .p{ white-space: pre-line; } <p style="white-space: pre-line;font-size:16px;color:#777;">{{row.ent_profile}}</p>
方法二:可以用replace替换空格和换行
复制代码
1
2<el-input v-model="temp.content" type="textarea" />
复制代码
1
2
3
4
5this.temp.content = this.temp.content.replace(/n/g, '<br/>') this.temp.content = this.temp.content.replace(new RegExp(' ', 'gm'), ' ') // 空格转为   // this.model.content = this.model.content.replace(/ /g,'  ');
方法三:识别换行后 分别加上p标签
这里需要注意的是 在传给接口前还需要将添加p标签后的数组形式转换成字符串
复制代码
1
2
3
4
5
6
7this.temp.content = this.temp.content.replace(new RegExp(' ', 'gm'), ' ') // gm 全局替换 const arr = [] this.temp.content.split('n').forEach(item => { arr.push(`<p>${item.trim()}</p>`) }) this.temp.content = arr.join('')
方法四:使用属性contentEditable
属性contentEditable:用于设置或返回元素的内容是否可编辑。
给任意标签如div或p标签设置属性contentEditable = true,则p标签或div标签等为可编辑标签
复制代码
1
2<div ref="content" contenteditable="true" @input="changeTxt" v-html="temp.content">{{ temp.content }}</div>
复制代码
1
2
3
4changeTxt() { this.tempContent = this.$refs.content.innerHTML },
文本中的URL可跳转
JS
复制代码
1
2
3
4
5
6
7
8function replaceSrc(txt){ var reg = /(((https?:(?://)?)(?:[-;:&=+$,w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,w]+@)[A-Za-z0-9.-]+)((?:/[+~%/.w-_]*)???(?:[-+=&;%@.w_]*)#?(?:[w]*))?)/ig; var result = txt.replace(reg,function(item){ return "<a href='"+item+"' target='_blank'>"+item+"</a>"; }); return result; }
复制代码
1
2
3var str = '1231www.baidu.com hahaha http://hao123.com 123123'; replaceSrc(str);
结果返回:
复制代码
1
21231 <a href="www.baidu.com" target="_blank">www.baidu.com</a> hahaha <a href="http://hao123.com" target="_blank">http://hao123.com</a> 123123
Vue
复制代码
1
2
3
4let content = "发送n打开nnhttp://0.0.0.0:9898/#/residentInGroupDetailPage?gridname=%E5%9F%8E%E4%B8%9C01%E7%BD%91%E6%A0%BC&gridlead=%E6%9E%97%E6%83%A0%E8%8A%B3&role=%E7%BD%91%E6%A0%BC%E8%81%94%E7%BB%9C%E5%91%98&talknum=40&name=%E5%9F%8E%E4%B8%9C01%E7%BD%91%E6%A0%BC-%E6%83%A0%E5%AD%90%E5%B1%85%E6%B0%91%E7%BE%A4&id=wrzBYGBgAAm3hcOhJ__WTLNY9A3cHh-A&gridid=107&peoplenum=10n打开nhttp://0.0.0.0:9898/#/sendNoticenhttps://www.cnblogs.com/qiuxiaojian/p/9403215.html"; this.replaceSrc(content);
复制代码
1
2
3
4
5
6
7
8
9
10
11replaceSrc(txt) { // var reg = // /(((https?:(?://)?)(?:[-;:&=+$,w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,w]+@)[A-Za-z0-9.-]+)((?:/[+~%/.w-_]*)???(?:[-+=&;%@.w_]*)#?(?:[w]*))?)/gi; var reg = /(?:(?:https?|ftp|file)://|www.|ftp.)(?:([-A-Za-z0-9+&@#/%=~_|$?!:,.]*)|[-A-Za-z0-9+&@#/%=~_|$?!:,.])*(?:([-A-Za-z0-9+&@#/%=~_|$?!:,.]*)|[A-Za-z0-9+&@#/%=~_|$])/gi; var result = txt.replace(reg, function (item) { return "<a href='" + item + "' target='_blank'>" + item + "</a>"; }); this.data.content = result; },
最后
以上就是沉静蜡烛最近收集整理的关于Vue · textarea解析换行符,文本中的URL可跳转的全部内容,更多相关Vue内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复