正則表達式屬性替換

Question

我想解決一些正常的表達式，我在一個方向工作，但失敗時，我改變了屬性。

我想實現的就是找到對齊的價值並更換該數值到類

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

你可以使用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解析器，所以使用正則表達式並不是你的最佳選擇。

由於a'r suggests，這可以用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 reference)