2016-09-17 71 views
0

我試圖替換字符串中的多個詞/串並在這裏測試的所有建議的解決方案 How to replace all occurrences of a string in JavaScript?串1替換多個字符串的麻煩和10

他們所有的工作,直到我在同一更換color_1color_10時間。 現在,color_10替換部分是color_1的一部分,最後是0。

https://jsfiddle.net/fqqLdxkz/1/

string = 'padding:0px 0px 0px 0px;margin:0px auto 0px auto;background-color:color_9;color_1;color_5;color_4;color_10;'; 
 
var palettes = { 
 
    "theme": "{\"color_1\":\"#454545\",\"color_2\":\"#40b1e2\",\"color_3\":\"#efefef\",\"color_4\":\"#fafafa\",\"color_5\":\"#cccccc\",\"color_6\":\"#e91e63\",\"color_7\":\"#e91e63\",\"color_8\":\"#e74c3c\",\"color_9\":\"#2c3e50\",\"color_10\":\"#344957\"}" 
 
} 
 

 
function PaletteColor(css) { 
 

 

 
    if (css.indexOf('color_') !== -1) { 
 

 
    var $palette = JSON.parse(palettes.theme); 
 

 
    $.each($palette, function(name, color) { 
 
     // css = css.replace(new RegExp(name, 'g'), color); 
 
     css = css.split(name).join(color); 
 
    }); 
 

 
    } 
 

 
    return css; 
 
} 
 
$('#result').html(PaletteColor(string));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div id="result">...</div>

我缺少什麼?

更新:使用JSON逆轉測試,color_10第一color_1最後,
和它的作品https://jsfiddle.net/fqqLdxkz/2/

但它是沒有意義的,因爲它看起來是第一替代指標不是值。

+0

你在哪裏卡住到底是什麼?這正是應該發生的事情;你編寫代碼來替換字符串'color_1',它就是這麼做的。 – gravityplanx

+0

@gravityplanx,檢查最後的替換,它是從color_1和color_10混合http://prntscr.com/cj930s,應該是http://prntscr.com/cj934z – Benn

回答

2

你可以在你的正則表達式中放置一個字邊界斷言\b,這樣color_1\b不會匹配color_10

var string = 'padding:0px 0px 0px 0px;margin:0px auto 0px auto;background-color:color_9;color_1;color_5;color_4;color_10;'; 
 
var palettes = { 
 
    theme: {"color_1":"#454545","color_2":"#40b1e2","color_3":"#efefef","color_4":"#fafafa","color_5":"#cccccc","color_6":"#e91e63","color_7":"#e91e63","color_8":"#e74c3c","color_9":"#2c3e50","color_10":"#344957"} 
 
} 
 

 
function paletteColor(css) { 
 
    if (css.indexOf('color_') !== -1) { 
 
    var $palette = palettes.theme; 
 

 
    $.each($palette, function(name, color) { 
 
     css = css.replace(new RegExp('\\b' + name + '\\b', 'g'), color); 
 
    }); 
 
    } 
 
    return css; 
 
} 
 

 
$('#result').html(paletteColor(string));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div id="result">...</div>