Как стиль атрибута alt

Я пытаюсь отобразить (внешний) html тега img, но я хочу, чтобы атрибут alt был красным.

Как я получаю строку:

var img_outerHTML = img[0].outerHTML;

Это дает мне строку:

<img alt="main-logo" src="main-logo.png">

Итак, как я могу main-logo быть красным?
Спасибо!

EDIT

Благодаря techfoobar для решения и всем, кто помог!
Ниже приведен пример jsFiddle.

Ответ 1

Предполагая, что вы пытаетесь отобразить внешний HTML как таковой в другом элементе, вы можете сделать:

var s = '<img alt="main-logo" src="main-logo.png">';
// As pointed out by user bfavaretto, we need to html-encode it before
// injecting the <span>
s = $('<div/>').text(s).html();
s = s.replace(/alt=\"([a-zA-Z0-9\s-]*)\"/, 'alt="<span class=\'red\'>$1</span>"');

Как только это будет сделано, это преобразует HTML-строку в значение (Примечание: все остальные, что диапазон будет закодирован в HTML). fooobar.com/questions/12528/...)

<img alt="<span class='red'>main-logo</span>" src="main-logo.png">

Собственно, это будет:

&lt;img alt="<span class='red'>main-logo</span>" src="main-logo.png"&gt;

И в вашем CSS добавьте:

span.red {
    color: red;
}

Ответ 2

Это также можно сделать только с помощью CSS.
просто оберните тэг img img в тег span и примените красный цвет к этому диапазону. попробуйте это

<span style="color: red;"><img alt="main-logo" src="main-logo.png"></span>