正则表达式来解析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