PageDown: добавление класса CSS к каждому тегу <img> с использованием JavaScript

На первый взгляд, этот вопрос похож на Как добавить пользовательский тег изображения в pagedown? Однако на практике, я думаю, решение примет совсем другую форму.

С PageDown, вы можете добавить <img> тегировать к текстовому блоку двумя разными способами:

![MY IMAGE](http://myurl.com/myimage.png)
<img src='myimage.png'>

Глядя на код, первый подход обрабатывается в _DoImages в Markdown.Converter.js, создавая <img> тег с соответствующей информацией, содержащейся в нем. Второй подход обрабатывается в sanitizeHtml (который вызывает sanitizeTag и использует img_white) в Markdown.Sanitizer.js,

Все, что я хочу добавить, это то, что каждый <img> к тегу, который успешно проходит через Markdown, добавлен класс CSS (например, "user-img").

Так, например, <img src='myimg.png' width='100' height'100'> станет <img src='myimg.png' width='100' height='100' class='user-img'>

Изучая структуру Pagedown, я думаю, что было бы наиболее целесообразно добавить эту функциональность в качестве "подключаемого модуля", работающего на стадии "postConversion", в моем собственном коде (т. Е. Мне не пришлось бы ничего менять в Pagedown.). В псевдокоде, я думаю, что изменения кода в моем коде будут выглядеть примерно так:

init function:

this.converter = Markdown.getSanitizingConverter();
this.converter.hooks.chain("postConversion", userifyImages);

userifyImages(html_text):

// note: `html_text` is just a plain string
for every <img> tag that still exists (i.e., is valid) in html_text:
    add "class='user-img'" to the tag

Я предполагаю, что существует сравнительно простое регулярное выражение, основанное на этом правиле, но я боюсь, что мне не удалось его вывести.

Итак, у меня есть два вопроса:

(1) Считаете ли вы, что такой подход имеет смысл, учитывая структуру Pagedown?

(2) Знаете ли вы, как я мог бы создать регулярное выражение, которое выполняет необходимые мне манипуляции? (или, конечно, решить проблему без использования регулярных выражений.)

Спасибо за ваше время.

Источник

3 ответа

Решение

Хорошо, основываясь на моем подходе к существующему коду Pagedown, похоже, это работает нормально.

function identifyImages(html) {

    function sanitizeImageTag(tag) {
        // chops off the last char in the string ('>') and replaces it
        // with the class name we want to add
        if ( tag.match(/^<img.*>$/i) ) {
            return tag.slice(0,tag.length-1) + " class=\"user-img\">";
        }
        else {
            return tag;
        }
    }

    return html.replace(/<[^>]*>?/gi, sanitizeImageTag);
}

this.converter = Markdown.getSanitizingConverter();
this.converterhooks.chain("postConversion",identifyImages);

Тем не менее, я не слишком комфортно с регулярным выражением: /<[^>]*>?/gi, Я не уверен, что именно ? там делает Тем не менее, это похоже на работу.

Источник

Я хотел добавить класс для отдельных изображений. Вот как я это сделал:

  var converter = new Markdown.Converter();

  converter.hooks.chain('postSpanGamut', function (text) {
    var matches = text.match(/\{(\S*)\}/);
    if (matches) {
      text = text.replace(matches[0], '');
      text = text.replace(/\/>/, 'class="' + matches[1] + '" />');
    }
    return text;
  });

Это позволяет этому синтаксису работать:

![{my-class}cute kitties!](http://placekitten.com/g/200/200)

который выплевывает

<img src="http://placekitten.com/g/200/200" alt="cute kittes!" class="my-class">

Возможно, вы могли бы сделать регулярное выражение вокруг { } более точным.

Источник

При условии, что html_text это HTML DOM, это должно работать:

var ilist = html_text.images;

for(var i = 0; i < ilist.length; i++) {
    ilist[i].className += "user-img") 
}
Источник
Другие вопросы по тегам