这是一个创建于 1199 天前的主题，其中的信息可能已经有所发展或是发生改变。
我有一个 字符串 如下
// 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 }, }; } } }  | 1 GreatAuk 2022-07-12 16:56:52 +08:00 正则替换不行吗 |
 | 2 duan602728596 2022-07-12 16:58:03 +08:00 |
 | 3 reter 2022-07-12 17:00:12 +08:00 我的方法：将字符串解析成可处理的 HTML 对象, 找到标签 span, 检查内容是否符合条件，然后替换标签。替换结束，再序列化成字符串。 比如用 DOMParser 解析： https://developer.mozilla.org/en-US/docs/Web/API/DOMParser |
 | 6 dudubaba 2022-07-12 17:33:46 +08:00 用 createElement 写 jsx |
 | 8 lqzhgood OP 蹲坑回来就有思路了~ html 和 自定义组件的 字符串混合解析不就是 vue template 所做的事么~ 所以只要无脑拼接字符串，然后使用 Runtime + Compiler 的 vue 版本， 丢到 template 里面去拿到返回的 vue 组件即可。虽然丢失了一点点性能，但是方便太多了。 ``` <template> <component :is="r()"></component> </template> export default { data: () => ({ html, }), methods:{ handle(html){ return html.replaceAll(/\d+/, k=>`<el-link href='${k}'>${k}</el-link>`) }, r(){ const html= this.handle(this.html); return { template: html }; } } } ``` |
 | 9 musi 2022-07-13 09:12:55 +08:00 好家伙，用带 compiler 版本的 vue ，你要不看看 vue 的 h 函数？ |
| 11 musi 2022-07-13 14:53:03 +08:00 @lqzhgood 标题和你最后给的答案都不对，你最后答案只是想用 component 渲染出来，r 函数都传过去了你不用，你这明显是为了得到 c ，走了弯路 b ，放着捷径 a 不走 |
| 12 lqzhgood OP > 也可能我的思路过于曲折，如果有更好的 A->Z 的方法也希望不吝赐教。 表明只要达到目的即可，中间的路径 A -> Z 越优越好~ templete 是我想到最优路径，所以这是我的答案。 ---------------------------------------------------- 用 h 函数写出来 100 话费送上 talk is easy, show me the code 提醒一下 html 内容不定 |
Select Language