移动端-富文本链接处理

我不是女神ヾ 2023-06-17 06:53 19阅读 0赞

#### 移动端-富文本链接处理 ####

问题描述  
后端返回的富文本数据中，有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>