【vue|实现文本内容是超链接时自动转换为超链接】文本内容出现超链接时，自动让其变成超链接
解决办法：
使用自定义指令实现数据过滤转化为超链接
- 在min.js定义全局自定义指令
// 自定义指令 全局指令,引用就自行引用了
import Vue form 'vue'
Vue.directive('openLink', {
bind(el) {
// 获取内容
let textR = el.innerText
// 判断内容是否为空
if (textR.length) {
// 匹配超链接正则
let reg = /(https?|ftp|file)(:\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;
]+[-A-Za-z0-9+&@#/%=~_|])/g;
let arr = textR.math(reg) || []
if (arr.length) {
textR = textR.replace(reg, "$1$2");
}
el.innerHTML = textR
}
}
})
- 使用
-open-link>前面这些文字不会有超链接，从下面开始就会转换为超链接了https://www.baidu.com
推荐阅读
- webpack|webpack插件篇
- JavaScript中一些不常见的运算符号（三分钟看完）
- Web3D 从入门到跑路 · 3D 初体验
- 不懂物理的前端不是好的游戏开发者（二）—— 物理引擎的学习之路
- 源码|第13期在线音乐网站前后分离springboot整合vue
- 源码|第14期家庭理财管理系统SSM
- 源码|个人博客系统+源码
- 昇腾CANN论文上榜CVPR，全景图像生成算法交互性再增强！
- vue.js|vue、element-ui、springboot前后端分离权限管理系统实战