正則表達式屬性替換

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放置在align之前的類，我只會得到原始的html字符串

Answer 1

您可以使用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文字。

Answer 2

眾所周知，正則表達式不利於使用標記，因為標記不是正則。 在瀏覽器中工作時，您已經可以使用強大的HTML解析器，因此，使用正則表達式不是最佳選擇。

正如一個建議 ，使用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參考）