正則表達式來解析BEM類選擇器與javascript

我想分割一個字符串到一個對象數組。我的字符串是一個BEM類選擇器，如下所示：

其中我的字符串（沒有點）將被匹配'__'和' - '分割。

foo-bar--baz__foo--bar = ['foo-bar', '--baz', '__foo', '--bar']

foo-bar--baz = ['foo-bar', '--baz']

foo-bar__bar--baz = ['foo-bar', '__bar', '--baz']

foo = ['foo']

我用下面的正則表達式的嘗試：

const regex = /([a-zA-Z0-9']+)(--[a-zA-Z0-9']+)(__[a-zA-Z0-9']+)/g; 

while (match = reg.exec(string)) { 
    var group1 = match[1]; 
    var group2 = match[2]; 
    var group3 = match[3]; 

    console.log(group1+'; '+group2+'; '+group3); 
}

但foo-bar--baz__foo--bar只能輸出：

foo-bar --baz __foo

，而不是最後的--bar ...

我想不通爲什麼。

而且，也許更好的整體解決方案存在解決我的問題......

感謝對幫助

來源

2017-07-06 GaelBoyenval

你確定'foo-bar - baz__foo - bar'是一個「有效」的BEM id entifier？ – evolutionxbox

@evolutionxbox是的，這是一個在各種BEM風格中有效的BEM類。 – zzzzBov

@zzzzBov這只是奇怪。那個選擇者似乎是一個BMBEM。 – evolutionxbox

我一無所知BEM但它將一個字符串分割成一個對象是容易的。我不知道它是否是有效的BEM。它不會在字符串中使用更多的項目。

var a = "foo-bar--baz__foo--bar" 
 
var names = ["block","modifier","element","modifier"]; 
 
var arr = a.split(/--|__/g).map(function (el, i) { 
 
    var obj = {}; 
 
    obj[names[i]] = el; 
 
    return obj; 
 
}); 
 
console.log(arr);

來源

2017-07-06 16:00:33 James

謝謝，但這項工作只與示例選擇器，如果我有一個元素在最後的位置，你的代碼仍然會使用'修飾符'鍵。 – GaelBoyenval

@GaelBoyenval你可能需要對你的「多種口味」進行更嚴格的命名。 – evolutionxbox

我不能編輯該問題嗎？看不到如何。 – GaelBoyenval