串1替换多个字符串的麻烦和10
问题描述:
我试图替换字符串中的多个词/串并在这里测试的所有建议的解决方案 How to replace all occurrences of a string in JavaScript?串1替换多个字符串的麻烦和10
他们所有的工作,直到我在同一更换color_1
和color_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/
但它是没有意义的,因为它看起来是第一替代指标不是值。
答
你可以在你的正则表达式中放置一个字边界断言\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>
你在哪里卡住到底是什么?这正是应该发生的事情;你编写代码来替换字符串'color_1',它就是这么做的。 – gravityplanx
@gravityplanx,检查最后的替换,它是从color_1和color_10混合http://prntscr.com/cj930s,应该是http://prntscr.com/cj934z – Benn