求教 html 字符串替换 关键词 为 组件 怎样能得到 Jsx ？

我有一个 字符串 如下

// html 结构不确定，下面只是举个例子
const html = "
	<div>
            xxx
            <span>123</span>
            <p>
                xxx
                <span>456</span>
                xxx
            </p>
            xxx
        </div>";

我想替换其中的

<span>/\d+/</span>

为组件

<el-link href={k}>{k}</el-link>

得到最终的 Jsx

const Jsx = <div>
            	xxx
                <el-link href={123}>{123}</el-link>
                <p>
                    xxx
                    <el-link href={456}>{456}</el-link>
                    xxx
                </p>
                xxx
            </div>;

综合来看，就是求下面的 handle 函数 求教 谢谢。
也可能我的思路过于曲折，如果有更好的 A->Z 的方法也希望不吝赐教。

<template>
	<component :is="r()"></component>
</template>

export default {
	data: () => ({
    	html,
    }),
    methods:{
    	handle(){
        	...  求解
        },
     	r(){
            const jsx = this.handle(this.html);
            return {
                functional: true,
                render(h){
                    return jsx
                },
            };
        }
    }
}