Vue · textarea解析换行符，文本中的URL可跳转

83 阅读 0 评论 55 点赞

我是靠谱客的博主沉静蜡烛，这篇文章主要介绍Vue · textarea解析换行符，文本中的URL可跳转，现在分享给大家，希望可以做个参考。

解析换行符

如果使用文本域输入内容，在输入内容之后，将内容传给后台后，我们再次展示时，发现之前的换行符都没有了。

方法一：在展示内容的盒子添加一个样式

复制代码

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
5
this.temp.content = this.temp.content.replace(/n/g, '<br/>')
this.temp.content = this.temp.content.replace(new RegExp(' ', 'gm'), '&nbsp;')
// 空格转为 &nbsp
// this.model.content = this.model.content.replace(/ /g,' &nbsp');

方法三：识别换行后分别加上p标签

这里需要注意的是在传给接口前还需要将添加p标签后的数组形式转换成字符串

复制代码

1
2
3
4
5
6
7
this.temp.content = this.temp.content.replace(new RegExp(' ', 'gm'), '&nbsp;') // 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
4
changeTxt() {
  this.tempContent = this.$refs.content.innerHTML
},

文本中的URL可跳转

JS

复制代码

1
2
3
4
5
6
7
8
function 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
3
var str = '1231www.baidu.com hahaha http://hao123.com 123123';
replaceSrc(str);

结果返回：

复制代码

1
2
1231 <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
4
let 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
11
replaceSrc(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;
    },