移动端-富文本链接处理

移动端-富文本链接处理

问题描述
后端返回的富文本数据中，有a标签链接，直接点击a标签，会直接替换当前webview的地址，当我们想退回上一个页面的时候，就不能生效了
解决思路
前端框架是vue，我想使用正则匹配出富文本中的a标签，然后转换为span标签，添加class、data-url属性，然后在使用原生js绑定点击事件，在点击事件中在执行vue对象的方法，调用组件或打开新的webview

<template>
    <div class="dome">
        <div v-html="codeSnippet"></div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            codeSnippet: ''
        }
    },
    mounted () {
        this.codeSnippet = this.aToSpan(this.codeSnippet)
        setTimeout(() => {
            let viewUrl = document.querySelectorAll('.view-url')
            viewUrl.forEach((item) => {
                // correctHttp补齐url的http协议
                let url = correctHttp(item.getAttribute('data-url'))
                item.addEventListener("click", () => { this.openWindow(url) }, false)
            })
        }, 20)
    },
    methods: {
        // a标签替换span标签
        aToSpan (str) {
            let regexpA = /\<a.*?\>(.+?)\<\/a\>/g
            let regexpUrl = /href\=\"(.+?)\"\>(.+?)\<\/a>/g
            let labelAs = str.match(regexpA) || []
            let newStr = str
            labelAs.forEach((item) => {
                let labelContent = regexpUrl.exec(item)
                regexpUrl.lastIndex = 0
                newStr = newStr.replace(item, `<span class="view-url" data-url="${labelContent[1]}">${labelContent[2]}</span>`)
            })
            return newStr
        },
        // 打开webview的方法写这里
        openWindow (url) {
            console.log(url)
        }
    },
}
</script>