vue 不常见操作

 对 v-html 的扩展操作,

 问题产生背景, 在vue 项目中,用v-html渲染 html字符串,这里面包括a 标签等内容,因为某种需求,a 的默认跳转不符合要求,要经过自己定义的方法跳转。

原来的a  : <a href="www.com">eeee</a>

处理后的: <a href="javascript: goTo('www.com')"></a>

正则匹配:

export function handel (str) {
  let imageUrl = str
  var reg1 = /<a.*?href?\s*=\s*['|"]+?(.*?)['|"]+?/g;
  const re = /\/files\/courses\/[a-zA-Z0-9]+\/sections\/[a-zA-Z0-9]+\/content\/images\/[a-zA-Z0-9]+/g
  if (typeof str === 'string') {
    imageUrl = str.replace(re, function (value) {
      return getDomain() + value
    })
    .replace(reg1, function (url) {
      let newUrl = url.split('href=')[1].replace(/"/g, ''); // 此处最挫,正则没搞好
      // var event = eval()
      return `<a href="javascript:goto('${newUrl}')"`
    })
  }
  return imageUrl
}

 goTo 是一个全局方法:

我是在组件中定义的:

window.goto = function (url) {
  let currentUrl = window.location.href;
  alert(currentUrl)
  if (typeof window['api'] !== 'undefined') {
    var api = window['api']
    api.sendEvent({
      name: 'returnItLab',
      extra: {
        url: currentUrl
      }
    })
  }
  window.location.href = url
}

vue dom:

<div v-html="handel(contentHTML)" >
</div>

  

 

 

posted @ 2018-02-01 17:25  adouwt  阅读(188)  评论(0编辑  收藏  举报