заменить атрибут регулярного выражения

Question

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

Что я пытаюсь достичь, это найти значение align и заменить его на класс

var s = '<img src="" align="left" class="smart" title="title for reference" />';
var reg = new RegExp(/(?:align="(.*?)").*?(?:class="(.*)")/);
console.log( s.replace(reg ,'class="image-$1 $2"') );

это работает нормально и выводит

<img src="" class="image-left smart" title="title for reference" />

но если я изменю HTML, поместив класс перед выравниванием, я просто получу исходную строку HTML

Answer 1

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

Как подсказывает a'r , это можно сделать достаточно легко с помощью jQuery. Вот эквивалент чистого DOM:

var div = document.createElement("div");

div.innerHTML = s;

var img = div.firstChild;

img.className += " image-" + img.getAttribute("align");
img.removeAttribute("align");

console.log(div.innerHTML);

(справочник Gecko DOM)

Answer 2

Вы можете использовать jQuery для этого.

var s = '<img src="" align="left" class="smart" title="title for reference" />';

$('<div/>').append(
    $(s).addClass('image-' + $(s).attr('align'))
        .removeAttr('align')
).html();

Это имеет то преимущество, что не зависит от определенного порядка атрибутов и т. Д. И вы, конечно, можете просто добавить модифицированный HTML в DOMдерево вместо использования трюка с $('<div/>') для получения HTML-текста.