javascript - Showdown.js extension to modify html

Question

with help from another SO question on this topic, I am trying out a Showdown.js extension that is not working on html (it works fine if I want to replace just text, but I want to modify the html).

I want to change

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

to

<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="" />

My extension is

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

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

but no cigar.

Answer 1

Showdown 扩展适用于 html。尝试这个：

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

Answer 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

Answer 3

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

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

postProcess(converter.makeHtml(text));