vue标记出文本中的超链接并可以点击跳转

复制代码
<p v-html="translateHtml(item.message)"></p>
methods: {
    //给字符串中的链接用span标签包裹起来,实现点击跳转
    translateHtml (msg) {
      var reg =
        /((http|https):\/\/[-A-Za-z0-9+&@#()/%?=~_|!:,.;]+[-A-Za-z0-9+&@#()/%=~_|])/g
        var textR = msg.replace(
          reg,
          `<span style='color:#2660f5;text-decoration:underline;' onclick=getDownLoad('$1')>$1</span>`
      )
      return textR
    },
},
mounted () {
    //字符串拼接添加点击事件
    (window.getDownLoad = (url) => {
      location.href = url
    }),
}
复制代码

 

posted @   chicidol  阅读(1427)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示