使用rehypeRewrite使MDEditor中#标签渲染为URL失败求助

核心问题分析 #

你的代码存在几个关键问题，导致节点未正确替换：

1. 节点匹配错误：当前监听的是<p>标签，但目标内容是在<code>标签里，应该匹配tagName === "code"的节点，而非<p>。
2. 文本提取逻辑问题：getCodeString的用法可能不符合当前节点结构，<code>的子节点通常是text类型，直接取node.children[0].value更可靠，避免工具函数导致的文本提取失败。
3. 全局正则的缓存陷阱：带g修饰符的正则调用test()时会记住上次匹配位置，导致后续匹配异常，需重置正则或去掉g修饰符。
4. 节点替换逻辑错误：直接修改<p>的子节点会破坏原有结构，且未针对<code>节点处理，导致内容被清空。

修复后的代码示例 #

// 去掉g修饰符，或每次匹配前重置lastIndex
const REG = /\B(\#[a-zA-Z]+\b)(?!;)/i;

<MDEditor 
    style={{width: "100%", height: "100%"}} 
    minHeight={500} 
    value={value} 
    onChange={(event) => {
        setValue(event || '');
    }} 
    previewOptions={{
        rehypePlugins: [
            [
                rehypeRewrite,
                {
                    rewrite: (node : any, index: any, parent: any) => {
                        // 精准匹配code标签
                        if (node.type === "element" && node.tagName === "code") {
                            // 提取code内的文本内容
                            const text = node.children?.[0]?.value || '';
                            // 重置正则匹配位置，避免全局缓存问题
                            REG.lastIndex = 0;
                            if (REG.test(text)) {
                                // 替换原有code节点为链接节点
                                parent.children[index] = {
                                    type: 'element',
                                    tagName: 'a',
                                    properties: {
                                        href: `https://example.com/${text.slice(1)}` // 拼接tag到目标URL
                                    },
                                    children: [{type: 'text', value: text}]
                                };
                            }
                        }
                    }
                },
            ]
        ],
    }}
/>

关键修复点说明 #

• 匹配目标节点：改为监听<code>标签，精准定位需要处理的内容。
• 文本提取：直接访问node.children[0].value获取<code>内的文本，避免工具函数带来的不确定性。
• 正则处理：要么去掉g修饰符，要么每次调用test()前重置REG.lastIndex = 0，解决全局匹配的缓存问题。
• 节点替换方式：通过parent.children[index]直接替换原有<code>节点，确保DOM树结构正确更新。

内容的提问来源于stack exchange，提问作者TJ Gillis