try 使用rehypeRewrite使一个类似#tag的URL呈现的markdown编辑器MDEditor.以下是我目前所掌握的

const REG = /\B(\#[a-zA-Z]+\b)(?!;)/gi;

<MDEditor 
    style={{width: "100%", height: "100%"}} 
    minHeight={500} 
    value={value} 
    onChange={(event) => {
        setValue(event || '');
    }} 
    previewOptions={{
        rehypePlugins: [
            [
            rehypeRewrite,
            {
                rewrite: (node : any, index: any, parent: any) => {
                if (node.type === "element" && node.tagName === "p") {
                    let text = getCodeString(node.children);
                    if (REG.test(text)) {
                        node.children = [
                        {
                            type: 'link',
                            url: 'https://example.com',
                            children: [{type: 'text', value: text} ]
                        }];
                    }
                }}
            },
        ]],
    }}
/>

正则表达式正确地匹配文本,但是 node 没有被替换为链接,它只是不呈现任何东西.

任何关于我可能做错什么的指导将不胜感激

推荐答案

你提供的正则表达式似乎是正确的,这里的错误是你如何创建link元素.你仍然应该使用类型element而不是类型link,对于链接,你需要添加额外的标签,如tagName: "a"properties: {href: 'https://example.com'}.

基本上,你可以用这个替换node.children代码:

                      node.children = [
                        {
                          type: "element",
                          tagName: "a",
                          properties: {
                            href: "https://example.com",
                          },
                          children: [{ type: "text", value: text }],
                        },
                      ];

Javascript相关问答推荐

为什么使用MAX_SAFE_INTEGER生成随机整数时数字分布不准确?

如何将拖放功能添加到我已自定义为图像的文件输入HTML标签中?

如何访问Json返回的ASP.NET Core 6中的导航图像属性

使用AJX发送表单后,$_Post看起来为空

按钮未放置在html dis位置

Chart.js V4切换图表中的每个条,同时每个条下有不同的标签.怎么做?

Exceljs:我们在file.xlsx(...)&#中发现了一个问题'"" 39人;

为什么123[';toString';].long返回1?

如何将zoom 变换应用到我的d3力有向图?

如何 for each 输入动态设置输入变更值

面对代码中的错误作为前端与后端的集成

如何确保预订系统跨不同时区的日期时间处理一致?

令牌JWT未过期

无法读取未定义的属性(正在读取合并)-react RTK

有没有一种直接的方法可以深度嵌套在一个JavaScript对象中?

是否可以在不更改组件标识的情况下换出Reaction组件定义(以维护状态/引用等)?如果是这样的话,是如何做到的呢?

本地损坏的Java脚本

如何检测当前是否没有按下键盘上的键?

暂停后只有一次旋转JS

递归地将JSON对象的内容上移一级