添加遞增數字到字符串使用javascript .replace正則表達式

Question

我有這個字符串，我試圖通過增加一個_＃來增加每個字/屬性＃＃是在{左側遞增的數字。

str = 'View{Image{BackgroundImage: Image.png;Position: 0, 0;Width: 320;Height: 480;}Button{BackgroundImage: ButtonTop.png;Position: 61, 83;Width: 217;Height: 58;}Button_2{BackgroundImage: ButtonBottom.png;Position: 21, 303;Width: 217;Height: 58;}}' 

在過去，我用這個正則表達式，但它不工作，我不知道爲什麼。

var i = {}; 
str = str.replace(/(\S+):{/g, function (m, p1) { 
      i[p1] = (i[p1] || 0) + 1; 
      return p1 + "_" + i[p1].toString() + ":{"; 
     }); 

期望了看跌期權：

str = 'View_1{Image_1{BackgroundImage: Image.png;Position: 0, 0;Width: 320;Height: 480;}Button_1{BackgroundImage: ButtonTop.png;Position: 61, 83;Width: 217;Height: 58;}Button_2{BackgroundImage: ButtonBottom.png;Position: 21, 303;Width: 217;Height: 58;}}' 

Answer 1

根據你的正則表達式，它是尋找一個左花括號{，這是不存在於你的字符串前面一個冒號:。試着改變字符串的開頭：

str = 'View:{Image...'; 

---

更新：什麼是包含在i可變我不知道 - 是它總是一個空對象？但是，如果你繼續遞增的數字，這個替換功能可能會更好地爲您（demo）：

str = str.replace(/([a-zA-Z]+_?)(\d+)?:{/g, function (m, n, d) { 
    d = (parseInt(d,10) || 0) + 1; // add one 
    if (!/_$/.test(n)) { n += '_'; } // add _ if name doesn't have it 
    return n + d + ":{"; 
}); 

Answer 2

一些小但很重要的改變應該得到它的工作。

首先，我認爲您的str存在一個小錯誤。例如，您有Button_2朝向str的末尾，但我假設您只是希望這是Button，並且您的replace函數負責處理增量。否則，結果將是Button_2_1 ...所以我假設你想str是這樣的：

str = 'View{Image{BackgroundImage: Image.png;Position: 0, 0;Width: 320;Height: 480;}Button{BackgroundImage: ButtonTop.png;Position: 61, 83;Width: 217;Height: 58;}Button{BackgroundImage: ButtonBottom.png;Position: 21, 303;Width: 217;Height: 58;}}' 

如果這是正確的，然後下面是更正後的代碼（我希望能夠爲您服務），對此解釋後：

var i = {}; 

str = str.replace(/(\w+){/g, function (m, p1) { 
    i[p1] = (i[p1] || 0) + 1; 
    return p1 + "_" + i[p1].toString() + ":{"; 
}); 

在原來的代碼，你必須在括號\S但這是太一般了，因爲它會捕捉即使是大括號{。在正則表達式中，大寫\S表示任何字符，即而不是的空格。小寫字母\w會找到字母數字字符，因此這可能是您想要捕獲單詞View和Image等的字詞。因此，現在字符串的任何字母數字部分（開頭的大括號將直接跟隨（無空格））都將替換爲下劃線和一個數字，隨着該項目的每個實例增加。

我不知道，如果你真的想結腸:到，所以我在離開它的每個數字後出現，但如果你真的不希望它只是return p1 + "_" + i[p1].toString() + "{";

更換return語句否則，如果你很滿意以上（冒號包括），這是由此產生的字符串：

View_1:{Image_1:{BackgroundImage: Image.png;Position: 0, 0;Width: 320;Height: 480;}Button_1:{BackgroundImage: ButtonTop.png;Position: 61, 83;Width: 217;Height: 58;}Button_2:{BackgroundImage: ButtonBottom.png;Position: 21, 303;Width: 217;Height: 58;}} 

我認爲這是你想要的。我已經設置了一個小提琴，所以你可以看到更正的代碼in action，併發揮。

希望這會有所幫助。