Showdown.js 扩展修改html答案

【问题标题】：Showdown.js extension to modify htmlShowdown.js 扩展修改html
【发布时间】：2019-09-10 00:13:31
【问题描述】：

在another SO question on this topic 的帮助下，我正在尝试一个不适用于 html 的 Showdown.js 扩展（如果我只想替换文本，它可以正常工作，但我想修改 html）。

我想改变

<img src="/path/to/image/image1.jpg" alt="bloo bap" title="" />
<img src="/path/to/image/image2.jpg" alt="shoo ba doo" title="" />

到

<img class="foo" src="/path/to/image/image1.jpg" alt="bloo bap" title="" />
<img class="foo" src="/path/to/image/image2.jpg" alt="shoo ba doo" title="" />

我的扩展是

var demo = function(converter) {
    return [
        {
            type    : 'lang', 
            regex   : '<img src=(.*)\/>', 
            replace : '<img class="foo" src=$1>'
        }
    ];
}

var converter = new Showdown.converter({extensions: [demo]});

但没有雪茄。

【问题讨论】：

你能设置一个jsfiddle吗？

标签： javascript html showdown

【解决方案1】：

摊牌扩展适用于 html。试试这个：

type: 'html',
regex: '<img src=(.*)\/>',
replace: '<img class="foo" src=$1>'

【讨论】：

【解决方案2】：

有点晚了，但对于那些通过谷歌来这里的人：

您需要的是output 扩展，而不是lang 扩展。

这是一个语言扩展。它将 .md 文件的链接替换为 .html 文件的链接作为降价代码的第一步：

return [
    {
        type    : 'lang', 
        regex   : /\[(.*)\]\((.*)\.md\)/g, 
        replace : '[$1]($2.html)'
    }
];

这是一个输出扩展。它为所有图像添加一个类属性作为所有 HTML 生成后的最后一步

return [
    {
        type    : 'output', 
        regex   : '<img (.*)/>', 
        replace : '<img class="foo" $1>'
    }
];

详情在这里：https://github.com/showdownjs/showdown/wiki/extensions

【讨论】：

【解决方案3】：

根据我的测试，我相信 Showdown 扩展仅适用于文本，而不适用于 html。也就是说，扩展在 Showdown 接管之前被调用。我没有创建扩展，而是使用以下代码，它就像一个魅力

var postProcess = function(text) {
    return text.replace(/<img src=(.*)\/>/g, '<img class="foo" src=$1>');
}

postProcess(converter.makeHtml(text));

【讨论】：