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 @ 2023-02-16 10:27  chicidol  阅读(1221)  评论(0编辑  收藏  举报